DURGAPUR INSTITUTE OF MANAGEMENT AND SCIENCE

Formerly known as Bengal College of Engineering and Technology

A MINOR PROJECT ON
E-COMMERCE WEB APP WITH RECOMMENDATION SYSTEM

SUBMITTED BY:-

NAME:- ALOKE SHAW

U.ROLL:- 32401222025
REG.NO:- 223241010010

SUBJECT NAME:- INDUSTRIAL TRAINING AND MINOR PROJECT

SUBJECT CODE:- BCAD581

UNDER THE GUIDANCE OF

Mr. Rajat Patra
 DURGAPUR INSTITUTE OF MANAGEMENT AND SCIENCE
Formerly known as BENGAL COLLEGE OF ENGINEERING AND TECHNOLOGY

CERTIFICATE OF GUIDE

This is to certify that the project entitled:

E-COMMERCE WEB APP WITH RECOMMENDATION SYSTEM

Has been completed successfully by

Aloke Shaw BCA 5th semester.

DURGAPUR INSTITUTE OF MANAGEMENT AND SCIENCE

Bidhan nagar,Durgapur-713212

Guide Principal
Mr.Rajat Patra Dr.Praveen Kumar Singh
 ACKNOWLEDGEMENT

A fully working project is very complex as well as very tough to develop. I

needed 4 long months to complete my project. During this long
four-month journey I have gotten so much help and expertise from my
respected teachers, experts and from many of my friends.

I would like to express my gratitude and appreciation to all those who

gave me the possibility to complete this project. Special thanks are due
to my supervisor Mr. Rajat Patra sir whose help, stimulating suggestions
and encouragement helped me in the process and in making this project
a reality.

Many thanks go to all lecturers and supervisors who have given their full
effort in guiding me in achieving the goal as well as their encouragement
to maintain my track progress. My profound thanks go to all my
classmates, especially to my friends for spending their time helping and
giving support whenever I need it in fabricating my project.

ALOKE SHAW
Uni Roll:-32401222025
Department of Computer Application
Durgapur Institute of Management and Science
 INDEX

SL.NO TOPIC PAGE.NO

1. INTRODUCTION 6

2. REVIEW OF LITERATURE 7

3. REPORT ON PRESENT INVESTIGATION 8

4. PROBLEM STATEMENT 9

5. METHODOLOGY 10

6. SOFTWARE REQUIREMENT 13

7. DEVELOPMENT OF FRONT-END 14

8. DEVELOPMENT OF BACK-END 19

9. DEVELOPMENT OF DATABASE 20

10. DFD-LEVEL:1 22

11. DFD-LEVEL:2 23

12. SNAPSHOT OF APPLICATION 24

13. LIMITATION 31

14. FUTURE SCOPE 32

15. CONCLUSION 33
 1. Introduction

E-COMMERCE-WEB APP-WITH RECOMMENDATION

SYSTEM

Shopify is an e-commerce website that offers a wide

range of products and services across various
categories, such as fashion, electronics, home and
kitchen, beauty, health, books, sports, and more. You
can browse through thousands of items from hundreds
of brands and sellers, compare prices and features,
read reviews and ra�ngs, and place your order with
just a few clicks. You can also enjoy fast and free
delivery, easy returns and refunds, secure payment
op�ons, and 24/7 customer support.
Shopify is your one-stop shop for all your online
shopping needs. Whether you are looking for a gi� for
someone special, a treat for yourself, or a solu�on for
your everyday problems, you will find it here at
Shopify.
 2. Review of literature
E-commerce is the process of buying and selling products and
services over the internet. E-commerce has become a popular
and convenient way of shopping for consumers and a profitable
and competitive way of doing business for sellers. However,
ecommerce also poses many challenges and opportunities for
both parties, such as website design, customer behavior,
security, trust, culture, and regulation.

Many researchers have studied various aspects of e-commerce

from different perspectives and disciplines. This review aims to
summarize some of the existing literature on e-commerce,
focusing on the following topics:

- E-commerce website evaluation: how to measure and

improve the quality, usability, and effectiveness of e-commerce
websites
- E-commerce website design: how to design e-commerce
websites that are attractive, user-friendly, and culturally
appropriate
- E-commerce implementation: how to implement e-
commerce successfully in different contexts and industries
- E-commerce challenges and opportunities: how to deal with
the issues and trends that affect e-commerce development and
performance

One of the key factors that determines the success or failure of

ecommerce is the quality of the website. A good e-commerce
website should provide a satisfying and enjoyable shopping
experience for the customers, as well as a profitable and
competitive platform for the sellers. Therefore, it is important to
evaluate and improve the quality of e-commerce websites using
various criteria and method
 3. Report on present
investigation
E-commerce website development is the process of creating
and maintaining online platforms that enable buying and selling
of products and services over the internet. E-commerce
website development is a dynamic and evolving field that
requires constant innovation and adaptation to meet the
changing needs and expectations of customers, businesses,
and regulators. In this report, we will discuss some of the
current trends and issues in e-commerce website development
that are shaping the future of online commerce.

The investigation utilized react, material UI, html, css,

javascript, email.js, chakra UI for developing the frontend of the
web application.
Nodejs, expressjs, are used for developing the backend of the
web application and Mongodb for database.

Overall, the present investigation successfully developed a web

application for e-commerce.
 4. Problem statement
Online shopping is a popular and convenient way of buying products and
services. However, online shoppers often face many issues and
challenges that affect their shopping experience and satisfaction. Some
of these issues are:

- Limited product variety and availability

- Inaccurate or misleading product descriptions and images
- Low-quality products and services
- Hidden or extra fees and charges
- Long delivery times and unreliable tracking
- Difficult or impossible returns and refunds
- Unresponsive or rude customer service and support

These issues cause online shoppers to lose trust and confidence in

online shopping, and discourage them from buying more products and
services online. They also reduce the profitability and reputation of
online businesses.

Shopify is an e-commerce website that aims to address these issues by

providing online shoppers with a high-quality, trustworthy, and enjoyable
online shopping experience. Shopify offers a large and diverse selection
of products and services across various categories, such as fashion,
electronics, home and kitchen, beauty, health, books, sports, and more.
Shopify also ensures that all its products and services are accurately
described and displayed, and that they meet the highest standards of
quality and safety. Shopify also offers transparent and fair pricing, fast
and free delivery, easy and flexible returns and refunds, and friendly and
helpful customer service and support. Shopify also engages with its
customers through its social media platforms and blog, where it shares
useful information, advice, recommendations, and offers. Shopify also
rewards its customers with contests and giveaways, where they can win
amazing prizes and discounts.
 5. METHODOLOGY
i) Agile Architecture The primary objective of this project is
to develop a website that can effectively display sentiment
analysis of a specific Twitter trend, as well as provide
comprehensive statistics related to it. To achieve this goal, we
have broadly divided the project into three distinct parts:
webcrawler, AI model, and web development phase. The
webcrawler will gather data related to the Twitter trend, the AI
model will perform sentiment analysis on the collected data,
and the web development phase will handle the design and
implementation of the website itself. For the entirety of the
project development phase, the Agile model will be
implemented in accordance with the SCRUM framework. As
the whole project could be divided into microprojects, which
were developed in parallel and subsequently integrated at the
end to obtain the final result. This SCRUM framework follows
the given image format:

Based on the provided image, it is evident that the initial section

is the "Product Backlog". The Product Backlog represents a
collection of prioritized features. It comprises a list of
microprojects that will be completed during the course of
product development. In our case product backlog has the
following steps:
PRODUCT BACKLOG:
• Develop a web scraper to scrape social media data and
gather text data for analysis.
• Develop a deep learning neural network for sentiment
analysis using B-LSTM (Bidirectional Long Short Term
Memory).
• Develop a front-end UI for the application where users can
interact and which can display the sentiment analysis
results.
• Develop a back-end server and API end points for the
application that can interact with the front-end and the deep
learning model. Integrate the web scraper and
neural network model with the back-end server to
automatically scrape social media data and analyse the
sentiments.
• Deploy the application to a cloud platform for scalability and
accessibility

SPRINT PLANNING:
The second step in the agile development process is the spring
planning step. Once the product backlog has been defined, the
team can commence planning for the first sprint. A sprint is a
time-boxed period of work, typically lasting between one to four
weeks, during which the team focuses on a subset of the product
backlog. In our as we keep that time for few days.

SPRINT BACKLOG:
A sprint backlog is a list of items from the product backlog that
the development team plans to deliver during the upcoming
sprint. It is created during the sprint planning meeting, where the
development team selects a set of items from the product
backlog that they believe they can complete during the sprint.
The sprint backlog is a living document that is updated
throughout the sprint as the team progresses through their work.
It is used as a tool to track the progress of the team's work and to
ensure that they are on track to meet their sprint goal.
In this case we took one objective at a time from the product
backlog.
SPRINT EXECUTION:
This is the working phase where each member does their own
share of code or work on their part of project, for the allotted
agreed on sprint planning.
After completing all the above steps, we will get a subset of the
project which was deployable but may require farther fixing for
desired outcome.

SPRINT REVIEW AND RETROSPECTIVE:

At the end of the sprint, the team will hold a sprint review
meeting to demonstrate the work that has been completed and
get feedback from stakeholders (in this case the team was
stakeholder). The team will also hold a sprint retrospective
meeting to reflect on the sprint and identify areas for
improvement.
We keep repeating these steps until we do not reach our end
product.
To clear the scrum backlog we have to complete each micro
project as per scheduling.
 6.Software requirement
Minimum hardware requirements:
Processor:- intel-i3--2.2-ghz and above
Ram:- 4-gb and above
Storage:- 32-gb and above
7. Development of front-end
UI for the application
The objective is to develop a modern and responsive frontend
UI using ReactJS for the E-commerce web Application. The UI
will allow users to interact with the application and view the
sentiment analysis results. The frontend web-application UI
needs to be user-friendly and visually appealing to the users.

Technologies Used:

React:
We chose React as a CSR library to develop our frontend
application.
React is a popular and powerful JavaScript library for building
user interfaces. It allows developers to create reusable
components that can handle data changes and user
interactions efficiently. In this section, we will explain why we
chose React as the frontend framework for our application.
One of the main reasons for choosing React is its declarative
and component-based approach. It also enables us to break
down the user interface into smaller and independent pieces of
code that can be reused and tested separately. This improves
the modularity, maintainability, and readability of our codebase.
Another reason for choosing React is its performance and
scalability. React uses a virtual DOM (Document Object Model)
to render the user interface in memory before updating the
actual DOM. This minimizes the number of DOM manipulations
and reduces the rendering cost. React also implements a
diffing algorithm that only updates the parts of the DOM that
have changed, which further enhances the performance. React
can handle complex and dynamic user interfaces without
compromising on speed or user experience.
We decided to build the frontend in CSR architecture.
Client-Side Rendering (CSR):
Client-Side Rendering (CSR) in React is the process of
rendering web content on the client-side (i.e., the user's
browser) using JavaScript. With CSR, when a user visits a
React application, the server sends only the initial HTML file,
and the rest of the content is loaded and rendered on the
clientside.
CSR in React provides several benefits, such as improved
performance and faster page load times, as the client-side
rendering allows for the application to load and render only the
necessary content dynamically, rather than requesting a new
HTML file from the server. Additionally, with CSR, it is easier to
build interactive and dynamic user interfaces, as React
components can be updated and re-rendered dynamically
based on user interactions.

HTML:

HTML stands for HyperText Markup Language. It is the

standard language for creating web pages and web
applications that can be displayed on the internet. HTML was
invented by Tim Berners-Lee in 1991 as a way to share
information across different computers and networks. HTML is
based on the concept of hypertext, which means that text can
contain links to other texts or resources.

HTML consists of tags that define the structure and content of a

web page. A tag is a piece of code that starts with a left angle
bracket (<) and ends with a right angle bracket (>). Tags
usually come in pairs, with an opening tag and a closing tag.
For example, <p> and </p> are tags that indicate a paragraph.
Some tags are self-closing, which means they do not need a
closing tag. For example, <img /> is a tag that inserts an image.

HTML also allows the use of attributes and styles to modify the
appearance and behavior of the web page elements. Attributes
are additional information that are added to the tags. For
example, <img src="logo.png" alt="Logo" /> is a tag with two
attributes: src and alt. Attributes provide extra information about
the element, such as the source of the image and the
alternative text for screen readers. Styles are rules that define
how the elements should look like. Styles can be written inside
the HTML tags using the style attribute, or in a separate file
using CSS (Cascading Style Sheets).

HTML works together with other technologies, such as CSS

and JavaScript, to create dynamic and interactive web pages.
CSS is a language that controls the layout, colors, fonts, and
animations of the web page elements. JavaScript is a
programming language that adds functionality, interactivity, and
logic to the web page. HTML, CSS, and JavaScript are the core
technologies of web development.

CSS:

CSS stands for Cascading Style Sheets. It is a language that

controls the presentation of web pages and web applications.
CSS allows web developers to separate the content and
structure of a web page (written in HTML) from its appearance
and layout (written in CSS). CSS can also be used to create
animations, transitions, and effects for the web page elements.

CSS consists of rules that define how the web page elements
should look like. A rule is a combination of a selector and a
declaration. A selector is a way to identify which element or
elements the rule applies to. A declaration is a way to specify
the style properties and values for the selected element or
elements. For example, p {color: blue;} is a rule that sets the
text color of all paragraphs to blue.

CSS also allows the use of variables, functions, and media queries
to create dynamic and responsive styles. Variables are names that
store values that can be reused throughout the style sheet.
Functions are expressions that perform calculations or
transformations on values. Media queries are conditions that test
the characteristics of the device or browser, such as the screen
size, resolution, or orientation. These features help web devs to
create styles adapting to different situations & user preferences.
CSS works together with HTML and JavaScript to create
interactive and attractive web pages and web applications. CSS
can be written inside the HTML tags using the style attribute,
inside the HTML document using the <style> element, or in a
separate file using the <link> element. CSS can also be
manipulated by JavaScript using the DOM (Document Object
Model) API (Application Programming Interface).

Javascript:

A possible paragraph on JavaScript is:

JavaScript is a programming language that adds functionality,
interactivity, and logic to web pages and web applications.
JavaScript can run on both the browser and the server, and can
communicate with other technologies, such as HTML, CSS,
and APIs (Application Programming Interfaces). JavaScript can
also be used to create desktop, mobile, and game applications.

JavaScript consists of statements that instruct the computer to

perform certain tasks. A statement is a piece of code that ends
with a semicolon (;). Statements can include variables,
operators, expressions, functions, objects, arrays, loops,
conditions, and events. For example, var x = 10; is a statement
that declares a variable named x and assigns it the value 10.

JavaScript also allows the use of libraries and frameworks to

extend its capabilities and simplify its development. Libraries
are collections of pre-written code that provide additional
functionality and features for JavaScript. Frameworks are
collections of pre-written code that provide a structure and a
pattern for JavaScript development. Some of the popular
libraries and frameworks for JavaScript are jQuery, React,
Angular, Vue, Node.js, and Express.js.

JavaScript works together with HTML and CSS to create

dynamic and interactive web pages and web applications.
JavaScript can be written inside the HTML tags using the script
attribute, inside the HTML document using the <script>
element, or in a separate file using the <script> element with
the src attribute. JavaScript can also manipulate HTML and
CSS using the DOM (Document Object Model) API.

JavaScript is easy to learn and widely supported by browsers

and web servers. JavaScript is case-sensitive, which means
that uppercase and lowercase letters have different meanings.
For example, x and X are two different variables. JavaScript is
also flexible, which means that it allows different ways to write
and execute code. For example, semicolons are Received
message.
 8. Development of
back-end for Application
Nodejs:

Node.js is a runtime environment that allows JavaScript to run

on the server. Node.js is based on the V8 engine, which is the
same engine that powers Google Chrome and other browsers.
Node.js enables JavaScript to perform input/output (I/O)
operations, such as reading and writing files, accessing
databases, and making network requests.

Node.js is designed to be fast, scalable, and efficient. Node.js

uses an event-driven and non-blocking model, which means
that it can handle multiple requests without waiting for the
previous ones to finish. Node.js also uses a single-threaded
and asynchronous model, which means that it can execute
multiple tasks without creating new threads or processes.
Node.js also supports concurrency and parallelism, which
means that it can run multiple instances or workers to handle
the workload.

Node.js is widely used for creating web applications, especially

real-time and data-intensive applications, such as chat apps,
streaming apps, social media apps, and online games. Node.js
can also be used for creating desktop, mobile, and
commandline applications. Node.js has a large and active
community of developers and contributors, who create and
maintain various libraries and frameworks for Node.js. Some of
the popular libraries and frameworks for Node.js are Express.js,
Socket.io, MongoDB, React Native, Electron, and Nest.js.

Expressjs:

Express.js is a web framework for Node.js that simplifies and

enhances the development of web applications. Express.js
provides a set of features and tools that make it easy to create
and manage web servers, routes, middleware, templates, and
APIs. Express.js also supports various plugins and extensions
that add more functionality and integration with other
technologies.

Express.js is designed to be fast, lightweight, and flexible.

Express.js uses a minimalist and unopinionated approach,
which means that it does not impose any specific structure or
convention on the web application. Express.js also allows
developers to customize and configure every aspect of the web
application according to their needs and preferences.
Express.js also supports the MVC (Model-View-Controller)
pattern, which helps to organize the web application into
separate components that handle data, logic, and presentation.

Express.js is widely used for creating web applications,

especially RESTful APIs (Application Programming Interfaces)
that communicate with databases, front-end frameworks, and
other services. Express.js can also be used for creating static
websites, dynamic websites, single-page applications, and
fullstack applications. Express.js has a large and active
community of developers and contributors, who create and
maintain various libraries and frameworks for Express.js. Some
of the popular libraries and frameworks for Express.js are
Mongoose, Passport, Helmet, Morgan, and Next.js.
 9. Development of
database for Application
Mongodb:

MongoDB is a database system that stores and manages data

in the form of documents. A document is a collection of key
value pairs that can contain various types of data, such as
strings, numbers, arrays, objects, and binary data. Documents
are flexible and dynamic, which means that they can have
different fields and structures within the same collection.
Documents are grouped into collections, which are similar to
tables in relational databases. However, unlike relational
databases, collections do not enforce any schema or rules on
the documents. Collections are stored in databases, which are
similar to schemas in relational databases. However, unlike
relational databases, databases do not have any relationships
or constraints between the collections.

MongoDB is designed to be scalable, flexible, and performant.

MongoDB uses a distributed and sharded architecture, which
means that it can store and process large amounts of data
across multiple servers or clusters. Each server or cluster can
host one or more shards, which are partitions of the data. Each
shard can have one or more replicas, which are copies of the
data that provide redundancy and fault tolerance. MongoDB
also uses a schemaless and dynamic model, which means that
it does not require predefined or fixed structures for the
documents. This allows MongoDB to adapt to changing data
and application requirements without affecting performance or
availability. MongoDB also supports various features and tools
that enhance its functionality and usability, such as indexing,
aggregation, transactions, replication, backup, security, and
monitoring.
 10. DFD
Level-1(User Side)
Level 2: Admin side
LOGIN PAGE

HOME PAGE
CATEGORIES FILTER PAGE

Shopping Cart Page

Checkout Details Page
 Payment Page

Checkout Successful Page

Order History Page

Order Details Page

Admin Earning Page

Add new product Page

All product Page
 13. Limitations
Security: Security is one of the main concerns for Shopify
website users, as they have to provide their personal and
financial information online. Shopify website may face
cyberattacks, data breaches, hacking, phishing, or malware
that can compromise the confidentiality, integrity, and
availability of the information. Shopify website users may also
fall victim to fraud, identity theft, or scams that can cause
financial losses or damages.

Privacy: Privacy is another issue for Shopify website users, as

they have to share their personal details, such as name,
address, phone number, email, and so on with the sellers.
Shopify website may not have adequate measures to protect
the privacy of the users or may collect and use the user data
without permission or transparency. Shopify website users may
also face unwanted marketing messages, spam emails, or
cookies that track their online activities and preferences.

Product suitability: Product suitability is a challenge for Shopify

website transactions, as they do not allow the users to
physically examine or try the products before buying them.
Shopify website users may have problems with the size, fit,
color, texture, or functionality of the products they buy online.
E-commerce website users may also receive products that do
not match the description, image, or specification on the
platform. Shopify website users may also face difficulties in
returning or exchanging the products that do not meet their
expectations or needs.
 14. Future Scope
There are multiple things that could be done to improve the user
experience of this product.

Artificial intelligence: Shopify website can use artificial

intelligence (AI) to personalize and optimize the customer
experience and the business operations. AI can help Shopify
website to provide relevant recommendations, offers, and
content, based on user behavior, preferences, and feedback. AI
can also help Shopify website to automate tasks such as
inventory management, pricing, marketing, and customer
service.

Voice search: Voice search is a technology that allows users to

search for information or products using voice commands
instead of typing. Voice search can help Shopify website to
enhance customer convenience, accessibility, and
engagement. Voice search can help Shopify website to reach
more customers who prefer using voice assistants, such as
Alexa, Siri, or Google Assistant. Voice search can also help
Shopify website to optimize their SEO (Search Engine
Optimization) and SEM (Search Engine Marketing) strategies
for voice queries.

Augmented reality: Augmented reality (AR) is a technology that

creates immersive and interactive digital environments that
overlay or replace the physical reality. AR can help Shopify
website to engage customers with realistic and lifelike product
demonstrations, simulations, and trials. AR can help Shopify
website to increase customer confidence, trust, and conversion
by allowing customers to visualize how products look and fit
before buying.
 CONCLUSION
In conclusion, the development of the E-commerce
web app Shopify using react, material UI, html, css,
javascript, email.js, chakra UI, Nodejs, expressjs,
Mongodb has been successful. The application
provides users with an easy-to-use interface to great
shopping experience through internet. The evaluation
of web application on a dataset. We face some
challenges while development of the Shopify
application like order checkout, payment integration
and the main goal was achieved to create online
shopping application. The best part of this project is it
provide you products recommendation on the basic of
your search. This application will reach more and more
people. The current version of this application is 0.0.1
and we will launched next version soon with more
advance feature which is mention in future scope.