Professional Documents
Culture Documents
ONLINE-SHOPPING
WEBSITE
A Project Report submitted in the partial requirement for the award of the degree of
BACHELOR OF TECHNOLOGY
( B.Tech. )
In
COMPUTER SCIENCE & ENGINEERING
Samaksh Kumar(20001001098)
Nikhil (20001001073)
1
CERTIFICATE
Nikhil (20001001073)
who are students of B. Tech, DCRUST, Murthal, during the year 2023 , in partial
fulfillment of the requirements for the award of the Degree of Bachelor of
Technology and that the project has not formed the basis for the award of any degree
earlier.
2
ABSTRACT
The purpose of the project is to help the customers to find day to day users the products easily
at affordable and best price.It also helps the local venders to sell their product to the bigger
market which saves a lot of time and transportation cost. The project basically has the
following modules.
1. Home Page
2. Products Page
3. Product Detail Page
4. Sign in/Register Page
5. My Profile
6. Cart
7. Transaction Page
8. Contact
9. About
The app is only used in online mode with a suitable internet connection and cannot be used
offline.
3
ACKNOWLEDGEMENTS
We are highly indebted to “Dr. Jitender Kumar Bhardwaj ” for giving us a rare
opportunity to undertake this project.
We also extend our immense gratitude to “Dr. Sukhdeep Sangwan”(Head of
Computer Science Dept) for his kind help and support .
Finally, We would be failing our duties if We did not put on record our deep
sense of obligation to our parents and friends, who provided us with an
environment conducive to hard work.
4
Table of contents PAGE NO.
Title Page
Declaration of the Student 1
Certificate of the Guide 2
Abstract 3
Acknowledgement 4
Chapter 1. INTRODUCTION
1.1 Project Overview 7
1.2 Problem Statement 8
1.3 Feasibility Study 8-9
1.4 Feasibility Report 9
5
Table of contents PAGE NO.
Chapter 6. IMPLEMENTATION
6.1 User Interface 40
6.2 Footer 41
6.3 Filter Used 41
6.4 Cart 42
6.5 Login Page 42
6.6 Shipping details 43
6.7 Payment 43
6.8 Order Placed 44
Chapter 7. GREEN IMPLEMENTATION 45-47
Chapter 8. LIMITATION OF APPLICATION 48
Chapter 9. OUTCOMES & LEARNING 49
Chapter 10. FUTURE PROSPECTS 49
Chapter 11. INSTALLATION 50
Chapter 12. CONCLUSION 51
Chapter 13. REFRENCE 52
6
1.1. Project Overview
The main objective of the project is to develop a web application which could help users find day
to day products and sellers sell their products online in this time of internet. The whole sales system
for your business is automated online. You will therefore save on staff, wages and other business
costs, which are usually an expense such as electricity, rent and heating costs. The money that you
have saved can then be used to develop your e-commerce website and product range further. E-
commerce websites will also help you expand your product offering faster than is normally
possible within an offline business situation.
7
1.2. Problem Statement
Problem statement is one of the basic and important phases of project phase. When the basic
problem is determined, it is documented and the symptomatic problem is analyzed, then the current
list of basic problem is completed. A system is simply a set of components that interact to
accomplish some purpose.
Major problems faced by users are:
The purpose of any e-commerce website is to help customers narrow down their broad ideas and
enable them to finalize the products they want to purchase. For example, suppose a customer is
interested in purchasing a mobile. His or her search for a mobile should list mobile brands,
operating systems on mobiles, screen size of mobiles, and all other features as facets. As the
customer selects more and more features or options from the facets provided, the search narrows
down to a small list of mobiles that suit his or her choice. If the list is small enough and the
customer likes one of the mobiles listed, he or she will make the purchase.
Therefore, by facing all these problems we personally feel that there is a need for e-commerce
website to save precious time and resources.
All projects are feasible given unlimited resources and infinite time. But the development of
software is plagued by the scarcity of resources and difficult delivery rates. It is both necessary
and prudent to evaluate the feasibility of a project at the earliest possible time.
Economic Feasibility:
This procedure is to determine the benefits and savings that are expected from a candidate system
and compare them with costs. If benefits outweigh costs, then the decision is made to design and
implement the system. Otherwise, further justification or alterations in the proposed system will
have to be made if it is to have a chance of being approved. This is an ongoing effort that improves
in accuracy at each phase of the system life cycle.
8
Technical Feasibility:
Technical feasibility centers on the existing computer system (hardware, software, etc.,) and to
what extent it can support the proposed addition. If the budget is a serious constraint, then the
project is judged not feasible.
Operational Feasibility:
People are inherently resistant to change, and computers have been known to facilitate change.
1. Technical feasibility:
The system is self-explanatory and does not need any extra sophisticated training to learn to handle
e-commerce website. As the system has been built by concentrating on the User ease to understand
Concepts, the application can also be handled very easily with a novice User. The overall time that
is required to train the users upon the system is less than half an hour.
The System has been added with features of online complaints and button interaction methods, which
makes the user the master as he starts working through the environment.
2. Financial Feasibility:
Time Based: It requires time to build this app but since it is going to benefit a lot of users it does
not matter much.
Cost Based: No special investment needed to manage the app. Investment requires only once at
the time of preparation. The software used in this project is freeware so the cost of developing the
tool is minimal and hence the overall cost.
9
2. System Analysis and Design
System Analysis is first stage according to System Development Life Cycle model. This System
Analysis is a process that starts with the analyst.
Analysis is a detailed study of the various operations performed by a system and their relationships
within and outside of the system. One aspect of analysis is defining the boundaries of the system
and determining whether or not a candidate system should consider other related systems. During
analysis, data are collected on the available files, decision points, and transactions handled by the
present system.
Logical system models tools that are used in analysis. Training, experience, and common sense
are required for collection of the information needed to do the analysis.
10
2.2. Requirement Analysis:
Requirement Analysis is a software engineering task that bridges the gap between system level
software allocation and software design. It provides the system engineer to specify software
function and performance, indicate software’s interface with the other system elements and
establish constraints that software must meet.
The basic aim of this stage is to obtain a clear picture of the needs and requirements of the end-
user and also the organization. Analysis involves interaction between the clients and the analysis.
Usually analysts research a problem by asking questions and reading existing documents. The
analysts have to uncover the real needs of the user even if they don’t know them clearly. During
analysis it is essential that a complete and consistent set of specifications emerge for the system.
Here it is essential to resolve the contradictions that could emerge from information got from
various parties. This is essential to ensure that the final specifications are consistent.
Problem recognition
Evaluation and synthesis
Modeling
Specification
Review
Each Requirement analysis method has a unique point of view. However all analysis
methods are related by a set of operational principles.
They are
11
The models that depict information, function and behavior must be partitioned in a hierarchical
or layered fashion.
The analysis process must move from essential information to Implementation
detail
12
3. Hardware and Software Specifications
2. Memory : 2 GB RAM
3. Monitor : Mono/Color
b) Monitor
13
4. Implementation / Coding
VISUAL STUDIO CODE
Visual Studio Code is a streamlined code editor with support for
development operations like debugging, task running, and version control. It
aims to provide just the tools a developer needs for a quick code-build-debug
cycle and leaves more complex workflows to fuller featured IDEs, such as
Visual Studio IDE
Installation
https://code.visualstudio.com/
After opening the website, click on the Download for Windows button. This will
download the VS code Setup Wizard on our system as an EXE file.
14
4.1.1 Run the VS code Setup Wizard
So the VS code Setup Wizard is downloaded successfully and we need to run it. Run
the file by referring to the screenshots provided below.
15
4.1.3 Accept the License Agreement
In this step, read the license agreement and choose whether we accept it or not. But
the installation continues only after we accept the agreement.
16
4.1.4 Select the Installation Location
Choose the location in our system to install the VS Code. If we are not bothering about
the location, go with the default location. But, at least 203.4 MB of free disk space is
required in the selected location.
17
4.1.5 Placing the Shortcuts
As a default, the VS code shortcut will be placed in the Start Menu folder. We can
change the destination or skip creating shortcuts.
18
4.1.6 Selecting Additional Tasks
We get a bunch of additional tasks to be performed before the installation begins.
Choose tasks we prefer and continue.
19
4.1.7 Install VS code on Windows 10
So we have set up everything and the VS code can be installed on our Windows 10
system now.
20
4.1.8 Finish and Launch
After the successful installation, we can launch the VS code on our system.
21
4.2 Node Js
Node.js is an open-source and cross-platform JavaScript runtime environment.
22
Node.js is an open-source and cross-platform runtime environment built on Chrome’s V8
JavaScript engine for executing JavaScript code outside of a browser. You need to remember
that NodeJS isn’t a framework, and it’s not a programming language. It provides an event-
driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building
highly scalable server-side applications using JavaScript.
4.3. Express.JS
Express.js, or simply Express, is a back end web application framework for building
RESTful APIs with Node.js, released as free and open-source software under the MIT
License. It is designed for building web applications and APIs. It has been called the de
facto standard server framework for Node.js
[6]
Express is a node js web application framework that provides broad features for building
web and mobile applications. It is used to build a single page, multipage, and hybrid web
application. It's a layer built on the top of the Node js that helps manage servers and
routes.
23
4.4 MongoDB
MongoDB allows teams to choose their cloud provider of choice while providing database
management that streamlines every aspect of database administration. It's easy to get started with
MongoDB Atlas, and it's free.
[5]
24
[2]
25
MVC Components
Following are the components of MVC −
Model-
The Model component corresponds to all the data-related logic that the user works with.
This can represent either the data that is being transferred between the View and Controller
components or any other business logic-related data. For example, a Customer object will
retrieve the customer information from the database, manipulate it and update its data back
to the database or use it to render data.
26
1. Name
2. Description
3. Price
4. Ratings
5. Images
6. Category
7. Stock
8. No. of Reviews-
a) User
b) Name
c) Rating
d) Comment
27
Controller
Controllers act as an interface between Model and View components to process all the
business logic and incoming requests, manipulate data using the Model component and
interact with the Views to render the final output. For example, the Customer controller
will handle all the interactions and inputs from the Customer View and update the
database using the Customer Model. The same controller will be used to view the
Customer data.
Middleware-
Middleware is software that enables one or more kinds of communication or connectivity
between applications or application components in a distributed network. By making it
easier to connect applications that weren't designed to connect with one another, and
providing functionality to connect them in intelligent ways, middleware streamlines
application development and speeds time to market.
28
Middlewares are-
1. AuthenticatedUser.js -It checks whether the user is authenticated or not and check
what the role of the user(admin) is.
2. catchAsyncerrors.js
3. error.js- It handles cast error, mongoose duplicate error, wrong jwt error, token
expire error
29
4.6 JSON Web Token(JWT)-
A JSON web token(JWT) is JSON Object which is used to securely transfer information
over the web(between two parties). It can be used for an authentication system and can also
be used for information exchange.The token is mainly composed of header, payload, and
signature. These three parts are separated by dots(.).
4.7 NodeMailer-
Nodemailer is the Node.js npm module that allows you to send email easily.
Approach:
Include the nodemailer module in the code using require(‘nodemailer’).
Use nodemailer.createTransport() function to create a transporter who will send mail. It
contains the service name and authentication details (user ans password).
Declare a variable mailDetails that contains the sender and receiver email id, subject and
content of the mail.
30
Use mailTransporter.sendMail() function to send email from sender to receiver. If message
sending failed or contains error then it will display error message otherwise message send
successfully.
React
React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. It lets you compose complex UIs from small and isolated pieces of code
called “components”.
JSX
JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface
should look like. By using JSX, we can write HTML structures in the same file that contains
JavaScript code.
31
Redux
Redux Toolkit is a set of tools that helps simplify Redux development. It includes
utilities for creating and managing Redux stores, as well as for writing Redux actions and
reducers. The Redux team recommends using Redux Toolkit anytime you need to use
Redux.
32
CSS (Cascading Style Sheet)
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in HTML. CSS describes how elements should be rendered on screen, on paper,
in speech, or on other media.
CSS is among the core languages of the open web and is standardized across Web browsers
according to W3C specifications.
CSS saves a lot of work. It can control the layout of multiple web pages all at once. External
stylesheets are stored in CSS files.
JAVASCRIPT
JavaScript is a text-based programming language used both on the client-side and server-side that
allows you to make web pages interactive. Where HTML and CSS are languages that give structure
and style to web pages, JavaScript gives web pages interactive elements that engage
Common examples of JavaScript that you might use every day include the search box on Amazon,
a news recap video embedded on The New York Times, or refreshing your Twitter feed.
JavaScript is used on both Frontend and Backend. JavaScript is the mostly used programming
language native to the web browser
33
Comparison between Java , Python and Nodejs[3] :
34
Comparision between React , AngularJS and Angular2[1] :
35
4.9 Stripe-
Stripe is a payment services provider that lets merchants accept credit and debit cards or
other payments. It is used by some of the world’s largest companies, including Amazon
and Shopify. Stripe payments are best suited for business owners who do much of their
business online, as most of its unique features — such as its open application programming
interface and ability to accept more than 135 currencies — are primarily relevant to online
sales.
[4]
36
5. Control Flow Graphs
37
5.2 Control Flow Graph of the User
38
6. Implementation
6.1 This UI will be visible on opening the Web Application.
This is the UI of the application which opens up first when we open the web Application
in the web browser Here is a search tab which would show day to day products that the
users will be interested in buying.
39
6.3 Filters Used-
6.4 Cart
40
6.5 Login Page
41
6.6 Shipping Details
42
6.7 Order Placed
43
7. GREEN IMPLEMENTATION IN APPLICATION
Green computing (also known as green IT or sustainable IT) is the design, manufacture, use and
disposal of computers, chips, other technology components and peripherals in a way that limits the
harmful impact on the environment, including reducing carbon emissions and the energy
consumed by manufacturers, data centers and end-users. Green computing also encompasses
choosing sustainably sourced raw materials, reducing electronic waste and promoting
sustainability through the use of renewable resources.
• No use of third party and suspicious library for implementation of any feature in
the application
Migrating workloads to a public cloud creates an instant return on sustainability efforts, with an
average 84% immediate reduction in carbon emissions as a result. This reduction results from a
combination of factors, including the fact that cloud data centers use less physical space and
resources than those on-premises; the use of more efficient servers and higher server usage; and
the fact that public cloud providers are themselves committed to sustainable infrastructure and a
reduced carbon footprint, which enhances and supports their customers’ efforts as well.
Consider serverless
Businesses can amplify that carbon reduction by selecting a database platform that aligns with
their energy goals. MongoDB is currently in 80-plus regions, with 12 of those regions being
powered by renewable energy as well as being low-carbon and/or zero-waste. Furthermore,
MongoDB Atlas Serverless instances are optimized to use the underlying infrastructure — RAM,
CPU, disks, network bandwidth — to its maximum before consuming additional cloud resources.
Currently, 60% of organizations globally have yet to adopt any serverless technology; however,
pushing to serverless not only helps to reduce carbon footprint but also can provide a competitive
advantage.
Databases require management on many fronts, from transactional data and relational data to
search, analytics, graph use cases, time series, and more. Each of these facets is frequently handled
44
in its own separate database, necessitating management, monitoring, and resources. Not only is
this a technical pain point, but it can also affect the environmental goals of an organization and its
carbon footprint overall.
To start, fewer workloads result in a lower carbon emission total. Thus, simply paring down the
number of databases used is an easy way to reduce the consumption of resources and Assistantd
carbon emissions. MongoDB Atlas brings all of those requirements into a single, consolidated
database platform that solves for disparate and siloed databases and reduces resources and
consumption.
The greenest energy is the energy that is never used in the first place. Toward that end,
organizations can work to shift their architectural strategy to be more mindful of carbon and energy
considerations, and adjustments can be made to reduce usage without affecting performance.
For example, about 40% of instances are at least one size larger than needed. Businesses can reduce
such excess consumption by avoiding over-provisioned databases. This change can be done easily
through automatic scaling with MongoDB Atlas cluster and storage auto-scaling, as well as with
Atlas Triggers, which allows users to schedule scaling events.
Continue to iterate
These major adjustments to the structure of your database architecture represent impactful steps
toward creating a sustainable database, but there are many, more granular ways to improve
database technology and better align with environmental goals. Implementing smaller changes will
chip away at carbon emissions and create significant impact over time.
Consider the impact of data transfer over longer distances and find new regions to house data.
Determine the proper location of data and leverage the flexibility to deploy in any region, which
grants more control over replication of data.
Use Atlas Global Clusters to ensure that data stays within a defined geography, thereby minimizing
the infrastructure required to deploy a globally distributed application.
Employ Atlas Data Federation to minimize the need to replicate data between cloud object storage
and Atlas by allowing users to query both sources from a single interface.
Leverage Atlas Analytics Nodes to offload workloads to separate nodes. And note that, with
MongoDB 6.0, you can manually size those nodes to trim even more resources.
Use analytic nodes that are deployed in more environmentally sustainable regions.
45
Leverage Atlas’s many dashboards and alerts to be proactively notified when system resources are
rising beyond acceptable thresholds.
Introduce an “eco mode” in your apps, giving users the ability to agree to potentially lower
response times in exchange for a positive environmental impact.
Avoid peak times for predictable workloads; schedule these during a time that will not drive
over-consumption.
Use data tiering; users can automate data lifecycles using Atlas Online Archive and reduce
exhaustion of resources
.
46
8. LIMITATIONS OF APPLICATION
• An online Internet connection is required to run this application. Users would not be able
to run this web application without active internet connection.
• Only the developer can access the adding products line not any simple users there is no
frontend user interface designed by us.
• No product recommendation based on previous order history because the model is based
on Machine Learning Algorithms but we haven't used any sort of ML in this project.
47
9. OUTCOMES AND LEARNINGS
Get to learn more about React, MongoDB and understand the implementation of CRUD
(Create,Read, Update, Delete) operation in database.
Learn different types of Database Operation and their use cases in different situation.
Learn how to integrate APIs in Web Applications and how to handle them.
Understand more about the APIs and Express language and how to make our app more
efficient.
How to read official documentation of different NPM packages and also some of
48
11. INSTALLATION OF PROJECT
1. Firstly install Visual studio to your System as explained in the introductory part of
Implementation and code .
5. Run the command npm install to install all the packages that were required and are
present in the package.json file.
6. At last run npm start and you would see the project running on your localhost.
7. We will also be deploying this project in future then a user would be able to directly run
this project in any of the operating systems opening the browser.
49
12. CONCLUSION
The project exposed us to the latest technology in the area of Web Application
Development Thus, this project successfully demonstrated a web "Online Shopping
Website". I faced many challenges and problem during the development time. It was a nice
learning curve to work on Web Application Development .
We also acknowledged with great thanks to our project mentor "Dr. Jitender Kumar
Bhardwaj" for his most valuable suggestions & co- operations.
Development on MERN stack whatsoever We believe our time spent in research and
discovering it was well worth it and contributed to finding an acceptable solution to
implement features and fixing bugs in a fully functional Web Development Project . Two
main things that we’ve learned are the importance of our time-management skills and self-
motivation.
50
13. REFERENCES
References
[4]. Stripe
Image:https://www.google.com/search?q=stripe&rlz=1C1CHBF_enIN958IN958&sxsrf=ALiCzs
aPGDKRmj8YcXkJMPn_Xyz6LKDUiQ:1672685421429&source=lnms&tbm=isch&sa=X&ved
=2ahUKEwjl2PXixqn8AhWG5XMBHVWFAYYQ_AUoAnoECAEQBA&biw=1536&bih=714
&dpr=1.25#imgrc=qqBtpCMBTLCptM
[5]. MongoDB
Image:https://www.google.com/search?q=mongodb&rlz=1C1CHBF_enIN958IN958&sxsrf=ALi
CzsaA-wXU6aeBHXtp5Xhscol50--
x7Q:1672685497191&source=lnms&tbm=isch&sa=X&ved=2ahUKEwih7YWHx6n8AhWV33M
BHfq0CYgQ_AUoAXoECAEQAw&biw=1536&bih=714&dpr=1.25#imgrc=HDEhreUTw_Uae
M
51