We built our own web application based on an external API. We selected an API that provides data about food recipies. The webapp has 2 user interfaces:
- A home page showing a list of items that you can "like."
- A popup window with more data about an item that you can use to comment on it or reserve it for a period of time. In this pages we implement the followings features:
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. The page 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 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.
- The number of items (home).
- The number of comments (comments popup).
- We created a specific function to calculate these numbers in each page. These count functions were tested using Jest.
- Major languages HTML, CSS, JavaScript
- Frameworks Webpack, Jest
- Technologies used
To get a local copy up and running follow these simple example steps.
Get the latest version of Node.js
npm install
npm run start
npm run test
npm run start
👤 Mariana Revilla Lérida
- GitHub: @marurevi
- Twitter: @MaruRevilla
- LinkedIn: Mariana-Revilla-Lérida
👤 Mahmoud Makhlouf
- GitHub: @devMahmoud
- LinkedIn: Mahmoud Makhlouf
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Hat tip to anyone whose code was used
- Inspiration
- etc
This project is MIT licensed.