Creating an E-commerce Site with MERN Stack — Part I

A Step-by-Step MERN Stack Tutorial

Introduction

MERN stack is a popular web development technology stack used for building scalable and efficient web applications. It consists of four key technologies: MongoDB, Express.js, React, and Node.js.

• Mongo DB is a document-based database, which means that data is stored in flexible JSON-like documents instead of tables with rows and columns. (https://www.mongodb.com/)
• Express.js is a flexible and lightweight backend web application framework built on top of Node.js (https://expressjs.com/)
• React.js is a powerful frontend JavaScript library for building user interfaces also React’s reusable components make it easier to develop complex user interfaces and enable faster rendering of dynamic content. (https://legacy.reactjs.org/)
• Node.js is a JavaScript runtime that allows us to run JavaScript on the server-side. (https://nodejs.org/en)

E-commerce has become an integral part of our lives, and building an e-commerce website requires expertise in web development.

Together, these four technologies provide a comprehensive and powerful solution for building a modern e-commerce website. MERN stack allows developers to build highly responsive, efficient, and dynamic applications using a single programming language (JavaScript) and a consistent set of technologies.

Benefits of using MERN Stack for e-commerce

The MERN stack provides a comprehensive and cohesive solution for building modern web applications. It allows developers to use a single programming language, JavaScript, for both the frontend and backend of an application. This makes it easier to build and maintain complex web applications, as developers do not need to switch between different programming languages and tools. Additionally, the MERN stack provides a set of powerful and flexible technologies that can be used to build highly responsive and scalable applications.

Setting up the environments

Step 1: Installing Node.js and React

To get started with building, first, we need to install Node.js (if we have not already installed it) and React. For the installation, we use the Node Package Manager (npm) by running the following commands:

npm install -g node
npx create-react-app <your-app-name>

The first command installs Node.js globally on our system. The second command creates a new React project.

Step 2: Setting up the Server-Side Application (Backend)

First, create a folder for the backend part, and inside the folder, we can easily create an npm project using the following command:

npm init -y

After we ran the command in our backend folder, it already created the package.json file:

The project name will be different, it depends on how you named your folder.

Here, we can change the project name, decide on a specific version, and add a project description. Initially, our main file is called index.js. So, go to the project folder and create an empty index.js file. After we initialize the package.json file, we can easily install different packages for the project.

The first package we need to install is Express.js. Express is a popular Node.js framework for building server-side applications. Run the following command inside the backend folder:

npm install --save express

This command installs the Express package and saves it as a dependency in our project’s package.json file.

Index.js

Add the following code to the index.js file:

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

This code sets up a simple Express server that listens on port 5000 and responds with “Hello World!” when we access the root URL. Go to your browser and check it yourself (http://localhost:5000/).

Step 3: Installing MongoDB and Mongoose

Finally, we need to install MongoDB and Mongoose to connect to the database. You can download it from the official site ( https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows/) and install it. MongoDB Compass helps us manage our databases. Mongoose is an Object-Document Mapping (ODM) library for MongoDB that provides a schema-based solution to model our data.

npm install --save mongoose

This command installs the Mongoose packages and saves them as dependencies in our project’s package.json file

Conclusion

To sum up, this article has demonstrated the process of setting up an environment for building an e-commerce website with the MERN Stack. After following the steps, the necessary folders for the frontend and backend parts are created, and we have successfully installed Node.js, React, Express, MongoDB, and Mongoose. With this foundation in place, we are now equipped to begin building our e-commerce website. I hope that these instructions have been helpful in getting your project started, and I encourage you to check out part II of this series, where we dive into the actual building process.