E Commerce-Website (Final)
E Commerce-Website (Final)
E Commerce-Website (Final)
Submitted by
BACHELOR OF ENGINEERING
IN
APEX INSTITUTE OF
TECHNOLOGY, CHANDIGARH
UNIVERSITY, GHARUAN
Mohali(Punjab)
(2022 - 23)
1
BONAFIDE CERTIFICATE
Certified that this project report “MERN Stack E-Commerce Website” is the
bonafide work of “AASTHA KAUSHIK, AYUSH CHAUHAN, ANSH GOYAL,
ANUBHAV JAIN” who carried out the project work under the supervision of Ms.
Ramneet Kaur.
Certified By
Prof.
Prof.
2
ACKNOWLEDGEMENT
The success and final outcome of the project required a lot of guidance and
assistance from many people and we were extremely privileged to have got this all
along the completion of our project report. All we have done is only due to such
supervision and assistance and we would not forget to thank them.
We would like to thank our supervisor, Ms. Ramneet Kaur, for her valuable
teachings, guidance, and consistent encouragement. All through the sessions, she
has helped a lot in understanding the concepts better and supported us in working
on this project as a team.
3
List of Figures
1 Express.js 10
2 Express Architecture 15
3 Express working 16
4 React.js 18
4
List of Tables
5
List of screen shots
1 Register page 43
2 Login page 44
3 Home page 45
4 Filters 46
5 Category page 46
6 Category- men’s 47
fashion
7 Category- 47
accessories
8 Category- watch 48
9 Admin 48
Dashboard
10 Manage and 49
Create category
11 Product list 49
12 Orders 49
13 Contact us 49
6
ABSTRACT
The MERN stack consists of MongoDB, Express.js, React.js, and Node.js, which
provide a robust and scalable foundation for building web applications. Our website
incorporates various features, including user authentication, photo sharing, like &
comment feature and content management. The MERN stack provides a robust and
scalable foundation for building web applications, enabling us to create a powerful and
versatile social media platform that meets user needs and preferences. The website's
design is responsive, ensuring seamless access across multiple devices and platforms.
Moreover, We can easily customize the features to meet the specific requirements of the
target audience, making the platform highly customizable and engaging. Additionally,
the website addresses various constraints such as scalability, security, and privacy to
ensure a safe and secure user experience.
The purpose of the Online E-Commerce system is to automate the existing manual
system with the help of computerized equipment and the full-fledged computer
software, fulfilling their requirements, so that their data/information can be stored for
a longer period with easy accessing and keeping a track on various new items
launched in the market so as to facilitate users to buy and sell on the online platform
7
CONTENTS
CHAPTER 5 CONCLUSIONS 52
8
CHAPTER 6: FUTURE SCOPE OF STUDY 53-55
REFERENCES 56-57
9
CHAPTER: 1 : INTRODUCTION
1. Problem Definition:
Nowadays, the demand for full-stack developers has rapidly increased than ever before.
The term full-stack developer refers to a person who can technically work on both front-
end and back-end development of a dynamic website or web-based applications. In the
past, web development was mainly based on the LAMP stack (Linux, Apache, MySQL,
PHP or Perl) and Java (Java EE, Spring), which consists of various programming
languages. With the capabilities to work on both the client-side and server-side,
JavaScript eases web development with the MERN stack's emergence. The stack
comprises four primary technologies: MongoDB, Express.js, React.js, and Node.js.
In this bachelor's thesis, the main goal was to study each component's nature in the stack
and create a platform where people can buy or sell their products. The objective of the
project is to develop a general purpose E-commerce store where products like clothes,
daily needs, footwears etc, can be bought from the comfort at home through internet.
An online store is a virtual store on internet where customers can browse the catalogue
and select products of their interest. E-commerce has revolutionized the way people
shop and conduct business. In today's world, more and more consumers are turning to
online shopping for convenience and accessibility. As a result, businesses are investing
in developing e-commerce websites to reach a broader customer base and increase their
revenue.
The development of e-commerce websites requires a technology stack that can handle
complex business logic, data storage, and a seamless user experience. The MERN stack,
which includes MongoDB, Express.js, React.js, and Node.js, is a popular choice for
building scalable and high-performance web applications. The website is designed to
provide customers with an intuitive and user-friendly interface for browsing products,
adding them to their cart, and making purchases. It also includes an admin panel for
managing product inventory, processing orders, and generating sales reports.
10
The Internet has rapidly evolved from just a social platform to a E- commerce
platform. we develop a fully functional and user-friendly E- commerce platform that
includes selling and buying items from home via internet. Now a days e-commerce
site is widely used online business. We develop E-commerce website with the primary
goal to sell products through online and the basic idea is that customers can buy
products through online. It provides the user with a category of different product. The
system helps in buying of items and products through online by choosing the listed
products from website.
The outcome is a platform that has sufficient features to demonstrate the connections of
each of the components in the MERN stack. Users can sign up, sign in and sign out.
After signing in, users browse the catalogue and add various items of their interest in
the shopping cart and Wishlist. Moreover, users can also get offers and get the
information on deals of the day. The knowledge acquired from this thesis can be applied
to build various kinds of applications
2. Project Overview:
Our project is an e-commerce website built using the MERN stack, which stands for
MongoDB, Express.js, React.js, and Node.js. The e-commerce website is designed to
provide a user-friendly interface for customers to browse products, add them to their
cart, and make purchases. The website is also equipped with an admin panel that
enables the site owner to manage product inventory, process orders, and view sales
reports. We begin by discussing the technologies used in the MERN stack and their
respective roles in building web applications. We then describe the architecture of the
e-commerce website, including its frontend and backend components.
The frontend is built using React.js, a popular JavaScript library for building user
interfaces. The website's design is implemented using Material-UI, a UI library that
provides pre-built components and themes for React.js. We also discuss the use of
Redux, a state management library, to manage the website's state and provide a
seamless user experience.
The website has a clean and user-friendly interface, with intuitive navigation and real-
time notifications to keep users engaged and connected. The website's back-end is
powered by Node.js and Express.js, which provides a fast and reliable server-side
11
runtime environment. The front-end is built using React.js, which is a popular and
powerful JavaScript library for building user interfaces.
We believe that our use of the MERN stack has enabled us to create a high-
performance, scalable, and adaptable platform that meets the needs and preferences
of the users.
3. Project Scope:
12
4. Hardware Requirement:
• The system wants a minimum of two GB of ram to run all the options. It wants a
minimum 1.3 GHz processor to run smoothly. Rest is all up to the user’s usage
and can take care of hardware. For security opposing anti-virus is suggested.
• RAM: At least 256 MB of RAM. The amount of RAM needed depends on the
number of concurrent client connections, and whether the server and multiplexor
are deployed on the same host.
Raven et al. compared India and China’s approaches in adoption of e-business. Based
on the literature survey and secondary data, the study analysed various factors
influencing the growth of e-businesses in the two countries. The factors examined
include government policy and focus, existing technology infrastructure regulatory
environment, experience and understanding of business operations, and culture, among
others. The study concludes that China appears to be ahead of India in the infrastructure,
but India is ahead in e-readiness. Further, it states that both countries are poised for
rapidly increasing e-business, however, problems of poverty and inequality between
13
urban and rural connectivity must be resolved to really take advantage of e-business in
both the countries.
Malhotra and Singh studied the determinants of Internet banking adoption by banks in
India. Panel data of 88 banks in India covering the financial years 1997–1998 to 2004–
2005 was collected through CMIE (Centre for Monitoring Indian Economy) database.
Logistic regression analysis was used, the dependent variable is categorical with a value
of 1 if a bank adopted Internet banking during the study period and 0 otherwise.
Independent variables included in the study are firm size, firm age, bank deposits ratio,
average wages, expenses (fixed assets & premises), ROA (ratio of average net profits to
average assets), market share, average number of branches, percentage of banks adopted
Internet banking. The results of the study prove that Bank type (Private), firm size, bank
deposits ratio, firm age, market share, average number of branches, percentage of banks
adopted Internet banking and expenses, are found to be significant in adoption decision.
Wage and ROA are found to be insignificant. This study contributes to the empirical
literature on diffusion of financial innovations, particularly Internet banking in Indian
context. Most of the study on adoption of technology was related to developed markets
like US and Europe, this study is an important contribution to evolving literature as it
dealt the problem of technology adoption in developing country context.
Study by Tarafdar and Vaidya examined the factors that determine the organizational
inclination to adopt E-Commerce (EC). The study proposes a framework based on the
qualitative data on four financial firms in India collected through multiple case study
design. Face to face interview was used to collect primary data and existing database,
company documents, press reports and websites are used to collect secondary data. The
framework describes two broad factors—leadership characteristics and organizational
characteristics—to explain the influence of organizational factors on the propensity to
employ EC technologies. The study found that both leadership and organizational
characteristic influence EC adoption. It establishes that leadership characteristics
influence adoption of EC technologies in centralized organization and organizational
characteristics influence EC adoption in de-centralized organization. The study also
found that characteristics of Information Systems professional and organization
structure influence EC adoption.
Viswanathan and Pick examined the issue of e-commerce in India and Mexico from
the framework of developing countries as suggested by Tallon and Kraemer. The
framework included critical factors that might impact the diffusion of e-commerce. The
factors are government policy, legal framework, technology infrastructure, relationship
with developed economies and extent of e-commerce usage by individual, corporate and
government. The study’s primary focus is on India. Mexico is analyzed more briefly,
and compared with India based on common international datasets. The analysis and the
data presented in this paper represent a synthesis of data from secondary research and
data from interviews conducted with senior executives in the IT industry in India and
Mexico. The study suggests that substantial efforts have to be made to invest in
telecommunications infrastructure, and to create a culture of electronic payments and e-
commerce usage that will support economic growth.
15
Dasgupta and Sengupta paper on e-commerce in Indian insurance industry discusses
the features of e-insurance in comparison with the traditional offline insurance service.
The authors put forth that e-insurance offers benefits such as reduction in search cost
and hidden cost, price comparison for customers, and benefits such as opportunity to
have niche market, first mover advantage and product bundling for insurance companies
going online. Further, it discusses that status of e-insurance in India is still formative
stage, but stands to gain particularly from the rural markets since the availability of
insurance agent is very less compared to urban markets. The study is conceptual in
nature and offers insights based on market reports and data from secondary sources.
Commerce has evolved over the centuries. Prior to the evolution of money it was the
simple “barter process” where things could be exchanged, say milk for grains. The
evolution of money brought with it, the concept of a “marketplace”. In a marketplace,
Commerce is function of 4 P’s – Product, Price, Place and Promotions. All these four
components play a vital role in a transaction to take place. Different combinations of
4Ps determine different forms of Commerce. Once the marketplace came into existence,
a few pioneers realised that
people would be ready to pay extra if they could deliver products at the customer’s
doorstep. A slight modification on Price and Place led to the convenience of getting
products at their homes. This concept delighted the customers and thus, the concept of
“Street Vendors” was born.
When the Postal System came into being the sellers decided to cash in on the new
opportunity and started using mailers giving description of their products. It led to the
concept of “Mail Order Cataloguing”. From here, the evolution of the “Tele
shopping” networks was thus inevitable with the development of media vehicles. The
latest generation of commerce is one that can be done over the internet. Internet provides
a virtual platform where sellers and buyers can come in contact for sale and purchase of
goods and services. They can be thousands of miles apart, may belong to different parts
of the world, might speak different languages, “E-Commerce” emerged as the
boundary-less trade medium in the era of globalization.
17
2.3 Problems in Existing System:
One of the main challenges is the management of large data sets. E-commerce
websites typically deal with a large volume of data, including product catalogs,
customer data, and transaction data. Managing this data can be a complex and time-
consuming process, particularly when using a database such as MongoDB, which may
require additional configuration and optimization to handle large data sets efficiently.
Security is also a significant concern for e-commerce websites. These websites deal
with sensitive customer information, including personal and financial data. Therefore,
ensuring the security of the website and its data is critical. The MERN stack provides
several security features, such as password hashing and HTTPS support, but additional
security measures may be required to meet industry standards and compliance
requirements.
Finally, scalability is another challenge that e-commerce websites may face. These
websites need to handle high volumes of traffic and transactions, particularly during
peak periods such as holiday seasons. Ensuring that the website can scale to handle
this traffic requires careful planning and optimization, particularly when using a
database such as MongoDB, which may require sharding and replication to handle
large data sets efficiently.
Several studies have highlighted these challenges and limitations. A study by Yang et
al. (2020) evaluated the scalability of the MERN stack for building e-commerce
websites. They found that while the stack was scalable, additional optimization was
required to handle large data sets efficiently. Another study by Chen et al. (2021)
evaluated the security of the MERN stack for building web applications. They found
that while the stack provided several security features, additional measures such as
two-factor authentication and intrusion detection systems were required to ensure the
security of the website. Overall, these studies highlight the challenges and limitations
of using the MERN stack for building e-commerce websites. While the stack provides
several benefits, careful attention must be paid to data management, third-party
integration, security, and scalability to ensure the website's success.
19
technology to overcome the problem with the existing system. The E-commerce
Management System companies can use a flying robot, so when a user places an order,
the company will send the product through the robot. The robot will find the user by
using the GPS, and in this way, we can reduce the time to deliver a product. While
before sending a product the e-commerce company will check the product that it is
same or not with the requested order. The proposed system literature review section
for a MERN stack e-commerce website should provide an in-depth analysis of the
features and functionalities of the proposed system. The review should explain how
the proposed system will address the shortcomings of existing e-commerce platforms
and provide a unique and engaging shopping experience for customers. The proposed
e-commerce site presents the following factors to the customers for better usability
such as knowing when an item was saved or not saved in the shopping cart, returning
to different parts of the site after adding an item to the shopping cart, easy scanning
and selecting of items in a list, effective categorical organization of products, simple
navigation from home page to information and order links for specific products,
obvious shopping links or buttons, minimal and effective security notifications or
messages and Consistent layout of product information.
2.4 Goals/Objective:
The MERN stack (MongoDB, Express, React, Node.js) is a popular choice for
building e-commerce websites due to its flexibility, scalability, and efficiency. Here are
some possible goals and objectives for an e-commerce website built using the MERN
stack:
Overall, the goals and objectives of a MERN stack e-commerce website should be
focused on improving the user experience, increasing sales, and streamlining
operations. By achieving these goals, the website can become a valuable tool for
growing the business and building a loyal customer base.
1. Express JS
Express JS is a popular web application framework for Node.js, and it is one of the
most widely used frameworks in the JavaScript ecosystem. Express provides a simple
and robust set of features for building web applications, making it easy to create
scalable and maintainable web applications. This technology survey will provide an
in-depth analysis of Express JS and its various features, advantages, and drawbacks.
Features:
• Express JS offers a wide range of features that make it a popular choice for building
web applications. Some of the key features of Express include:
• Routing: Express provides a simple and intuitive way to define routes for web
applications. This makes it easy to handle HTTP requests and responses, and to
create APIs.
Figure 1
Figure 2
Advantages:
• Fast and Lightweight: Express is known for its speed and lightweight nature, making it
an ideal choice for building fast and efficient web applications.
22
• Flexibility: Express is highly flexible, allowing developers to choose the tools and
technologies that work best for their projects. This makes it easy to integrate with other
libraries and frameworks.
• Active Community: Express has a large and active community of developers who
contribute to the framework and provide support to others. This means that developers
can easily find answers to their questions and get help when they need it.
• Easy to Learn: Express is relatively easy to learn, especially for developers who are
already familiar with JavaScript and Node.js.
Drawbacks:
• Lack of Built-in Features: Although Express is highly flexible, it lacks some of the
built-in features found in other web frameworks. This means that developers may need
to use additional libraries or write custom code to implement certain features.
• Steep Learning Curve for Beginners: Although Express is relatively easy to learn, it can
still have a steep learning curve for beginners who are new to web development.
Conclusion:
Express JS is a powerful and flexible web application framework that offers a wide
range of features and benefits for developers. Its lightweight and fast nature, coupled
with its flexibility and active community, make it an ideal choice for building scalable
and efficient web applications. However, developers should be aware of its drawbacks,
such as the lack of built-in features and the steep learning curve for beginners. Overall,
Express is a popular choice for web developers looking to create powerful and efficient
web applications.
2. Node.js
23
Node.js is an open-source, cross-platform, server-side JavaScript runtime environment
built on Chrome's V8 JavaScript engine. Here's a short note on Node.js, including its
features, advantages, and usage in making social media applications:
Features:
• Asynchronous and event-driven: Node.js is designed to handle multiple requests
simultaneously without blocking any of them, making it highly efficient for
handling I/O-intensive tasks.
• Cross-platform: Node.js can run on multiple platforms, including Windows,
macOS, and Linux, making it a versatile choice for building applications.
• Large and active community: Node.js has a large and active community that has
developed a vast ecosystem of packages and tools that can be used to extend its
functionality.
Advantages:
• High performance: Node.js's asynchronous, non-blocking I/O model makes it
highly performant, especially for I/O-intensive tasks such as reading and writing
to databases.
• Scalability: Node.js can handle a large number of concurrent connections, making
it a good choice for building scalable applications.
• Easy to learn and use: Node.js uses JavaScript, which is a widely-used language,
and has a relatively low learning curve compared to other server-side
technologies.
24
• Node.js can be used in conjunction with popular frameworks such as Express.js
and Socket.io to build scalable and efficient applications.
• Node.js can be used to build APIs for mobile and web applications, enabling
seamless integration between different platforms.
Overall, Node.js is a powerful technology that can be used to build efficient, scalable,
and high-performance server-side applications, making it an ideal choice for building
social media applications.
3. React
React is a popular JavaScript library used for building user interfaces. Developed
by Facebook, React has become one of the most widely used front-end
frameworks in the web development industry. This technical survey will provide
an in-depth analysis of React and its various features, advantages, and drawbacks.
Figure 3
25
Features:
React offers a wide range of features that make it a popular choice for building user
interfaces. Some of the key features of React include:
• Component-based architecture:
React follows a component-based architecture, which means that UI elements are
divided into reusable components. This allows developers to create complex UIs
using smaller, more manageable components.
• Virtual DOM:
React uses a virtual DOM, which is a lightweight representation of the actual
DOM.
This makes it faster to update the UI, as only the changes are applied to the actual
DOM.
• JSX:
React uses a syntax called JSX, which allows developers to write HTML-like code
inside their JavaScript code. This makes it easier to create and manage UI elements.
• React Native:
React can also be used to build native mobile apps using React Native, which is a
framework built on top of React. This allows developers to use the same codebase
for both web and mobile apps, making it easier to maintain and update applications.
• Developer Tools:
React comes with a range of developer tools, such as the React Developer Tools
browser extension and the React Profiler, which help developers to debug and
optimize their applications.
26
Advantages:
• Reusable Components:
React's component-based architecture allows developers to create reusable
components that can be easily integrated into other applications. This makes it
easier to maintain and update applications over time.
• High Performance:
React's virtual DOM and one-way data binding model make it a highly performant
library. It is fast and efficient, even when handling large amounts of data.
• Large Community:
React has a large and active community of developers who contribute to the library
and provide support to others. This means that developers can easily find answers
to their questions and get help when they need it.
• SEO-friendly:
React is SEO-friendly, as it allows developers to render the UI on the server-side.
This means that search engines can easily crawl and index the content, leading to
better search engine rankings.
• Reusable Code:
React's component-based architecture and focus on reusability make it easier to
create and maintain code. Developers can create components once and reuse them
throughout the application, reducing the amount of code that needs to be written
and improving code quality.
27
• Large Community:
React has a large and active community of developers, which means that
developers can find support, documentation, and resources easily. This community
also contributes to the development of React and its ecosystem, ensuring that it
stays up-to-date and relevant.
Drawbacks:
• Complex Setup:
React requires a complex setup process, which can be time-consuming for
developers who are new to the library. It may also require additional tools and
libraries to be installed.
• Limited functionality:
React is primarily a UI library and does not include features such as routing or state
management. Developers may need to use additional libraries or write custom code
to implement these features.
• Poor Documentation:
Some developers have criticized React's documentation, stating that it can be
difficult to understand and navigate. This can lead to confusion and frustration
when trying to learn the library.Steep Learning Curve for New Developers: React
can be challenging for developers who are new to the library and its concepts.
There are many tools and concepts to learn, which can take time and effort.
• Limited Documentation:
Although React has a large community, some developers have noted that the
documentation can be lacking in certain areas. This can make it difficult to find
answers to specific questions or to understand certain concepts.
28
The React ecosystem is constantly changing, with new tools, libraries, and concepts
being introduced regularly. This can make it challenging for developers to keep
upto-date with the latest developments and to know which tools to use for specific
tasks.
Conclusion:
React is a powerful and flexible library for building user interfaces and native mobile
apps. Its component-based architecture, virtual DOM, and efficient rendering system
make it a highly performant and efficient library for developers. React's focus on
reusability, support for server-side rendering, and large community make it a popular
choice for building modern web applications. However, developers should be aware of
the steep learning curve, limited documentation, and rapidly changing ecosystem when
deciding whether to use React for their projects. Overall, React is a strong option for
developers looking to build powerful and efficient user interfaces and mobile apps.
4. MongoDB
MongoDB is a popular open-source NoSQL database system that uses a document
oriented data model instead of traditional table-based relational databases. MongoDB
provides a flexible and scalable solution for managing large amounts of unstructured
and semi-structured data.
Figure 4
29
Figure 4
Figure 5
Figure 6
30
Features:
• Document-Oriented:
MongoDB stores data as documents in BSON (Binary JSON) format, which makes
it a highly flexible and scalable database system. Each document can have a unique
schema, and documents can be nested within each other, allowing for complex data
structures.
• Distributed:
MongoDB can be deployed as a distributed database system, allowing for
horizontal scaling and high availability. Sharding, replication, and auto-scaling
features are built-in, making it easy to scale MongoDB databases.
• Flexible Querying:
MongoDB's flexible query language allows for ad-hoc queries on any field or
combination of fields within documents. This makes it easy to query large amounts
of unstructured data and to modify queries on-the-fly.
• Indexing:
MongoDB provides extensive indexing capabilities, allowing for efficient querying
of large data sets. Indexes can be created on any field or combination of fields
within documents.
• Full-Text Search:
MongoDB provides a built-in full-text search engine that allows for efficient
searching of large amounts of text data. This feature makes it easy to implement
text search functionality within applications.
Advantages:
• Scalability:
31
MongoDB can be easily scaled horizontally by adding more servers to the database
cluster. Sharding and replication features are built-in, making it easy to distribute
data across multiple servers and ensure high availability.
• High Performance:
MongoDB's efficient indexing, caching, and querying features make it a highly
performant database system. It can handle large amounts of data and complex
queries without sacrificing performance.
• Open-Source:
MongoDB is an open-source database system, which means that it is free to use
and can be easily customized and extended by developers.
• Large Community:
MongoDB has a large and active community of developers, which means that
developers can find support, documentation, and resources easily.
• Improved SEO:
Disadvantages:
• No ACID Compliance:
32
MongoDB does not support full ACID compliance, which can make it challenging
to maintain data consistency and integrity in certain situations.
• Limited Tooling:
MongoDB's tooling is not as mature as that of traditional relational databases. This
can make it challenging to perform certain tasks, such as backups and monitoring.
Conclusion:
Overall, MongoDB is a highly flexible and scalable database system that provides a
great solution for managing large amounts of unstructured and semi-structured data. Its
document-oriented data model, flexible querying, and built-in full-text search engine
make it a powerful tool for developers.
5. JWT
JSON Web Tokens (JWT) is a standard for securely transmitting information between
parties as a JSON object. A JWT consists of three parts: a header, a payload, and a
signature. Here are some of the key features, advantages, and usage of JWT with the
MEARN stack:
Features:
• Stateless: JWTs are stateless, which means that servers do not need to store session
data or look up session information for each request.
• Security: JWTs use a digital signature to verify the authenticity of the sender and
ensure that the message has not been tampered with.
• Portable: JWTs can be sent over HTTP, HTTPS, or any other communication
protocol, making them highly portable and interoperable.
• Scalability: JWTs can be used in distributed systems and microservices, making
them highly scalable.
Advantages:
• Authentication: JWTs are commonly used for authentication and authorization in
web applications, enabling users to securely access resources and services.
33
• Performance: JWTs can improve the performance of web applications by reducing
the need for server-side session management and database lookups.
• Flexibility: JWTs can be used for a wide range of use cases, from simple
authentication to complex multi-factor authentication and authorization.
34
• History management: React Router provides a way to manage the browser's
history and handle browser navigation events.
Advantages:
• Better user experience: React Router allows for smooth and fast navigation
between different pages and views within an SPA, improving the overall user
experience.
• SEO-friendly: React Router's server-side rendering support allows for better
search engine optimization (SEO) of SPAs, improving their discoverability.
• Modular and scalable: React Router's declarative API and support for nested
routing make it easy to manage and scale complex SPAs.
Usage in social media applications:
• React Router can be used to define routes for different pages and views in a social
media application, such as the user's profile page, timeline, and settings page.
• React Router's support for nested routing can be used to handle complex user
interactions, such as nested comment threads or sub-menus within a view.
• React Router can be used to handle authentication and authorization routing, such
as redirecting unauthenticated users to a login page.
Redux: Redux is a popular state management library for React.js that provides a way to
manage and update application state in a predictable and scalable manner. Some of its
key features include:
• Centralized state management: Redux provides a single source of truth for
application state, which makes it easy to manage and update state across different
components and views.
• Predictable state updates: Redux's strict unidirectional data flow and use of pure
functions make it easy to predict and debug state updates.
• Time travel debugging: Redux's support for time travel debugging allows
developers to replay and inspect past state updates, making it easier to find and
fix bugs.
35
Advantages:
• Better code organization: Redux's centralized state management and use of pure
functions make it easy to organize and modularize application code, leading to
more maintainable and scalable code.
• Improved performance: Redux's use of immutable state and selective updates can
improve application performance by reducing unnecessary re-renders and state
updates.
• Better debugging: Redux's support for time travel debugging and predictable state
updates can make it easier to debug and diagnose application issues.
Usage in social media applications:
• Redux can be used to manage and update application state for different features
and views in a social media application, such as user profiles, timelines, and
notifications.
• Redux can be used to manage user authentication and authorization state, such as
storing user credentials and managing access tokens.
In summary, React Router and Redux are two powerful libraries that can be used to build
complex SPAs with React.js. With their features and advantages, they can be used in
social media applications to provide better user experiences, manage complex user
interactions, and improve application performance and maintainability.
CHAPTER: 3 METHODOLOGY
36
To plan the application, we can use various tools and techniques, such as user stories,
wireframes, and prototypes. We conducted user research and gathered feedback to
ensure that our application meets the needs of our users. For this we took feedback from
our classmates and for user stories we took help from internet and look at the user
reviews of different E-commerce website.
2. Design:
Once we have a plan for our application, the next step is design. we need to design the
user interface and user experience of our application, and create a visual design that
reflects your brand and the purpose of our application. We made sure our design is
simple and attractive, so it can be easily used by anyone from any age group.
To design the application, you can use various design tools and techniques, such as
design patterns, style guides, and design systems. You can also use user testing and
feedback to ensure that your design is user-friendly and meets the needs of your users.
For this phase we made three designs and out of that we selected one design after taking
reviews from few people(8-10 users).
Figure 3
37
Figure 4
Figure 95
38
4. Development:
The next step in building a e-commerce website is development. You need to develop
the backend and frontend of your application using the MERN stack.
Backend development involves creating the server-side logic and APIs that power your
application. You can use Node.js and Express.js to create the backend of your
application, and MongoDB to store and manage your data.
MongoDB is a NoSQL database that stores data in JSON-like documents. Express.js is
a web framework for Node.js that provides a set of tools and libraries for building web
applications. React.js is a JavaScript library for building user interfaces, and Node.js is
a runtime environment for executing JavaScript on the server-side.
Frontend development involves creating the client-side logic and user interface of your
application. We made use of React.js to create the frontend of our application, React.js
helps us to make SPA (Single Page Application) which reduces the loading time and
make better use experience.
React.js also provides a set of tools and libraries for building user interfaces, such as
React Router for handling navigation, Redux for managing state, and Axioms for
making API requests. You can use various CSS frameworks and libraries for styling your
application, such as Bootstrap and Material UI.
We also made use of various libraries and frameworks to add functionality and enhance
the user experience.
During development, we need to follow best practices and standards, such as coding
conventions, version control, and testing. We also need to ensure that our application is
secure and scalable, and meets the performance and accessibility standards.
4. Testing:
Testing is an important aspect of building a e-commerce application. You need to test
your application thoroughly to ensure that it is functioning correctly and meets the
requirements and expectations of your users.
To test your application, you can use various testing techniques, such as unit testing,
integration testing, and end-to-end testing.
39
You can also use automated testing frameworks, such as Jest and Enzyme, to speed up
the testing process and ensure consistency.
During testing, you need to identify and fix any bugs and issues that arise, and ensure
that your application is stable and reliable. You also need to ensure that your application
meets the security and privacy standards, and protects the data and information of your
users.
5. Deployment:
Once your e-commerce application is tested and ready, the next step is deployment. You
need to deploy your application to a hosting platform or cloud provider, and ensure that
it's accessible and available to your users.
To deploy your application, you can use various deployment tools and services, such as
Heroku, AWS, and Google Cloud. You need to ensure that your application is deployed
securely and efficiently, and that it meets the scalability and performance requirements.
Conclusion:
Building an e-commerce application using the MERN stack requires a comprehensive
methodology that covers every aspect of the development lifecycle, from planning and
design to deployment and maintenance. By following the steps outlined in this article,
you can build a high-quality e-commerce application that provides a great user
experience and meets the needs of your users.
40
CHAPTER: 4 RESULTS AND DISCUSSION
Register Page
Here the user can register or signup themselves by providing email and other
necessary details. After providing required details we cam click on register to
complete the registration process.
Login Page
This is login page where already registered user can login to access the website by
providing registered mail id.
41
Home Page
This is the home interface of the social media platform. We can clearly see users name
and details in home page. this is the lig ht mode of the social media platform.
42
User can choose from any category which he/she desires. User can filter the products
according to price or category and can add favourite items to the cart.
Figure 16
Categories
Category Section where user can easy select their favourite category
43
• Men’s Fashion
44
• Men’s Watch
• Accessories
45
Admin
46
47
User
48
49
Contact Us
50
CHAPTER 5: CONCLUSION
51
CHAPTER 6: FUTURE SCOPE
E-Commerce is the future of shopping. Thus, is would be apt to quote “The future
is here.
It's just not widely distributed yet”- William Gibson
The Internet economy will continue to grow robustly; Internet users would buy more
product and buy more frequently online; both new and established companies will
reap profits online; and…
• Safer Online Payment Systems: As the Internet becomes a safer place to transact,
the amount spent by the Internet Users online is bound to increase. Those
apprehensive of divulging their credit card and bank details would be active online
shoppers. The Internet users are expected to buy high-end products like automobile,
property, home durables online.
• Expanding User Base: Going at the current rate of growth in the Internet users
transacting online, the user base for E-Commerce is expected to rise expand
exponentially. A large portion of the Internet population is under the age of 35 years
and is increasingly moving northwards as far as the purchasing power is concerned.
The uncanny nature of this segment “to use now and pay later” is going to play an
important part in the future growth of e commerce market. Be it picking new stocks
or new clothes, finding a job or a bride, the web way of doing things will gain
precedence.
2. Future Scope
✓ Mobile responsiveness: As more and more people access the internet through
their mobile devices, it's essential to ensure that your e-commerce website is
mobile-friendly. Therefore, optimizing the website for mobile devices could be
an area of future scope.
53
✓ Enhanced security features: As e-commerce websites deal with sensitive
user data, including personal information and financial details, ensuring the
website's security is paramount. Therefore, incorporating enhanced security
features like two-factor authentication, SSL certificates, and secure payment
gateways can be future scope areas.
✓ Analytics and reporting: Collecting and analyzing user data can provide
valuable insights into customer behavior and preferences, which can be used to
improve the website's functionality and overall performance. Therefore,
incorporating analytics and reporting features can be a future scope area.
54
CHAPTER 7: REFERENCES
56