Restaurant Recommendation using MERN

This article is about Restaurant Recommendations using the MERN (MongoDB, Express.js, React.js, Node.js) stack. This project displays a list of restaurants to the users. Users can apply filters like location, cuisines, and ratings based on filters applied by the user, the user gets recommended specific restaurants.

Output Preview:

Prerequisites:

• JavaScript
• ReactJs
• Mongodb
• Expressjs
• Nodejs

Functionalities of Restaurant Recommendation

• Get All Restaurants data: Initially user can see all the list of restaurants which present in the database.
• Location: User can select a location from the location dropdown.Based on the location selected by the user , list of restaurants gets changed. User can only the restaurants that contains the location selected by the user.
• Cuisines: User can select a cuisine from the Cuisines dropdown.Based on the selected cuisines the list gets updated.
• Rating: User can select a rating such as above 3 and above 4. If user selects above 3 then user gets list of restaurants above 3 rating and same goes for above 4.

Approach:

• In Frontend, We have used two components Navbar which contains the name of the title and Card component which contains the UI of the restaurant details.I have used custom hook useRestaurantContext which contains the details of the filters selected by the users.
• In Backend, i have created one api route /api/restaurants which gets all the restaurants data from the database and if we pass locatin, rating and cuisines data in the request body then it gets the data from the database based on filters.

Frontend

In Frontend, i have used two components Navbar which contains the name of the title and Card component which contains the UI of the restaurant details.I have used custom hook useRestaurantContext which contains the details of the filters selected by the users.

Steps to Setup the Frontend Project

Step 1: Create a reactJS application by using this command

npx create-react-app myapp

Step 2: Navigate to project directory

cd myapp

Step 3: Install the necessary packages/libraries in your project using the following commands.

npm i axios react-bootstrap

Project Structure:

The updated dependencies in package.json file 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.5.1",
 "bootstrap": "^5.3.2",
 "react": "^18.2.0",
 "react-bootstrap": "^2.9.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
 }

Explanation

• App.js : This is the main file which contains the Navabar component ,filters like location,rating,cuisines and CardItem component which contains the information of each restaurant in card format.
• NavBar.js : This file contain the navbar which has the name of the project.
• CardItem : This file contains the code to fetch the restaurant data from the backend based on the filters selected by the user and present the each restaurant details to the user in card format.
• useContext.js : This file contains the context api code where the filters like location,rating and cuisines are accessed as global state.
• useRestaurant.js : This file contains the code for the custom hook which is used to access the state of location,rating,cuisines at any component in the project.

Example: Implementation to design the frontend part of the Restaurant Recommendation.

Step to Run Application: Run the application using the following command from the root directory of the project

npm start

Output: Your project will be shown in the URL http://localhost:3000/

Backend

In Backend, i have created one api route /api/restaurants which gets all the restaurants data from the database and if we pass locatin, rating and cuisines data in the request body then it gets the data from the database based on filters.

Steps to Setup the Backend of Application

Step 1: Create seperate directories for frontend and backend

mkdir backend

Step 2: Navigate to the backend directory using the command

cd backend

Step 3: Initialize Node Package Manager using the command.

npm init -y

Step 5: Install express, cors, body-parser, dotenv, mongoose packages using following command.

npm i express cores body-parser mongoose dotenv

Note: In backend create a file named .env and add variable

PORT = 4000 and MONGO_URL = specifiy your mongodb url connection.

Project Structure:

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

"dependencies": {
 "bcrypt":"^5.1.1"
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.0",
 "nodemon": "^3.0.1",
 }

Explanation

• index.js : This file contains the main code which involves connecting to mongodb database and calling apis.
• Restaurant.model.js : This file contains the schema design of restaurant model.
• restaurant.route.js : This file contains the code for the api route to fetch the data from the database based on filters applied by the user.
• restaurant.controller.js : This file contains the code for the api route to fetch the data from the database.

Example: Implementation to design the backend part of Restaurant Recommendation.

Step to Run Application: Run the application using the following command from the root directory of the project

npm start

Output: