Kumar Shubham

Posted on Jan 23, 2021 • Edited on Feb 22, 2021 • Originally published at shubhamstudent5.Medium

Build an E-Commerce website with MERN Stack - Part 1 (Setting Up the Project)

#react #node #mongodb #webdev

Hello friends! So, I am starting a new article series based on MERN stack and this article is the first part of that series. This series will be completely focused on MERN stack (MongoDB, Express, React and Node). Previously, I have made two series which were a social media website and job search website but both of them were built on Django framework and we used Django templating engine to create the frontend for our applications at that time.

But, now we are using Full Stack JavaScript to design and develop our applications. This means we would be using Node, Express and MongoDB to design the REST APIs and then we would use those APIs in our React frontend. So, it would be very beneficial since it would teach you the concepts of REST API and will help you to integrate these frameworks.

Notice: I will publish the complete detailed version of all the articles on the Medium website. Here I will give an overview and give the codes for the various pages part by part. It would be a 6-7 part series.
So, please click here to go to Medium and read it in completion. (These are friend links so do not worry about paywall)

So, in this first part, we would talk about the basics of the project and also set the project up.

So, basically, it would be a simple E-Commerce website. It would not have all the bells and whistles of a complete modern E-Commerce website since this is aimed at learning and understanding how everything actually works. We can surely add features on top of this project to make it better. We would keep our design simple and minimal on Frontend side. We would not be dealing with CSS much as our focus would be on understanding how we deal with APIs on the frontend and will focus on the basics part.

We would use React Bootstrap to design our React Frontend minimally. We aim to make a working e-commerce website where everything functions correctly.

So, the features we would be having in the application that we would be building are:-

Authentication using JSON Web Tokens (JWT).
Option to add, edit, view and delete all the items in our store.
Option to add items or remove items from the cart.
Display the total bill of the cart and update it as soon as the cart is updated by the user.
Using Local Storage to store the JWT so that we only allow logged-in users to buy items.
Option to pay and checkout thus creating order and emptying the cart.

So, these are the basic features we would be having in our application. Now, let's get familiar with the tech stack we are going to use for building this application.

Frontend - In the frontend side, we would be using React as the frontend library. We would use Redux for state management. We would use React Bootstrap library for basic designing of the interface.

Backend - For the backend side, we would be using the Express library on top of Nodejs. We would use MongoDB as the NoSQL database to store our data as documents in JSON format. We would use mongoose to connect to our MongoDB database.

We would create REST APIs with Express and use these endpoints in the React frontend to interact with our backend part.

So, we now have an overview of what we are going to build, so we would now like to start building the project.

package.json

{
  "name": "e-commerce",
  "version": "1.0.0",
  "description": "An e-commerce app",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
  },
  "author": "Shubham",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.0.0",
    "concurrently": "^5.3.0",
    "config": "^3.3.3",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.11.11",
    "validator": "^13.5.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

server.js

const express = require('express');
const mongoose = require('mongoose');
const path = require('path');
const config = require('config');

const app = express();
app.use(express.json());

// used in production to serve client files
if(process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));
    app.get('*', (req, res) => {
      res.sendFile(path.resolve(__dirname,'client','build','index.html'));
    });
}

// connecting to mongoDB and then running server on port 4000
const dbURI = config.get('dbURI');
const port = process.env.PORT || 4000;
mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex:true })
  .then((result) => app.listen(port))
  .catch((err) => console.log(err));

config/default.json

{
"dbURI": "YOUR_DATABASE_URI"
}

We have covered these two files in our first part. To read the complete tutorial, please move to Medium and read the complete article.

Hope you all enjoyed the first part. Stay tuned for the upcoming parts.

Top comments (10)

Edimilson Blanes Coutinho • Jan 28 '21 • Edited

Thanks @Kumar Shubham for your contribution ! I´m having problems when running server.js, follow the lines:

[nodemon] 2.0.7
[0] [nodemon] to restart at any time, enter rs
[0] [nodemon] watching path(s): .
[0] [nodemon] watching extensions: js,mjs,json
[0] [nodemon] starting node server.js
[0] C:\Curso_ECommerce\node_modules\config\lib\config.js:812
[0] throw new Error("Cannot parse config file: '" + fullFilename + "': " + e3);
[0] ^
[0]
[0] Error: Cannot parse config file: 'C:\Curso_ECommerce\config\default.json': SyntaxError: Unexpected token } in JSON at position 50

Any sugestions ?

Kumar Shubham • Jan 29 '21 • Edited

I think your json file would have some trailing commas.
Sorry, I have put that comma in the config file because I will be adding more in that part like jwt swecret code and stripe api key.

Corrected it in this tutorial now.

You can look here for possible solutions:
stackoverflow.com/questions/549262...

Edimilson Blanes Coutinho • Jan 29 '21

Reading the error more carefully, it is due to a key not yet specified: StripeAPIKey. I believe it will be defined in future articles.

Thanks Kumar!

Kumar Shubham • Jan 29 '21

Yes, the StripeAPIKey will be defined in the 4th tutorial when we will build the cart and orders API and handle payment via Stripe Checkout.
Thanks for reading! Hope you liked it!

LC • Jan 29 '21 • Edited

this would have been such a great tutorial article, but unfortunately you fell prey almost every other tutorial where you present only a portion of the material and then forget the rest. where the hell is the client portion.

this article should have been titled "how to create a node express back-end" or better yet, you should have had your coffee and then skipped the exercise altogether, you would have done us a great favor by not enticing us with something you were not going to complete.

where are the mongo urls samples, where are the config samples, and where is the client code

what a shame....

Kumar Shubham • Jan 29 '21

I have not forgotten the rest. I will complete each and every part including the client portion and config file. It is planned to be a 6-7 part series. I have only published 3 parts till now. More parts will come in coming days. It would be complete.

So, please wait for the parts to come. I hope you enjoy the articles.

d • Jan 23 '21

Thanks, I will be building along with you. I'm currently learning MERN stack

Kumar Shubham • Jan 23 '21 • Edited

I am glad you like this series. I am also learning MERN Stack!

The second part is published now which covers the MongoDB models using Mongoose.

The complete articles I am writing are on Medium so please do go there for the complete detailed articles for the whole series. If you like the articles, please do clap for them on Medium. It would be nice!