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.
This project is part of the Microverse curriculum in Javascript course!
- Screen Shots
- Video presentation
- About the Project
- Live Version
- Dependencies
- Configuration
- Development
- Testing
- Built With
- Contributors
- Acknowledgements
The project has two user interfaces;
- Homepage : The interface displays the following;
- A set of meal categories all derived from [Meals DB Api](https://www.themealdb.com/api.php)
- Likes interaction that displays number of likes for the meal. The user interface is derived from the[Involvement Api](https://www.notion.so/Involvement-API-869e60b5ad104603aa6db59e08150270)
- Popup Window : The interface displays;
- Images of the selected meal.The interface is derived from [Meal by category Api](https://www.themealdb.com/api/json/v1/1/filter.php?c=Seafood) (An example from seafood category)
- Comment Section. The users comment are displayed on the page courtesy of the [Involvement Api](https://www.notion.so/Involvement-API-869e60b5ad104603aa6db59e08150270)
- 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.
- The 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.
- 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.
- 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: The counters in all the interfaces should show:
- The number of items (home).
- The number of comments (comments popup).
- Webpack
- Jest
- first, clone the project Run
git clone https://github.com/ichala/Javascript-Capstone.git
- Install the necessary dependancies Run
npm install
- Clone the project
https://github.com/ichala/Javascript-Capstone.git
- Tests have been performed using jest.
- To run test on the project, Run
npm run test
- Location /src/modules/functions.test.js
This project was built using these technologies.
- Javascript
- APIs
- WebPack
- Jest
👤 Ali Jendoubi
- GitHub: @iChala
- LinkedIn: @alijendoubi
👤 Joy Kwamboka
- Github: @kwambiee
- Twitter: @kwambiee
- Linkedin: Joy Kwamboka
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse
- Jest
- etc
This project is MIT licensed.