Capstone JavaScript My Restaurant Application > The restaurant application majorly displays different categories of meals. The homepage shows a list of meals you can like. The popup window shows more data on the selected meal and the user can comment on it too.
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.
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.