4. INTRODUCTION
E-commerce, or simply electronic commerce, is the term used to describe the buying and selling of
products and services via the Internet. E-commerce is a massive industry that has grown dramatically
in recent years, providing more benefits and conveniences than offline businesses. The fashion of
interaction between businesses and customers has also changed drastically because of the internet
boom and rapid innovations and development of the logistics industry, and E-commerce has even
made it possible for small businesses to commerce with customers globally. Recognizing this need, we
made the decision to create an E-commerce web application as our project. This project is
implemented using the MERN Stack. MERN Stack is an open-source JavaScript-based stack that is
used for building dynamic web applications more quickly and easily. It is a combination of modern
technologies for building high-end online apps. MERN Stack is a package of MongoDB, Express,
React, and Node.
5. OVERVIEW OF THE PROJECT
• E-commerce is the methodology of modern business technology used to buying and selling of
products , improve the quality, faster delivery, and services via the Internet. It is a rapidly growing
industry expected to continue expanding in the coming years. To create an e-commerce website,
various technologies can be used. The MERN stack is one such technology that we put to use. This
research explores the use of the MERN stack in developing e-commerce websites.
Main features/Need of a E-commerce website are below :
• Non-cash payment : higher use of cards and electronic fund transfer and UPI transition
• 24*7 service provide availability
• Advertising / Marketing
• Communication improvements
• Large customer reach
• User platform
6. SYSTEM STUDY
HARDWARE
• Minimum 5 GB space in HDD
• 3. 256 MB DDR SDRAM
• 4. GB ULTRA HDD 7200 RPM
• 5. 48 x CD ROM
• 6. 15 `` colour monitor
SOFTWARE :
• Visual studio code (IDE)
• Windows 11(Ultimate)
• MongoDB ,Shell ,Compass
• Nodejs
7. HTML
• Hypertext Markup Language (HTML) is the industry-standard
markup language for developing web apps and pages. It is
one of three foundational technologies underpinning the
World Wide Web, along with JavaScript and Cascading Style
Sheets (CSS). HTML documents are downloaded from a web
server or local storage by web browsers, who then turn
them into multimedia web pages. HTML originally featured
cues for the document's design and semantically explains
the structure of a web page. The foundation of HTML pages
are HTML components. Images and other objects, like
interactive forms, may be embedded within the produced
page using HTML techniques. By indicating structural
semantics for text elements like headings, paragraphs, lists,
links, quotations, and other objects, HTML offers a way to
generate structured texts.
8. CSS
• Cascading Style Sheets (CSS) is a language for
creating style sheets that describe how a document
produced in a markup language like HTML will look.
The World Wide Web's foundational technologies,
along with HTML and JavaScript, include CSS. Layout,
colour, and font may all be separated from content
and presentation using CSS. By describing the
pertinent 11 CSS in a separate CSS file, this
separation can make content more accessible, give
definition of presentation features greater freedom
and control, allow numerous web pages to share
formatting, and reduce complexity and repetition in
structural content
9. JAVASCRIPT
• JavaScript often abbreviated as JS, is an
interpreted, high-level programming language.
Additionally, it is a dynamic, weakly typed,
prototype-based, and multi-paradigm language.
One of the three fundamental technologies of
the World Wide Web, together with HTML and
CSS, is JavaScript. JavaScript is a crucial
component of online applications because it
makes web pages interactive. The vast majority
of websites make use of it, and every significant
web browser has an engine specifically
designed to run JavaScript.
10. REACT
• React is a framework that employs Webpack
to automatically compile React, JSX, and ES6
code while handling CSS file prefixes. React
is a JavaScript-based UI development
library. Although React is a library rather
than a language, it is widely used in web
development.The library first appeared in
May 2013 and is now one of the most
commonly used frontend libraries for web
development
11. DATABASE DESIGN & CONCEPTS
Advantages Of MongoDB Over RDBMS :
• Schema less : one collection holds different documents
• Structure is simpler and understandable
• No complex joining techniques
• It supports deep query-ability
• Easy scalability
• Faster access of data
12. MongoDB
• MongoDB is a document database designed for ease of
application development and scaling.
• MongoDB stores data in flexible, JSON-like documents,
meaning fields can vary from document to document and
data structure can be changed over time
• The document model maps to the objects in your
application code, making data easy to work with
• Ad hoc queries, indexing, and real time aggregation
provide powerful ways to access and analyze your data
• MongoDB is a distributed database at its core, so high
availability, horizontal scaling, and geographic distribution
are built in and easy to use
13. Database Structure in MongoDB
Database:
Database is a physical container for collections . Each databases gets
it own set of files on the system. A MongoDB server can hold multiple
databases.
Collection:
Collection is a group of MongoDB documents in an array structure . It
is equivalent of an RDBMS table . A collections exists in a single
database. Collection don’t force schema. Documents in the
collections can have different fields.
Document:
A document is a set of key-value pairs . Documents have dynamic
schema. It means it means docs in the same collection don’t have to
same set of fields or structure.
15. SYSTEM DESIGN
• This system design aids in determining the overall system architecture as well as the hardware and system requirements.
FEASIBILITY STUDY:
• The measure of how beneficial or practical the development of informant system will be to an organization will cover in this study. The
major categories of feasibility studies are defined below:
OPERATIONAL FEASIBILITY:
• Operational feasibility is the measure of how well the project will support the customer and the service provider during the operational
phase.
TECHNICAL FEASIBILITY:
• It measures the feasibility of the particular technical solution and the availability of technical resource and expertise. Technical feasibility
looks at what is practical and reasonable.
SCHEDULE FEASIBILITY:
• It is the measure of how reasonable the project time table is or the deadline is reasonable or not. During the lack of time or the time
become mandatory, we must finish the project within a given time period.
ECONOMIC FEASIBILITY:
• It is the measure of the cost-effectiveness of a project, which is often called cost benefit analysis. As long as the end-users requirements
and alternative technical solution have been identified, we can identify the raw cost weight and benefit of each alternative
16. TESTING
• software testing can be stated as the process of verifying and validating whether a software or application is bug-free,
meets the technical requirements as guided by its design and development, and meets the user requirements
effectively and efficiently by handling all the exceptional and boundary cases
Types of testing :
White box testing:
• White-box testing is the detailed investigation of internal logic and structure of the code. White-box testing is also
called glass testing or open-box testing. In order to perform white-box testing on an application, a tester needs to
know the internal workings of the code.
Black box testing :
• The technique of testing without having any knowledge of the interior workings of the application is called black-box
testing. The tester is oblivious to the system architecture and does not have access to the source code. Typically, while
performing a black-box test, a tester will interact with the system's user interface by providing inputs and examining
outputs without knowing how and where the inputs are worked upon
17. MERN-stack Technology
STACK :
• A “stack” refers to any combination of coding languages, tools, and frameworks developers use to
create software products for their clients . A stack contains different layers of components that
play a vital role in the process of software product creation.
• Client-side - front-end (HTML, CSS, JavaScript , React)
• Server-side - back-end (OS, web server, programming language, web framework, databases)
MERN Development stack :
• MERN is an acronym used to describe a specific set of JavaScript based technologies that
are used in the web application development process. It is designed with an idea to make
the development process as smooth as possible.
19. MongoDB:
• MongoDB is a free open-source, cross-platform document-oriented database program. It is classified as a No SQL database
program, which means that data is stored in flexible documents with JSON-based query language. document-oriented
database. A document or object is a unit of storage (which is comparable to a row), while many documents are stored in
collections (which is comparable to a table).
EXPRESS JS:
• Express js is a framework that's built in conjunction with Nodejs. Express is an open-source server format that is created
altogether in JavaScript. Express JS is made for developing web apps and APIs Instead of manually writing full web server
code in Node.js .Express.js supports HTTP and middleware methods, giving the API an incredible amount of power and making
it simple to use Express implements extra features that developers can use and have a better development environment.
React :
• ReactJS is an open-source client-side JavaScript library that is declarative and flexible in nature and is used for creating
reusable UI components. It is a component-based front-end library that mainly handles the application's view layer. The only
task left is to develop its logic and import the component into the proper section of the code.
Node js:
• Node.js open-source cross-platform server environment. developed on Google Chrome’s V8 engine for creating fast and scalable
network web-based applications, It is a JavaScript runtime environment that is used for carrying out and implementing
scalable JavaScript applications that are being used for building networking and server-side JavaScript applications
24. Conclusion:
E-Commerce is a flexible answer for consumers and businesses. In this competitive and convenience-prominent
period, only some people have the time and patience to spend time in markets to buy their products and
services. E-Commerce is the requirement of the current period, which is being well-served. This project is based
on a MERN stack, This website provides a computerized version of shop manipulate system which will benefit
the users as well as the visitor of the shop. which makes it possible to buy and sell products on this online
store And it also can store and save user data like profile information, orders, and past searches. The online
store is simple to use for sellers, they can easily add products and establish new categories. Consumers will
find it quite attractive to look at the products while sitting at home or at the office.
Future aspect :
• Adding proper payment gateway
• Adding UI version of Admin handle page
• Host project in a server
• Add a custom domain
Conclusion and Future scope
