Restaurant App using MERN Stack

Creating a Restaurant app will cover a lot of features of the MERN stack. In this tutorial, we'll guide you through the process of creating a restaurant application using the MERN stack. The application will allow users to browse through a list of restaurants, view their menus, and add items to a shopping cart.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites:

• React JS
• Express JS and Node JS
• Context API, Prop drilling and Functional components
• MERN Stack
• Npm

Approach to create Restaurant App using MERN:

1. Import Statements:

• Import necessary dependencies and components.
• React is imported for defining React components.
• RestaurantList, RestaurantCard, DishesMenu, DishCard and Cart are custom components, assumed to be present in the ./components directory.
• RestaurantContext is imported, presumably a custom context provider.

2.Functional Component:

• Define a functional component named App.

3.Context Provider:

• Wrap the App component inside the RestaurantContext provider. This suggests that the components within this provider have access to the context provided by RestaurantContext.

4.Component Rendering:

Render the following components:

• RestaurantContext: Presumably, this is a context provider that wraps its child components (App). The purpose of this context is not clear from the provided code snippet.
• All other components such as RestaurantList and DishesMenu is wrapped inside App component so it also has the access of RestaurantContext.
• RestaurantList wraps RestaurantCard

Steps to create the Project

Step 1: creating a project folder.

mkdir restaurant-app
cd restaurant-app

Step 2:Backend Setup

Create folder within restaurant-app folder i.e. server

mkdir server 
cd server

Step 3: Initialize the Express project and install the required dependencies.

npm init -y
npm i express cors mongoose

Folder Structure(Backend):

The updated dependencies in package.json file of backend will look like:

"dependencies": {
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.4",
 "nodemon": "^3.0.2"
}

Example: Now write the codes in the respective files.

Step 4: Initialize the frontend app and install required dependencies.

npx create-react-app client
cd client
npm i axios

Project Structure (Frontend):

The updated dependencies in package.json file of frontend will look like:

 "dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.6.5",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-query": "^3.39.3",
 "react-router-dom": "^6.21.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Create the respective folders and files according to the folder strure give and add the following codes.

Step to Run the code by typing the following command

• Start the backend:

node server.js

• Start the frontend:

npm start

Output: