ONLINE LAPTOP STORE

Project report submitted in partial fulfillment of the requirement for the degree
of

Bachelor of Technology
In
Computer Science Engineering
By

VANLALRINCHHANA (BT20CS008)

UNDER SUPERVISION OF

Dr.C.LALENGMAWIA

DEPARTMENT OF COMPUTER SCIENCE

ENGINEERING

NATIONAL INSTITUTE OF TECHNOLOGY, MIZORAM

2024
1
 PROJECT APPROVAL FORM

I hereby recommended that the project Ecommerce Shopping Website

prepared under my supervision by Vanlalrinchhana (BT20CS008) be
accepted in fulfillment of the requirement for the degree of Bachelor of
Engineering in Computer Science & Engineering.

Supervisor:

_______________
Date:
_______________

Head of Department:

_________________
Date:
_________________

Date:_____________

Place:____________

ii
 DECLARATION

I,VANLALRINCHHANA,solemnly declared that the project report titled

‘Online Laptop Store’ submitted to Dr.C Lalengmawia as a part of my
academic requirement is an original work conducted by me.I affirm that all
the content presented in report is authentic, and any external sources
used for reference are duly cited.I take full responsibility for the accuracy
and integrity of the information presented of the information presented
herein.Futhermore,I declare that this project report has not been submitted
for evaluation in any other course and or institution.

----------------------------
(Signature)
VANLALRINCHHANA Dr.C.Lalengmawia
BT20CS008 Supervisor

Date: --/--/----

iii
iii
 CERTIFICATE

It is certified that the work contained in report title ‘Online Laptop Store’
submitted by VANLALRINCHHANA, BT20CS008 for the award of
B.Tech is absolutely based on his/her own work carried out under my/our
supervision and that this work/thesis reported herein has not been
submitted elsewhere for any degree/diploma by any other candidate.

Sign: ……………………… Sign: ………………………

Head of Department: Supervisor:

Dr. Sandeep Kumar Dash Dr. C.Lalengmawia
Computer science and Engineering Computer science and Engineering
NIT Mizoram NIT Mizoram

Date: --/--/----

iv
 ACKNOWLEDGEMENT

I would like to express my sincere gratitude to Dr. C. Lalengmawia, my

esteemed supervisor, for his invaluable guidance, support, and
mentorship throughout the duration of this project. Dr. Lalengmawia's
expertise and encouragement have been instrumental in shaping this
endeavor into a successful one.
I am deeply thankful for Dr. Lalengmawia 's insightful feedback,
constructive criticism, and unwavering dedication, which have
significantly enriched the quality of this project report. His constant
encouragement and belief in my abilities have motivated me to strive for
excellence and overcome challenges encountered along the way.
Furthermore, I would like to extend my appreciation to all the faculty
members and staff who have contributed their expertise and assistance
during the course of this project.
Last but not least, I am grateful to my family and friends for their
unwavering support, understanding, and encouragement throughout this
journey. Thank you all for your invaluable contributions to this project.

Vanlalrinchhana
(BT20CS008)

v
 Abstract

In today's era, technology plays a crucial role in our daily lives, with
many relying on e-commerce platforms for various needs like shopping
for clothes,groceries, and electronics. Our team has crafted an
e-commerce web application using MERN stack technology, which
comprises MongoDB, Express.JS, React.JS, and Node.JS. This
application boasts a seamless user experience, offering distinct
interfaces for both users and administrators. Moreover, it's equipped with
a secure payment gateway for hassle-free checkouts. With our platform,
users can browse and purchase a wide array of laptops, selecting from
diverse styles to suit their preferences. The project encompasses
administrative functionalities including product and category
management, an admin dashboard, and seamless cart management for
customers. Transactions are facilitated through Razorpay for a smooth
and secure payment process.

vi
 List Of Contents
Project Title--------------------------------------------------------------------------------------------------------- i
Certificate of Approval----------------------------------------------------------------------------------------- ii
Declaration-------------------------------------------------------------------------------------------------------- iii
Certificate----------------------------------------------------------------------------------------------------------iv
Acknowledgement-----------------------------------------------------------------------------------------------v
Abstract------------------------------------------------------------------------------------------------------------ vi
List of Figures---------------------------------------------------------------------------------------------------vii
1.Introduction----------------------------------------------------------------------------------------------------- 1
1.1 Introduction----------------------------------------------------------------------------------------------- 1
1.2 Problem Statement------------------------------------------------------------------------------------- 1
1.3 Objective---------------------------------------------------------------------------------------------------2
2. Literature Review---------------------------------------------------------------------------------------------3
2.1 Evolution of Social Media Technology------------------------------------------------------------- 3
2.2 Comparison of Web Development Tech Stacks------------------------------------------------- 3
2.3 Understanding the MERN Stack---------------------------------------------------------------------3
2.4 MERN Stack Implementation in E-commerce App--------------------------------------------- 3
2.5 Practical Application of the MERN Stack----------------------------------------------------------4
2.6 Addressing Privacy and Security Concerns in Ecommerce app---------------------------- 4
3 System Development---------------------------------------------------------------------------------------- 5
3.1Design Overview of Fullstack Responsive Ecommerce App----------------------------------5
Backend Design----------------------------------------------------------------------------------------- 5
Frontend Design----------------------------------------------------------------------------------------- 5
User Authentication------------------------------------------------------------------------------------- 5
Payment--------------------------------------------------------------------------------------------------- 5
3.2 Technologies Used-------------------------------------------------------------------------------------- 6
Languages------------------------------------------------------------------------------------------------ 6
Package Manager--------------------------------------------------------------------------------------- 6
Frameworks-----------------------------------------------------------------------------------------------6
Libraries----------------------------------------------------------------------------------------------------7
MongoDB-------------------------------------------------------------------------------------------------- 9
VS Code--------------------------------------------------------------------------------------------------- 9
Google Chrome------------------------------------------------------------------------------------------ 9
4. Snapshot of Laptop Store------------------------------------------------------------------------------- 10
5. Conclusion----------------------------------------------------------------------------------------------------19
6. Future Scope------------------------------------------------------------------------------------------------- 19
7. References---------------------------------------------------------------------------------------------------- 20

vii
vii
 List of Figures
Sl no. Figure Name Pg no.

1 HomePage 9
2 Sign in 9
3 Registration 10

4 Product Card 10

6 Cart Page 10

7 Payment Method 11

8 Shipping page 11

9 Place Orders 12

10 Order Details 12

12 Payment Gateway 13

13 Admin Login 13

14 Admin Dashboard 14

15 Product List 15

16 Create Product 15

17 Order list (1) 16

18 Order List (2) 16

19 User List 17

20 Admin Profile 17

viii
 CHAPTER-1

Introduction

1.1 Introduction
In today's digital age, technology has become indispensable for effective online
marketing strategies. The global trend increasingly leans towards online shopping,
highlighting its convenience and accessibility. However, traditional offline stores,
including small shops and grocery stores, continue to operate. Despite their
presence, offline shopping experiences often fall short, leading to customer
dissatisfaction.
For instance, offline stores may offer discounts or promotions that customers
are unaware of, leading to missed opportunities. Additionally, customers may
encounter inconvenience when urgently needing a product only to find it out of stock
upon arrival. In contrast, online shopping offers a plethora of advantages. Customers
can explore a vast array of products tailored to their preferences and compare prices
across different platforms effortlessly.
Recognizing the shortcomings of offline shopping, the development of
e-commerce web applications has become imperative. . Moreover, online shopping
often presents cost advantages, with products typically priced lower compared to
their offline counterparts.In addressing the limitations of traditional shopping
methods, the adoption of e-commerce web applications emerges as a viable
solution. Leveraging technologies like the MERN stack offers unparalleled
opportunities to create robust and efficient platforms. With its comprehensive toolkit
comprising MongoDB, Express.js, React.js, and Node.js, the MERN stack enables
the development of highly functional and user-friendly web applications.
By embracing e-commerce solutions built on the MERN stack, businesses can
enhance their online presence, streamline operations, and provide superior shopping
experiences to customers. Ultimately, the shift towards online shopping not only
addresses existing challenges but also fosters a dynamic marketplace conducive to
growth and innovation.

1.2 Problem Statement

In today's digital age, access to quality Laptops is crucial for personal and
professional development. However, many individuals face barriers such as
geographical limitations, financial constraints, and time constraints that hinder their
ability to pursue traditional education. To address these challenges, there is a need
for an online e-commerce platform that provides flexible learning opportunities,
accessible resources, and interactive learning experiences. The MERN (MongoDB,

1
Express.js, React.js, Node.js) stack offers a robust framework for developing such a
platform.

1.3 Objective

The aim of this project is to create a user-friendly web application for browsing
and purchasing clothes. The E-commerce platform will allow the admin to add
products,delete a products and can manage the ujsers of the store.The Admin can
also manage the order status and reviews of the product through the admin
dashboard Customers will have the convenience of easily searching for their desired
items and adding them to their cart with a simple click. They can adjust the quantity
of items in their cart .Once items are added, they can view the total amount in their
cart. Additionally, a secure payment gateway will be integrated, enabling payments
via debit card, credit card, and net banking for a seamless shopping experienc

2
 CHAPTER-2

Literature Review

2.1 Evolution of Social Media Technology

Recent years have witnessed significant advancements in social media
technology, driven by innovations in machine learning, artificial intelligence, big data,
and augmented reality (AR) and virtual reality (VR) technologies. These
advancements have enabled social media platforms to offer personalized services
and targeted marketing to users, thereby enhancing user experiences and
engagement.

2.2 Comparison of Web Development Tech Stacks

Two prominent tech stacks in web development are the MEAN
(MongoDB, Express.js, Angular, Node.js) and MERN (MongoDB, Express.js, React,
Node.js) stacks. An evaluation of these stacks, focusing on performance, scalability,
ease of development, and community support, reveals their suitability for different
types of web applications. However, detailed implementation guidelines are lacking,
and potential limitations are not thoroughly analyzed.

2.3 Understanding the MERN Stack

The MERN stack, consisting of MongoDB, Express.js, React, and
Node.js, is widely utilized for developing web applications, including e-commerce,
social media platforms. Its benefits include scalability, flexibility, faster development
times, and the use of a single language (JavaScript) across the entire stack.
Comprehensive studies explore the architecture, components, and advantages of
the MERN stack, as well as comparisons with other web development stacks.

2.4 MERN Stack Implementation in E-commerce App

The MERN stack is proposed as an optimal choice for building real-time
e-commerce app. These applications encompass features such as user registration,
authentication, profile creation, post management, and real-time notifications.
Detailed insights into the architecture, development process, and scalability of such
applications underscore the suitability of the MERN stack for real-time web
applications.

3
2.5 Practical Application of the MERN Stack
Practical tutorials provide step-by-step guidance on building full-stack web
applications using the MERN stack, incorporating Redux Toolkit for state
management. These tutorials cover backend setup with Node.js, Express, and
MongoDB, frontend development with React and Redux Toolkit, and key concepts
such as Redux slices, asynchronous actions, and CRUD operations.

2.6 Addressing Privacy and Security Concerns in Ecommerce app

Users express significant concerns about privacy and security, particularly regarding data
collection and analysis. To address these concerns, platforms implement safeguards such as
privacy controls and data encryption. In web application development, robust authentication
and authorization mechanisms are crucial for safeguarding user data and preventing
unauthorized access

4
 CHAPTER-3

System Development

3.1Design Overview of Fullstack Responsive Ecommerce App

Backend Design
The backend of the Fullstack Responsive Ecommerce App is developed using Node.js and
Express.js. It comprises various controllers and routes to handle client-side requests
effectively. Additionally, a MongoDB database is integrated into the backend to store user
and product data. JSON Web Tokens (JWTs) play a vital role in user authentication and
authorization, ensuring secure access to the application's functionalities.

Frontend Design
The frontend of the application is constructed using React, leveraging multiple components
to create a seamless user interface (UI). The design prioritizes responsiveness and
accessibility, ensuring optimal performance across diverse screen sizes and device types.

User Authentication
User authentication is a cornerstone feature of the application, implemented using JWTs for
enhanced security. Upon login or registration, the backend generates a JWT token, which is
then stored in the user's local storage. Subsequently, the user's identity is verified through
the token, enabling seamless interaction with the backend services. Furthermore, the
application includes a logout feature, allowing users to securely terminate their sessions by
removing the JWT from local storage.

Payment
Payment is implemented using Razorpay.Razorpay is an Indian online payment gateway
company that enables businesses to accept, process, and disburse digital payments.
Established in 2014, Razorpay offers a wide range of payment solutions, including payment
gateway integration, payment links, subscription billing, and invoicing.One of Razorpay's key
features is its easy-to-use API, which allows developers to integrate payment functionality
into websites and mobile applications seamlessly. Through its API, businesses can accept
payments via various methods, including credit/debit cards, net banking, UPI (Unified
Payments Interface), wallets, and more.

5
3.2 Technologies Used

In the development of the Ecommerce app, various technologies have been utilized to
ensure the creation of a robust and efficient application. Below is an overview of the
technologies employed and their respective roles in the development process:

Languages
HTML, CSS, and JavaScript serve as the foundational languages for web development and
are indispensable in creating the user interface and functionality of the social media
application. HTML is utilized for organizing the structure and content of web pages, CSS is
employed for styling and design, while JavaScript enables dynamic interactions and
behavior on the client-side.

HTML (HyperText Markup Language): HTML is instrumental in structuring the content of web
pages, defining the layout, and providing semantic meaning to various elements such as
headings, paragraphs, images, and links. Its role is crucial in establishing the foundation of
the application's user interface.
CSS (Cascading Style Sheets): CSS is responsible for styling the visual presentation of the
application, including aspects such as color schemes, typography, layout, and
responsiveness. It enhances the aesthetic appeal and user experience of the social media
app through visually appealing design elements.
JavaScript: JavaScript adds interactivity and dynamic behavior to the application, allowing
for features such as user input validation, handling of asynchronous requests, and creation
of interactive user interfaces. It plays a pivotal role in enhancing the functionality and
responsiveness of the social media app.

Package Manager
npm serves as the package manager for the Node.js environment, facilitating the installation,
management, and sharing of packages or modules used in the development of Node.js
applications. It simplifies the process of managing dependencies, ensuring seamless
integration of external libraries and modules into the project.

Frameworks

Frameworks provide a structured approach to web development and offer pre-built

components and utilities to streamline the development process. The following
frameworks have been utilized in the development of the E-commerce:

6
React: React is a popular JavaScript library for building user interfaces, known for its
component-based architecture and virtual DOM rendering. It enables the creation of
reusable UI components and facilitates the development of interactive and dynamic
user interfaces for various functionalities within the social media app.

React Router Dom: React Router Dom is a package that enables routing in React
applications, allowing for navigation between different views or pages within the app.
It facilitates the creation of a multi-page user experience while maintaining a
single-page application architecture.

Node.js: Node.js is a runtime environment that allows JavaScript to be executed

server-side, enabling the development of scalable and efficient backends for web
applications. It provides features for handling HTTP requests, managing server-side
logic, and interacting with databases, making it well-suited for building the backend
infrastructure of the social media app.

Express.js: Express.js is a minimalist web framework for Node.js that simplifies the
process of building web applications and APIs. It provides a robust set of features,
including middleware support, routing, and HTTP utility methods, facilitating the
development of scalable and performant server-side applications for the social media
app
.
Mongoose: Mongoose is an object data modeling (ODM) library for MongoDB and
Node.js, providing a schema-based solution for modeling application data. It enables
developers to define data models, perform CRUD operations, and establish
relationships between data entities in the MongoDB database, serving as a crucial
tool for data management in the social media app.

Libraries
Libraries extend the functionality of the application by providing pre-built
components, utilities, and modules for specific tasks. The following libraries have
been utilized :

Axios: Axios is a JavaScript library used for making HTTP requests from the
client-side to the server-side API. It simplifies the process of fetching data from
external sources and handling asynchronous operations within the application.
Bcrypt: Bcrypt is a JavaScript library used for hashing passwords and implementing
secure password storage mechanisms. It enhances the security of user
authentication by encrypting passwords before storing them in the database,
mitigating the risk of unauthorized access
.

7
Dotenv: Dotenv is a JavaScript library used for loading environment variables from a
.env file into the application's runtime environment. It simplifies the process of
managing configuration variables such as API keys, database URLs, and
environment-specific settings.

Jsonwebtoken (JWT): Jsonwebtoken is a JavaScript library used for implementing

JSON Web Tokens (JWT) for user authentication and authorization. It provides a
secure method for generating and verifying tokens, enabling stateless authentication
in the social media app.
Cors: Cors is a JavaScript library used for enabling Cross-Origin Resource Sharing
(CORS) in web applications. It allows the server to specify which origins are
permitted to access its resources, enhancing security and controlling access to APIs
in the social media app.

React-toastify: React-toastify is a JavaScript library used for displaying notifications

and alerts to users in the social media app. It provides a simple and customizable
API for rendering toast messages, enhancing the user experience with informative
feedback.

Helmet: Helmet is a JavaScript library used for securing Node.js applications by

setting various HTTP headers to protect against common web vulnerabilities. It helps
mitigate risks such as cross-site scripting (XSS) and clickjacking attacks, enhancing
the overall security posture of the social media app.

material-ui: This package provides a library of pre-designed React components

following the Material Design guidelines. It includes components like buttons, forms,
navigation bars, and more, allowing developers to create visually appealing and
consistent user interfaces in their React applications.

multer: Multer is a middleware for handling multipart/form-data file uploads in

Express.js applications. It enables developers to upload files from client-side forms
and process them on the server, providing features like file validation, storage, and
handling of file uploads.

nodemailer: Nodemailer is a library for sending email messages in Node.js

applications. It provides a simple and flexible API for sending emails using SMTP or
other transport methods, making it useful for implementing email notification systems
or contact forms in web applications.

razorpay: Razorpay is a payment gateway integration library for Node.js applications.

It provides APIs for processing online payments, handling transactions, and
managing payment methods, allowing developers to integrate secure payment
processing capabilities into their web applications.
.

8
redux: Redux provides centralized state management and predictable state updates
through actions and reducers, facilitating efficient data flow and seamless integration
with React applications.
react-bootstrap : React Bootstrap is a library that provides React components based
on Bootstrap, allowing developers to easily incorporate Bootstrap's styling and
functionality into their React applications. It offers a set of pre-designed components,
such as buttons, modals, and alerts, that can be used to create responsive and
visually appealing UIs.

react-scripts : React Scripts is a set of scripts and tools used for building, testing,
and running React applications. It includes scripts for tasks such as starting a
development server, building production bundles, running tests, and ejecting
configurations.

web-vitals: Web Vitals is a package used for monitoring and measuring key
performance metrics of web applications, such as loading speed, interactivity, and
visual stability. It provides functionality for capturing and reporting these metrics to
help developers identify and address performance issues in their applications.

MongoDB
MongoDB is a document-oriented database system designed to store data in
JSON-like format, providing flexibility for unstructured data storage along with robust
indexing and replication features accessible through intuitive APIs.

VS Code
Visual Studio Code is a lightweight yet powerful code editor equipped with features
for debugging, task management, and version control. It aims to streamline the code
development process by offering tools like code autocompletion, debugging
assistance, and support for third-party extensions.

Google Chrome
Google Chrome Developer Tools, integrated into the Chrome browser, provide
developers with a suite of utilities for analyzing, debugging, and optimizing web
applications. Similar tools are available in other browsers like Mozilla Firefox,
catering to developers' needs for efficient web development workflows.

9
 Chapter-4

Snapshot of Laptop Store

LaptopStore is an E-commerce Web Application using MERN stack that can help a
laptop retailer bring their products to the customers

Homepage:

Fig.1 Homepage

Registration & Sign in

Fig 2.Sign in

10
 Fig 3.Registration

ProductCard

Fig 4 ProductCard
CartPage

Fig 5.CartPage

11
Shipping page

Fig 6.Shipping Page

Payment Method Page

Fig 7.Payment Method

12
Place Order Page

Fig 8.Place Order

Order Details Page

Fig 9.Order Details

13
Payment Gateway

Fig 10.Payment Gateway

User Profile Page

Fig 11. User Profile

14
Admin Login Page

Fig 12.Admin Login

Admin Dashboard

Fig 13.Admin Dashboard

15
Product List Page

Fig 14.Product List

Create Product Page

Fig 15.Create Product

16
Order List

Fig 16.Order List(1)

Fig 17.Order List (2)

17
User List

Fig 18.User List

Admin Profile

Fig 19..Admin Profile

18
 Chapter-6

Conclusion

Our e-commerce web application for the sale of laptops using MERN stack will serve
as a game-changer for small-scale textile industries, allowing them to bypass
traditional wholesalers and retailers and connect directly with customers. By
leveraging advanced technologies and user-centric design principles, we will provide
a platform that is both visually appealing and highly functional, enabling customers to
browse and purchase laptops from the comfort of their homes or offices. With
features such as secure login authent
ication, admin authorization, and seamless payment gateway integration, our
platform will offer a level of convenience and efficiency previously unseen in the
industry. By empowering textile industries to sell their products directly to consumers,
our web application will not only save money for both sellers and buyers but also
foster greater transparency and trust in the e-commerce ecosystem.

19
 Chapter-7

References

1.https://www.mongodb.com/
2.Yogesh Baiskar, Priyas Paulzagade, Krutik Koradia, Pramod Ingole, Dhiraj Shirbhate,
“MERN: A Full-Stack Development”, International Journal for Research in Applied
Science & Engineering Technology (IJRASET) ISSN: 2321-9653; IC Value: 45.98; SJ
Impact Factor: 7.538 Volume 10 Issue I Jan 2022.
3.https://expressjs.com
4.Ullah, S. E., Alauddin, T., & Zaman, H. U. (2016, January). Developing an
E-commerce website. In 2016 International Conference on Microelectronics,
Computing and Communications (MicroCom) (pp. 1-4). IEEE
5. Shah, M. (2021). MERN Stack – A Complete Guide. Available at:
https://www.geeksforgeeks.org/mern-stack-a-complete-guide/.

20
21