Product Review Platform using MERN

In this article, we'll walk through creating a Product Review Platform using the MERN stack (MongoDB, Express.js, React, and Node). By the end of this guide, you'll have a functional application where users can add products, leave reviews, and delete products.

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

Prerequisites:

• React JS
• MongoDB
• Express
• Node JS
• MERN Stack

Approach to create Product Review Platform:

• State and Components:
  • Uses useState for products and newProduct.
  • Renders product cards, reviews, and forms.
• API Interaction:
  • Fetches products on mount.
  • Utilizes Axios for CRUD operations.
• Product Operations:
  • Adds new products.
  • Deletes products.
  • Submits and displays reviews.
• User Interface:
  • Forms for input.
  • Dynamically updates UI.

Steps to Create the Frontend:

Step 1: Set up React frontend using the command.

npx create-react-app client

Step 2: Navigate to the project folder using the command.

cd client

Step 3: Install axios

npm i axios

Project Structure:

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

"dependencies": {
 "axios": "^1.5.1",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Below is the client code.

Step to Run Your React App

npm start

Your React app should now be running at http://localhost:3000. It displays a form for adding new products and a list of existing products with their reviews.

Steps to Create the Backend:

Step 1: Create a directory for project

npm init backend

Step 2: Open project using the command

cd backend

Step 3: Installing the required packages

npm install express mongoose cors body-parser

Project Structure:

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

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.0",
}

Example: Create a new file `server.js` and write the provided Nodejs code.

Steps to run the server:

node server.js 

Output: Your server should now be running at http://localhost:5000

Output: Data saved in Database