The Meal DB web application displays a list of meals that provided by an external API.

Overview

The Meal DB

The Meal DB web application displays a list of meals that provided by an external API. The users can like a meal, leave some comments or make a reservation, in these cases an involvement API will be used.

N.B. The reservation functions are not implemented because we were two.

Project requirements

Please find project requirements here.

Screenshot

Screenshot from 2022-03-10 21-58-21

Screenshot from 2022-03-10 22-00-05

Screenshot from 2022-03-11 10-57-28

Project presentation

Please take a look at the video below

Presentation.mp4

How it works

The Meal DB web application allows users to like, comment, and make a reservation for their favorite meal.

  • By clicking on like button the number of like is increased and stored in the involvement API;
  • By clicking on the Comment button to display the description of the selected meal, the list of all comments, and added a new comment;
  • By clicking on the Reservation button to display the list of all reservations and make a new Reservation;

Live Demo

Click here to see the live demo.

Getting started

To get a local copy up and running follow these simple example steps:

Prerequisites

  • A device that support running browser applications.
  • access to internet connection.

Setup

View pages from the browser

  • If you just want to check the webpage/webapp, you have it available on the live demo link.

Install locally the code of the application

In order to install a local version of this project and please do the following steps:

  • Install the latest version of any code editor.
  • install the latest version of GIT.
  • open your terminal
  • Go to the repository and clone it with `git clone [email protected]:Behnam1369/Capstone2.git' .
  • open the repository cloned with cd Capstone2
  • if your code editor is VsCode type code .
  • Install webpack with: npm install --save-dev webpack webpack-cli
  • To run it type nmp run start or run live server from the docs directory
  • To test it npm run test
  • and enjoy!

Technologies Used

  • CSS
  • HTML
  • JAVASCRIPT
  • Webpack
  • GitHub
  • VsCode
  • nodejs
  • GIT

Authors

👤 Hemerson Foreste

👤 Behnam Aghaali

Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Please give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to anyone contributed one way or the other.
  • Inspiration
  • etc

License

This project is MIT licensed

Comments
  • Peer to Peer code review

    Peer to Peer code review

    Highlights

    You guys have done a great job on this project👏. the presentation is slick and the code clean

    Optional

    • there seems to be a bug when the details modal is displayed the background cards jump from 5 columns to 6 (screen width 2048px)
    opened by JuanLPalacios 0
  • Meal DB web Application

    Meal DB web Application

    The Meal DB web application it's been developed by my coding partner @Behnam1369 and @ForHemer . It displays a list of meals provided by an external API. The users can like a meal, leave some comments or make a reservation, in these cases an involvement API will be used.

    N.B. The reservation functions are not implemented because we were two.

    opened by ForHemer 0
  • [0.5pt] Find external API - group task

    [0.5pt] Find external API - group task

    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.
    opened by Behnam1369 0
  • [4pt]  - Display list of items on the Homepage - Student A

    [4pt] - Display list of items on the Homepage - Student A

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

    Screenshot 2021-06-27 at 21 50 23

    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.

    opened by Behnam1369 0
  • [4pt]  -Display Comments pop up with selected item's details - Student B

    [4pt] -Display Comments pop up with selected item's details - Student B

    Create a comments popup only with the top section (displaying details of the selected item)

    Screenshot 2021-06-27 at 22 10 45

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

    opened by Behnam1369 0
  • [4pt]  - Display Reservations pop up with selected item's details - Student C

    [4pt] - Display Reservations pop up with selected item's details - Student C

    Create a reservations popup only with the top section (displaying details of the selected item)

    Screenshot 2021-06-27 at 22 10 45

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

    opened by Behnam1369 0
  • [4pt]  - Display number of likes for each item on the Homepage - Student A

    [4pt] - Display number of likes for each item on the Homepage - Student A

    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.

    opened by Behnam1369 0
  • [3pt]  - Display comments for a given item on the Comments pop-up - Student B

    [3pt] - Display comments for a given item on the Comments pop-up - Student B

    When the popup loads, the webapp retrieves data from the Involvement API to show the item comments.

    Screenshot 2021-06-27 at 22 21 00

    This task does not include the counter of the comments.

    opened by Behnam1369 0
  • [3pt]  - Display reservations for a given item on the Reservations pop-up - Student C

    [3pt] - Display reservations for a given item on the Reservations pop-up - Student C

    When the popup loads, the webapp retrieves data from the Involvement API to show the item's reservations.

    Screenshot 2021-06-27 at 22 21 48

    This task does not include the counter of the reservations.

    opened by Behnam1369 0
Owner
Behnam Aghaali
Full-stack web developer. I have studied accounting and tend to develop web applications in finance, accounting, management, etc. Open to new opportunities.
Behnam Aghaali
An App that uses an external APIs to show meals from around the world

This website displays recipes meals using APIs to retrieve details from a DataBase and also implements features like adding a functional Like button for every item and a section for adding a new comment. All these through an external API to send and receive data.

Fernando Salas 4 Mar 12, 2022
Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals.

Tasty Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals. Requirements Build a

Manel Hammouche 5 Aug 3, 2022
Backend API of Meal Monkey Shopping Application.

Meal Monkey Backend API An API developed using Node.js and Express.js for the Meal Monkey Web Application. Features Admin Restricted : Add products in

Chetan Thakral 6 Sep 19, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.

To-do-list "To-do-list" is a simple web application that displays a list of task and allows you to add and remove task from that list. Built With HTML

Aniekan udo 10 Nov 21, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list

This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology including but not limited to HTML, CSS, JavaScript and webpack to manipulate DOM.

Jerry Owusu 2 Feb 19, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Kyrillos Hany 9 Mar 11, 2022
This App is about British Food where you find a list of meals that you can like and comment.

British Classic Meals The British Classic Meals is a seclection of the most favorite and famous british recipes. Things you can do in this website: ch

Tiago Lelinski Marin 5 Aug 20, 2022
Kyrillos Hany 14 Aug 10, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Jihane Haddad 5 Feb 10, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external API.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

null 5 Mar 5, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Regiss Mukubiza 2 Apr 8, 2022
This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Built with Webpack and ES6

Leaderboard This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the

Sanja Mandic 9 Sep 30, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard- DESCRIPTION The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is

Andres Garzon 2 Jun 16, 2022
A leaderboard website which displays scores submitted by different players. It also allows you to submit your score. All data is preserved in the external game API.

Leaderboard LeaderBoard Built With HTML JavaScript CSS webpack Getting Started clone this repository. $ cd Leaderboard. $ npm run build . $ npm start

ahmednazirmusah 3 Oct 13, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Built with Html, CSS and JavaScript

Leaderboard App ?? Table of Contents ?? About the Project ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started Setup Prerequisites In

Tetteh Kodjo-Sarso 4 Mar 21, 2023
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard ?? Table of Contents ?? About the Project ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started Setup Prerequisites Instal

Ritika Rawat 4 Mar 20, 2023
This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Karla Delgado 12 Aug 29, 2022