Bookstore Ecommerce App using MERN Stack

Bookstore E-commerce project is a great way to showcase your understanding of full-stack development. In this article, we'll walk through the step-by-step process of creating a Bookstore E-commerce using the MERN (MongoDB, Express.js, React, Node.js) stack. This project will showcase how to set up a full-stack web application where users can view, filter, and purchase various books.

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

Prerequisites:

• React JS and topics like Context Api.
• MongoDB and Mongoose
• Express
• Node JS
• MERN Stack

Approach to create Bookstore Ecommerce:

• List all the requirement for the project and make the flowand structure of the project accordingly.
• Chooses the required dependencies and requirement which are more suitable for the project.
• ProductList and Header are custom components, assumed to be present in the ./components directory.
• CustomItemContext is imported, presumably a custom context provider.
• Define a functional component named App.
• Wrap the Header and ProductList components inside the CustomItemContext provider. This suggests that the components within this provider have access to the context provided by CustomItemContext.
• CustomItemContext: Presumably, this is a context provider that wraps its child components (Header and ProductList). The purpose of this context is not clear from the provided code snippet.

Steps to Create the Backend:

Step 1: Create a directory for project

mkdir server
cd server

Step 2: Initialized the Express app and installing the required packages

npm init -y
npm i express mongoose cors

Project Structure:

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

"dependencies": {
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.0",
}

Example: Create `server.js` and write the below code.

Start the backend server with the following command:

node server.js

Steps to Create the Frontend:

Step 1: Set up React frontend using the command.

npx create-react-app client
cd client

Step 2: Install the required dependencies.

npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

Project Structure:

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

"dependencies": {
 "@fortawesome/free-solid-svg-icons": "^6.5.1",
 "@fortawesome/react-fontawesome": "^0.2.0",
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

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

To start frontend code:

npm start

Output: