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.

This project is part of the Microverse curriculum in Javascript course!

Table of Contents

• Screen Shots
• Video presentation
• About the Project
• Live Version
• Dependencies
• Configuration
• Development
• Testing
• Built With
• Contributors
• Acknowledgements

Application Screen Shots

Homepage

PopupWindow

Video presentation

https://www.loom.com/share/67b10c5c746742d3a04a2ed444871c7a

Live version

https://silviatofana.github.io/Capstone-JavaScript-/

About The Project

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)

Application Instructions

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

Dependencies

• Webpack
• Jest

Configuration

• first, clone the project Run

  git clone https://github.com/silviatofana/Capstone-JavaScript-.git

• Install the necessary dependancies Run

  npm install

Development

• Clone the project

  https://github.com/silviatofana/Capstone-JavaScript-.git

Testing

• Tests have been performed using jest.
• To run test on the project, Run

  npm run test

• Location /src/modules/functions.test.js

Built With

This project was built using these technologies.

• Javascript
• APIs
• WebPack
• Jest

Authors

👤 Silvia Tofana

• GitHub: @silviatofana
• LinkedIn: @silviatofana
• Twitter: @silviatofana

👤 Abdo

• GitHub: @Abdo9826
• Twitter: @Abdelrahman Mohamed
• LinkedIn: Abdelruhman Mihamed

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgements

• Microverse
• Jest
• etc

📝 License

This project is MIT licensed.