JavaScript Capstone Project

[78fatemanazari]

General requirements

• Make sure that there are no linter errors.
• Make sure that you used correct Gitflow.
• Make sure that you documented your work in a professional way.

HTML/CSS & JavaScript requirements

• Follow our list of best practices for HTML & CSS.
• Follow our list of best practices for JavaScript.

Project requirements

IMPORTANT NOTE: in this project you will also practice giving code reviews to your teammates. Remember to read the Code Review carefully!

APIs

• First, you need to find an API so you can 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.

  We recommend that you choose an API 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.

  Some example APIs are:

  • Pokeapi: data about the Pokémon world.
  • TVmaze API: data about TV series and movies.
  • Meals DB: data about meals.

You can find more APIs in this GitHub repo or in ProgrammableWeb. Some of the APIs require a token, some require authentication, and some others are just open.

• You will use our Involvement API to record the different user interactions (likes, comments and reservations).

Interfaces

• You should build these interfaces:
  • The home page.
  • The comments popup.
  • The reservations popup (only for the groups of 3 students).
• You should follow the layout of the wireframes provided. You should personalize the rest of the design including colors, typographies, spacings, etc.
• Home page
  • When the page loads, the webapp retrieves data from:
  • The selected API and shows the list of items on screen.
  • The Involvement API to show the item likes.
  • Remember that your page should make only 2 requests:
  • One to the base API.
  • And one to the Involvement API.
  • When the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated.
  • When the user clicks on the "Comments" button, the Comments popup appears.
  • When the user clicks on the "Reservations" button, the Reservations popup appears (only for the groups of 3 students).
  • Home page header and navigation similar to the given mockup.
  • Home page footer similar to the given mockup.
• Comments popup
  • When the popup loads, the webapp retrieves data from:
  • The selected API and shows details about the selected item.
  • The Involvement API to show the item comments.
  • When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.
• Reservations popup (only for the groups of 3 students)
  • When the popup loads, the webapp retrieves data from:
  • The selected API and shows details about the selected item.
  • The Involvement API to show the item reservations.
  • When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated.

Counters We have counters in all the interfaces that show:

• The number of items (home).
• The number of comments (comments popup).
• The number of reservations (reservations popup) - only for the groups of 3 students.

Even if the API gives you these numbers, you will create a specific function to calculate these numbers in each page. These count functions need to be covered with unit tests using Jest.

[Shahid-Bagwan]

Hi @Shahid-Bagwan ,

Your project is complete! There is nothing else to say other than... it's time to merge it :shipit: Congratulations! 🎉

Highlights

✅ Correct use of Gitflow ✅ No linter error ✅ Features Implemented successfully.

Optional suggestions

N/A

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear. Please, remember to tag me in your question so I can receive the notification.