• Great job so far and the project is looking good! It is functional and also very funny...
• One suggestion is to remove "unprofessional" references such as prison, fighting and such...

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.

Project requirements

APIs

• First, you need to find an API so you can base the development of the web app 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.

• 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.
• 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 web app retrieves data from:
    • The selected API shows the list of items on the 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 are similar to the given mockup.
  • Home page footer is similar to the given mockup.
• Comments popup
  • When the popup loads, the web app retrieves data from:
    • The selected API 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.

Counters We have counters in all the interfaces that show:

• The number of items (home).
• The number of comments (comments popup).

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

DEMO Video

• Adding a counter of comments that checks the number of comments and throws an error if the array is undefined.

• Adding tests to the function.

• Adding complementary additions to display comments to work together.

Good job, @Saadat123456! 🎉 (WIP project🔍)

Seen you present your part of the project was inspiring! 🤓

As we've been discussing most of the project decisions day-to-day, I don't have anything else to add! 🤣

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

When the page loads, the web app retrieves data from the selected API and shows the list of items on the 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.

• Adding a popup-window on click (It uses the item to print as a parameter).

• Adding basic styles for the popup-window.

• Updated "customBinId" as the old one wasn't working.

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).

Create a reservations 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.