A

MINI PROJECT REPORT

on
E-COMMERCE WEBSITE USING MERN STACK
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
Submitted by
(MIP-01)
Student Name : 187Y1A05D4

Under the Guidance

of

Mr.
Assistant Professor

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

MARRI LAXMAN REDDY
INSTITUTE OF TECHNOLOGY AND MANAGEMENT
(AUTONOMOUS)

(Affiliated to JNTU-H, Approved by AICTE New Delhi and Accredited by NBA & NAAC With ‘A’ Grade)

April 2021

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM i

 CERTIFICATE

This is to certify that the project report titled “E-Commerce Website Using MERN Stack” is

being submitted by Ravula Gowtham Reddy (187Y1A05D4) in IV B.Tech II Semester

Computer Science & Engineering is a record bonafide work carried out by him. The

results embodied in this report have not been submitted to any other University for the

award of any degree.

Internal Guide HOD

Principal External Examiner

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM ii

 DECLARATION

I hereby declare that the Major Project Report entitled, “E-Commerce Website Using

MERN Stack” submitted for the B.Tech degree is entirely my work and all ideas and

references have been duly acknowledged. It does not contain any work for the award of

any other degree.

Date:

Ravula Gowtham Reddy

(187Y1A05D4)

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM iii

 ACKNOWLEDGEMENT

I am happy to express my deep sense of gratitude to the principal of the college Dr. K.
Venkateswara Reddy, Professor, Department of Computer Science and Engineering,
Marri Laxman Reddy Institute of Technology & Management, for having provided me
with adequate facilities to pursue my project.

I would like to thank Mr. Abdul Basith Khateeb, Assoc. Professor and Head, Department
of Computer Science and Engineering, Marri Laxman Reddy Institute of Technology &
Management, for having provided the freedom to use all the facilities available in the
department, especially the laboratories and the library.

I am very grateful to my project guide Mr. Prasad Banoth, Assoc. Prof., Department of
Computer Science and Engineering, Marri Laxman Reddy Institute of Technology &
Management, for his extensive patience and guidance throughout my project work.

I sincerely thank my seniors and all the teaching and non-teaching staff of the Department
of Computer Science for their timely suggestions, healthy criticism and motivation during
the course of this work.

I would also like to thank my classmates for always being there whenever I needed help or
moral support. With great respect and obedience, I thank my parents and brother who were
the backbone behind my deeds.

Finally, I express my immense gratitude with pleasure to the other individuals who have
either directly or indirectly contributed to my need at right time for the development and
success of this work.

CONTENTS

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM iv

S NO. TITLE PAGE NO.
ABSTRACT Vi
LIST OF FIGURES Vii
LIST OF TABLES Viii
SYMBOLS & ABBREVIATIONS IX

1 INTRODUCTION 1

2 E-COMMERCE 8
2.1 Definition 8
2.2 Types 10
2.3 Advantages 11
2.4 Challenges 11

3 MERN Stack 13
3.1 JavaScript 13
3.2 NodeJS 13
3.3 Express.js 19
3.4 MangoDB 20
3.5 ReactJS 21
3.5.1 Virtual-DOM
3.5.2 Component
3.5.3 Props and State
3.5.4 Pros and Cons of RactJS
3.6 MERN Stack in Website Development
3.6.1 Concept of Stack technology

3.6.2 Concept of MERN Stack

3.6.3 Highlights in MERN Stack

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM v

 4 E-commerce Web Application 33
4.1 Home Page

4.2 Login System

4.2.1 Sign Up

4.2.2 Sign In

4.3 Dashboard

4.3.1 Admin Dashboard

4.3.2 User Dashboard

4.4 Shop Page

4.5 Cart Page

4.5.1 Cart CRUD

4.5.2 Payment Gateway

7 CONCLUSION AND FUTURE ENHANCEMENTS 43

8 REFERENCES 44
APPENDIX A 45
APPENDIX B 51
APPENDIX C 54

ABSTRACT

In today's generation, most people are using technology for leading their lives and fulfilling their daily

needs. In this generation most of us using E-commerce websites for shopping for clothes, groceries,

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM vi

and electronics . We have developed one E-commerce web application by using MERN stack

technology as it contains MongoDB, Express.JS framework, React.JS library, Node.JS platform. This

application is fully functional with different views for user and admin and it also has integrated with

payment gateway for checkout. By using this website we can buy different types of t-shirts and we

can choose different styles of t-shirts based upon customer interests. In this project, we can add

different products and can delete them also. We have developed administrative functions for the

website such as create a product, create categories, Admin dashboard, Manage products, Manage

categories. For customers, they can quickly add their items to the cart. Based on the items in the cart

then the bill gets generate and the customer can pay by using stripe .

LIST OF FIGURES

FIG. NO FIG. NAME PAGE NO.

1.1 Internet Of Things 4
1.2 Wireless Sensor Network (WSN) 5

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM vii

 3.1 Arduino Atmega 328(UNO) 15
3.2 Arduino Ethernet Shield 16
3.3 ML8511 UV Sensor 16
3.4 DHT11 Temperature and Humidity Sensor 17
3.5 MQ3 Gas Sensor 17
3.6 Water Level Sensor 18
3.7 5V Solar Panel 18
3.8 Rechargeable Li Ion Battery 19
3.9 Architecture Of The Setup 19
3.10 Flow Chart Of The System 20
4.1 Essential Use Case Diagram 24
4.2 Class Diagram 25
4.3 Sequence Diagram 26
4.4 Activity Diagram 27

4.5 Collaboration Diagram 27

Smart Farm Using Renewable Energy Resources Circuit
4.6 Diagram 34

5.1 Block Diagram 33

5.2 Arduino Microcontroller 34

LIST OF TABLES

TABLE NO. TABLE TITLE PAGE NO.

3.1 Software Requirements 14

3.2 Hardware Requirements 14
MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM viii
 5.1 Summary 35
6.1 Above prescribed (favorable) levels 41
6.2 Below Threshold Level Use Case 42

SYMBOLS & ABBREVIATIONS

DOM : Document Object Model

ISO : International Organization for Standardization

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM ix

 NPM : Node Package Manager

API : Application Program Interface

HTM : Hypertext Markup Language

L

HTTP : Hypertext Transfer Protocol

URL : Uniform Resource Locator

JSON : JavaScript Object Notation

JS : JavaScript

JSX : JavaScript XML

XML : Extensive Markup Language

MINI PROJECT REPORT (2018-2022 Batch) Dept. of CSE, MLRITM x