Link to collaborative GitHub project https://github.com/Benmuiruri/stream-it-capstone

The project has two collaborators: Ben Muiruri and Olawade Bamidele

HTML/CSS/JavaScript

• the code is looking clean in all of the files
• I see you are using ES6 syntax throughout the code which is great
• the video description is great, you guys explained everything important
• the Readme file is descriptive enough

Suggestions:

• on the mobile view you could make certain containers wider so that they don't look too narrow on the screen

Summary

Overall the project looks great, works as it should, I like the colors, so basically I don't have anything negative to say. You guys did really well! :+1: :100:

Javascript Capstone Project

Devs - @Benmuiruri and Ola

Tech/Techniques used

• ES6 syntax.
• ES6 modules.
• callbacks and promises.
• Webpack.
• AAA pattern for unit tests.
• Write units tests for a JavaScript app.
• Follow Gitflow.
• Solve simple git conflicts.
• Send and receive data from an API.
• Use API documentation.
• Here's a round-up of the features that were implemented in this project

API Used

• Movie API provided by TV Maze
• Involvement API provided by Microverse

Website Features

• A home page showing a list of Movies that you can "like."
• A popup window with more data about a movie
• Comment feature inside the modal to add new comments and view comments for a particular movie
• Counter showing the number of movies displayed on the home page, the number of likes under the movie title, and the number of comments in the popup window.

Link to video presentation

• https://drive.google.com/file/d/1YSgEySc4y8TBjSsUmKJma8wksQKKW5Ii/view?usp=sharing

• Implement your popup design to improve the accessibility of the website to different users
• The website is not responsive; please make it so that it adapts to different device screens.

Refactor codebase

• Added logo image

• Added mobile screen styles

• added small aesthetic changes to UI

• Fixes the Mobile display issues highlighted during the peer-peer code review #31

Update homepage design

• Updated the header css
• Added callout section
• Added grid CSS rules to wrap the movies
• Styled the individual movie wrapper
• Added overlay text on movie image
• Added transitions on hover

Hi @olawalecoder Please review this PR and let me know if everything is okay. I did my best to style it :smile:

Display List of Movies on the homepage

• Add get movie module to get movies array from the API
• Add display movie module to loop through the movies array and populate the movies section
• Add event listener on all buttons to enable the movie modal to work

@olawalecoder please review the following code base and let me know if everything looks good to merge into development. Thanks

Find an API to base the development of the webapp around it. The API should allow you to

• Get a list of items with a unique item id (or generate the unique id).
• For a given item, get detailed information about it. choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.

Create the main part of the homepage that keeps the layout from the wireframe:

When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

This task does not include displaying the number of likes for each item.

This task does not include the counter of the items.

Create a comments popup only with the top section (displaying details of the selected item)

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

Remember that your page should make only 2 requests:

• one to the base API
• and one to the Involvement API.

This task does not include displaying the likes button (heart icon on the wireframe) for each item.