Food Delivery Application using MERN Stack

In the fast world where there is no time for people to cook food or go to restaurants to eat, Food Delivery applications are one of the best options for them. In this tutorial, you will learn how to create a simple food delivery app using MERN stack. Our 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

👁 Screenshot-2567-01-28-at-083224-(2)

Prerequisites:

• ReactJS
• ExpressJS and NodeJs
• Context API, Prop drilling and Functional components
• JavaScript
• MERN Stack

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 Application:

Step 1: creating the folder for the project

mkdir food-delivery-app
cd food-delivery-app

Step 2: Create a backend using the following commands

mkdir backend
cd backend
npm init -y

Step 3: Install the required dependencies.

npm i cors express mongoose nodemon

Project Structure(Backend):

Backend Dependencies:

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

Example: Create server.js file and add the following code.

Step 4: To start the backend run the following command.

nodemon server.js

Step 5: Go to the root directory of the application and create the frontend application.

npx create-react-app client
cd client

Step 6: Install important dependencies: axios

npm i axios

Project Structure(Frontend):

Frontend dependencies:

 "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-router-dom": "^6.21.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Create the required files and add the following code.

Step 7: To start the frontend run the following command.

npm start

Output: