NXT Shop Documentation

Nxt Shop : Shopping Application
A project report submitted in partial fulfilment of the

requirement for the award of the degree
OF
Master of Computer Application (MCA)
A Project Report:
Under the guidance of:
Dr. I. N. Sahu
Submitted By:
Name : RAJEEV RANJAN
Roll No.: 21MC515224
DR. SHYAMA PRASAD MUKHERJEE UNIVERSITY, RANCHI

Month August Year 2023
1|Page
ACKNOWLEDGEMENT
A task or project cannot be completed alone. It requires the effort of many

individuals. I take this opportunity to thank all those who helped me complete this
project.
I would like to express my sincere thanks to Dr. Anita Kumari Co-ordinator, Dept.
of MCA, DSPMU, Ranchi who helped a lot in offered various prompt suggestions
during this project timely and properly finished.
I express my sincere gratitude to Dr. I.N. Sahu for giving us the opportunity to
undergo this project. I further thank his for lending a helping hand when it comes to
solving my problems related to the project. This project would not have been
possible without his valuable time and support.
I am also thanks to all Faculty members of Dept. of MCA, DSPMU, Ranchi for
helping me in the preparation of the project.
I can’t forget to thanks my friends who are very helpful to me directly or indirectly
during development of this project.
At the end I also want to pay my heartiest thanks to the whole family of out
sponsoring organization that always seem prompt to help and create a friendly
environment.
Name: RAJEEV RANJAN
2|Page
DECLARATION
This is to declare that this project report titled Nxt Shop : Shopping Application
has been developed by me for the major project of final semester of Master of
Computer Application (MCA) of Dr. Shyama Prasad Mukherjee University, Ranchi
I declare that this project is my own work by the best of my knowledge and belief.
This project has never been submitted to any University or Institute for the partial
fulfilment of the award of any degree or diploma.
3|Page
BONAFIDE CERTIFICATE
This is to certify that this project titled Nxt Shop : Shopping Application is the
bonafide work of RAJEEV RANJAN, 21MC515224 final semester student of Master
of Computer Application (MCA) of Dr. Shyama Prasad Mukherjee University, Ranchi
that carried out the project work under my supervision.
SIGNATURE
NAME: DR. I.N. SAHU
(GUIDE)
4|Page
EXAMINER’S CERTIFICATION
The project report titled Nxt Shop : Shopping Application of RAJEEV RANJAN,
21MC515224 final semester student of Master of Computer Application (MCA) of Dr.
Shyama Prasad Mukherjee University, Ranchi.
Is approved and is acceptable in quality and form.
External Examiner Internal Examiner

(Signature) (Signature)
Name: Name:
Designation: Designation:
5|Page
UNIVERSITY DEPARTMENT CERTIFICATE
This is to declare that this project titled Nxt Shop : Shopping Application submitted
in partial fulfilment of the requirements for the degree of Master of Computer
Application (MCA) of Dr. Shyama Prasad Mukherjee University, Ranchi.
Has worked under my supervision and that guidance and that no part of this report
has been submitted for the award of any other Degree, Diploma, fellowship or other
similar titles or prizes and that the work has not been published in any Journal of
Magazine.
Roll No. : 21MC515224 Certified
6|Page
Abstract
The project "Nxt Shop" is an innovative and user-centric online shopping application
designed to provide a seamless and engaging shopping experience for users across
various platforms. The app aims to bridge the gap between traditional retail and the
convenience of online shopping by offering a wide range of products, intuitive
navigation, secure transactions, and personalized recommendations.
The key objectives of this project include:

User-Friendly Interface: Nxt Shop focuses on an intuitive and visually appealing user
interface, making it easy for users to browse, search for products, and navigate
through various categories.
Comprehensive Product Catalogue: The app features a diverse product catalog,

covering a wide range of categories such as electronics, fashion, home essentials,
beauty, and more, ensuring that users can find what they need.
Personalization and Recommendations: Nxt Shop employs advanced algorithms to

analyze user preferences and purchase history, providing personalized product
recommendations to enhance the shopping experience.
Secure Transactions: Security is a top priority, with robust encryption and secure
payment gateways integrated to ensure safe and secure transactions for users.
Multi-Platform Support: Nxt Shop is designed as a cross-platform application,

catering to both mobile and web users, allowing seamless shopping on
smartphones, tablets, and desktops.
Efficient Order Management: The app streamlines the order management process,
providing users with real-time order tracking, order history, and easy returns
management.
Seller Integration: Nxt Shop enables sellers to showcase their products, manage
inventory, and interact with customers, fostering a vibrant online marketplace.
7|Page
Preface
This report is study for Master of Computer Application, carried out from April 2023
to July 2023 in Dr. Shyama Prasad Mukherjee University, Ranchi, Jharkhand. The
study is about how to add items in cart . Shopping cart software is a piece of e-
commerce software on a web server that allows visitors to have an Internet
site to select items for eventual purchase. The software allows online shopping
customers to accumulate a list of items for purchase.
8|Page
Content
 Frontpage
 Acknowledgement
 Declaration
 Bonafide Certificate
 External Examiners Certificate
 University Department Certificate
 Introduction
 Abstract
 Preface
 Content
 SRS
 Software and Hardware used
 Data Flow Diagram
 Entity-Relationship Diagram
 Design
 Coding
 Conclusion
 Bibliography
9|Page
INTRODUCTION
Shopping cart software is a piece of e-commerce software on a web

server that allows visitors to have an Internet site to select items for eventual
purchase.
The software allows online shopping customers to accumulate a list of items
for purchase. At the point of sale, the software typically calculates a total for the
order, including freight transport, postage as well as packaging and labeling.
Associated taxes are calculated as applicable. This software also allows for a final
review of the shortlisted purchase and the choice for a user to modify the purchase.
The data is used in online marketing particularly in the form of abandoned carts.
History
The development of web shop systems took place right after
the Internet became a mass medium. This was a result of the launch of
the browser Mosaic in 1993 and Netscape in 1994. It created an environment in
which web shops were possible. The Internet therefore acted as the key
infrastructure developments that contributed to the rapid diffusion of the e-
commerce, a subset of e-business that describes all computer-aided business
transactions. In 1998 a total of 11 e-business models were observed, one of which
was the e-shop business model for a B2C (business-to-consumer) business also
called the “online shop” The two terms “online shop” and “electronic” or “e-shop” are
used interchangeably. The term “online shopping” was invented much earlier in
1984. Today the term primarily refers to the business-to-consumer transactional
business. In order to enable “online shopping” a software system is needed. Since
“online shopping”, in the context of the B2C business model, became broadly
available to the end consumer, internet-based “online shops” evolved.
Goal
Shopping has long been considered a recreational activity by many. Shopping
online is no exception. The goal of this application is to develop a web based
interface for online retailers. The system would be easy to use and hence make
the shopping experience pleasant for the users. The goal of this application is:
To develop an easy to use web based interface where users can search for
products, view a complete description of the products and order the products.
10 | P a g e
A search engine that provides an easy and convenient way to search for
products specific to their needs. The search engine would list a set of products
based on the search term and the user can further filter the list based on various
parameters.
An AJAX enabled website with the latest AJAX controls giving attractive and
interactive look to the web pages and prevents the annoying post backs.
Drag and Drop feature which would allow the users to add a product to or
remove a product from the shopping cart by dragging the product in to the
shopping cart or out of the shopping cart.
A user can view the complete specification of the product along with various
images and also view the customer reviews of the product. They can also write
their own reviews.
Need of the application

There are large numbers of commercial Online Shopping websites offering large
number of products tailored to meet the shopping interests of large number of
customers. These online marketplaces have thousands of products listed under
various categories.
Problem:
The basic problems with the existing systems are the non-interactive
environment they provide to the users.
The use of traditional user interfaces which make continuous post backs to the
server; each post back makes a call to the server, gets the response and then
refreshes the entire web form to display the result. This scenario adds an extra
trade off causing a delay in displaying the results
A search engine that would display the results without allowing the users to
further filter the results based on various parameters. Use of traditional and non
user friendly interfaces that are hard to use.
Solution:
The motive of this Nxt Shop:Online Shopping Application is to allow the user to
play with the search tool and create different combinatorial search criterion to
perform exhaustive search.
Making the application AJAX enabled gets rid of these unnecessary delays
letting the user to perform exhaustive search. The users of this application can
easily feel the difference between the Ajax empowered user interfaces vs.
traditional user interfaces.
Provide Interactive interface through which a user can interact with different
areas of application easily.
A search engine that provides an easy and convenient way to search for
products specific to their needs. The search engine would list a set of products
11 | P a g e
based on the search term and the user can further filter the list based on various
parameters.
Provide Drag and Drop feature thereby allowing the user to add products to or
remove products from the shopping cart by dragging the products in to or out of
the shopping cart.
Scope
The current system can be extended to allow the users to create accounts and
save products in to wish list.
The users could subscribe for price alerts which would enable them to receive
messages when price for products fall below a particular level.
The current system is confined only to the shopping cart process.
It can be extended to have a easy to use check out process.
Users can have multiple shipping and billing information saved.
During checkout they can use the drag and drop feature to select shipping and
billing information.
Features of Nxt Shop:
1. Secure registration and profile management facilities for Customers.
2. Browsing through the e-Mall to see the items that are there in each category
of products like Apparel, Kitchen accessories,
Bath accessories, Food items etc.
3. Creating a Shopping cart so that customer can Shop N number of items and
checkout finally with the entire shopping cart
4. Customers should be able to mail the Shop about the items they would like to
see in the Shop
5. Secured mechanism for checking out from the Shop( Credit card verification
mechanism).Updates to customers about the Recent Items in the Shop.
12 | P a g e
6. Uploading Most Purchased Items in each category of products in the Shop
like Apparel, Kitchen accessories, Bath accessories,
Food items etc.
Benefits of Nxt Shop

Shopping online has many benefits. Here are ten of the most important advantages.
1. Convenience
Convenience is the biggest perk. Where else can you comfortably shop at midnight
while in your pajamas? There are no lines to wait in or cashiers to track down to help
you with your purchases, and you can do your shopping in minutes.
Online shops give us the opportunity to shop 24/7, and also reward us with a 'no
pollution' shopping experience. There is no better place to buy informational products
like e-books, which are available to you instantly, as soon as the payment goes
through. Downloadable items purchased online eliminate the need for any kind of
physical material at all, as well, which helps the environment!
2. Better Prices
Cheap deals and better prices are available online, because products come to you
direct from the manufacturer or seller without involving middlemen. Plus, it's easier to
compare prices and find a better deal. Many online sites offer discount coupons and
rebates, as well.Not only are prices better, but you can save on tax as well since
online shops are only required to collect a sales tax if they have a physical location in
your state. Factor in the saved expense of gas and parking, and you have saved
yourself a lot of money!
3. More Variety
The choices online are amazing. You can find almost any brand or item you're
looking for. You can get in on the latest international trends without spending money
on airfare. You can shop from retailers in other parts of the state, country, or even
world instead of being limited to your own geography. A far greater selection of
colors and sizes than you will find locally are at your disposal.
Plus, the stock is much more plentiful, so you'll always be able to find your size and
color. Some online shops even accept orders for out-of-stock items and ship when
they come in.
13 | P a g e
4. You Can Send Gifts More Easily
Sending gifts to relatives and friends is easy, no matter where they are. All the
packaging and shipping is done for you. Oftentimes, they'll even gift wrap it for you!
Now, there is no need to make distance an excuse for not sending a gift on
occasions like birthdays, weddings, anniversaries, Valentine's Day, Mother's Day,
Father's Day, and so forth.
5. More Control
Many times, when we opt for conventional shopping, we tend to spend a lot more
than planned and end up buying items that aren't exactly what we wanted (but we
can't find anything better in the store). Online, you don't have to let the store's
inventory dictate what you buy, and you can get exactly what you want and need.
6. Easy Price Comparisons
Comparing and researching products and their prices is so much easier online. If
you're shopping for appliances, for example, you can find consumer reviews and
product comparisons for all the options on the market, with links to the best prices.
We can research firsthand experience, ratings, and reviews for most products and
retailers.
7. No Crowds
If you are like me, you hate crowds when you're shopping. Especially during
holidays, festivals, or on weekends, they can be such a huge headache. Also, being
crushed in the crowds of shoppers sometimes makes us feel rushed or hurried. You
don't have to battle for a parking place. All of these problems can be avoided when
you shop online.
8. No Pressure
Oftentimes when we're out shopping, we end up buying things that we don't really
need, all because shopkeepers pressure us or use their selling skills to compel us to
make these purchases.
9. You Can Buy Used or Damaged Items at Lower Prices
The marketplace on the internet gives us access to listings of old or damaged items
at rock bottom prices. Also, if we want to buy antiques, there's no better place to find
great ones.
10. Discrete Purchases Are Easier
Some things are better done in the privacy of your home. Online shops are best for
discreet purchases for things like adult toys, sexy lingerie, and so on. This enables
14 | P a g e
me to purchase undergarments and lingerie without embarrassment or any paranoia
that there are people watching or judging me.
Additional Benefits of Shopping Online
 You get an electronic record of the receipt of your purchase, which makes
record-keeping much easier.
 You get to try things on in the comfort of your own home.
 Sometimes, returns are easy.
 It saves time!
Disadvantages of Nxt Shop : Shopping Application

Online shopping comes with disadvantages; here are ten of the most problematic
elements of shopping on the internet.
1. Negative Environmental Impact of Packaging and Gas
Having your purchase packed in several layers of plastic and cardboard packaging
and delivered right to your front door is good for you but not so great for the
environment. Even if you try to recycle the cardboard, you're creating unnecessary
waste by shopping online.
2. Shipping Problems and Delays
Even the biggest and best shipping companies and online retailers have their bad
days, so there's no way to ensure that you'll get your hands on your purchase in time
unless you pick it up from a store. Items get lost, detoured, damaged, or delivered to
the wrong address more often than you can imagine.
3. Risk of Fraud
If you're shopping online, there's a larger risk of fraud: credit card scams, phishing,
hacking, identity theft, counterfeit products, bogus websites, and other scams are
common.
4. Spending Too Much Time Online
Especially if your job requires that you look at a computer all day, you might get
burnt out on all that screen time. Shopping online can turn into a marathon of
scrolling and clicking down rabbit holes, and before you know it, you've been online
for most of the day. The internet is a nice place to visit, but you probably don't want
to live there.
5. Less Contact With the Community
If you do all your business online, you'll never have to leave your home. This might
be great for a while, but sometimes, you might want to go outside, breathe some
fresh air, get a change of scenery, talk to real people, participate in your community,
15 | P a g e
and just be a part of the crowd. Sometimes, a computer monitor can't compete with a
real human connection.
6. You Don't Know Exactly What You're Getting
Unless you are intimately familiar with a brand or product, buying online requires a
leap of faith . . . one that doesn't always end in your favor. Sizes are often imprecise.
You can't determine texture, fabric, fit, cut, quality, heft, or durability just by looking at
a photo. Products that looked great might feel chintzy, awkward, or cheap when you
hold them in your hands.
7. Returns Can Be Complicated
Some sellers make the process breezy, but many make it extra hard for you to return
their merchandise or get a refund. Many times, you can't get reimbursed for any
shipping costs.
Labeling, packaging, shipping, tracking, and filling out all the proper forms are a
hassle you can avoid if you buy in person (and if you hand-select your merchandise,
you won't need to return things so often).
8. Unfriendly, Scammy, or Complicated Websites
Some sites require that you join their mailing list and make it impossible to
unsubscribe. Some sell your email address to others, so your email is full of ads.
Sometimes, sites don't offer good or accurate descriptions of the goods, or you just
can't figure out how to purchase or return an item or speak to customer service.
9. No Sales Assistance
In a store, there's usually someone to help you but online, you're on your own. If
you're confused or have questions, it's just too bad for you. You might have to make
blind purchases and mistakes you'll regret later because there was no one to talk to.
10. No Support for Local Retailers
If everyone started doing all their shopping online, all the local stores would go out of
business. When all the stores in town are gone, we'll have to drive further and further
away to shop at a real store.
Many people and places have already experienced the negative and sometimes
devastating impacts of e-commerce which take away jobs and devastate local
economies.
16 | P a g e
SOFTWARE REQUIREMENTS SPECIFICATION (SRS)
Software Requirements Specification (SRS) for Nxt Shop : Shopping Application
Introduction
Nxt Shop : A Shopping Application is a real-time chat application that enables
users to communicate with each other in public or private chat rooms. The app
includes features such as user registration, user login, user profiles, real-time
messaging, user presence, chat history, and logout.
System Overview
The chat app is built using the MERN stack, which includes MongoDB, Express,
React, and Node.js. The app uses a RESTful API architecture and Socket.io to
enable real-time communication between the client-side and server-side of the app.
The app also includes a MongoDB database to store user profiles, chat rooms, and
chat messages.
Functional Requirements
The chat app must include the following functional requirements:
User Registration: The app must allow users to create new accounts by providing
their email address, password, and other relevant details.
User Login: The app must allow users to log in using their registered email address
and password.
User Profile: The app must allow users to view and edit their profiles, including their
profile picture, display name, and bio.
Non-functional Requirements
The chat app must also meet the following non-functional requirements:
User Interface: The app must have a clean and modern user interface that is easy
to use.
Performance: The app must be scalable and able to handle large volumes of data
with ease.
Security: The app must include appropriate security measures, such as encryption
of user data and secure login/authentication protocols.
Availability: The app must be available to users 24/7, with minimal downtime for
maintenance and updates.
17 | P a g e
System Architecture
The chat app will use a client-server architecture, with the client-side application built
using React and the server-side API built using Express and Node.js. The app will
use Socket.io to enable real-time communication between the client-side and server-
side of the app. The app will use a MongoDB database to store user profiles, chat
rooms, and chat messages.
User Interface
The user interface will include a login page, a registration page, a chat room page,
and a user profile page. The chat room page will include a list of chat rooms, a chat
history window, and a message input field. The user profile page will include fields
for the user's profile picture, display name, and bio.
System Testing
The chat app must undergo thorough testing to ensure that it meets all functional
and non-functional requirements. Testing must include unit testing, integration
testing, system testing, and user acceptance testing. The app must also be tested for
performance, scalability, and security.
System Deployment
The chat app will be deployed to a Hosting Provider like “RENDER”. The app will be
accessible to users via a web browser, with no additional software required.
Conclusion
Nxt Shop : A Shopping Application is a real-time chat application that meets the
needs of users who want to communicate with each other in public or private chat
rooms. The app includes a range of features such as user registration, user login,
user profiles, real-time messaging, user presence, chat history, and logout. The app
is built using the MERN stack and incorporates a client-server architecture using
React, Express, Node.js, Socket.io, and a MongoDB database. The app's user
interface is designed to be modern and easy-to-use, with a login page, registration
page, chat room page, and user profile page. The app will undergo rigorous testing
to ensure that it meets all functional and non-functional requirements, and will be
deployed to a cloud server for accessibility by users via a web browser. Overall, Nxt
Shop : A Shopping Application provides a reliable and secure real-time chat
experience for users.
18 | P a g e
System Requirements of Nxt Shop : Shopping Application
 The user should have the appropriate version of windows.
 The system should have up to 2 GB ram minimum requirement for the
application.
 The application should be installed on the system.
So, this is the overall process of making the Online Shopping system worked, and
the user can get the policy without any headache of the agent and sometimes do not
need to provide a commission to them.
Technologies Used for Making This Site

Frontend : HTML, CSS, React.js, MUI
Backend : Node.js, Express.js
Database : MongoDB
HTML
The HyperText Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure
of a web page semantically and originally included cues for the appearance of the
document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded
into the rendered page. HTML provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items. HTML elements are delineated by tags, written using angle
brackets. Tags such as <img /> and <input /> directly introduce content into the
page. Other tags such as <p> surround and provide information about document
text and may include other tags as sub-elements. Browsers do not display the HTML
tags but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript,
which affects the behaviour and content of web pages. Inclusion of CSS defines the
19 | P a g e
look and layout of content. The World Wide Web Consortium (W3C), former
maintainer of the HTML and current maintainer of the CSS standards, has
encouraged the use of CSS over explicit presentational HTML since 1997. A form of
HTML, known as HTML5, is used to display video and audio, primarily using
the <canvas> element, in collaboration with javascript.
Tim Berners-Lee in April 2009

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents.
In 1989, Berners-Lee wrote a memo proposing an Internet-
based hypertext system. Berners-Lee specified HTML and wrote the browser and
server software in late 1990. That year, Berners-Lee and CERN data
systems engineer Robert Cailliau collaborated on a joint request for funding, but the
project was not formally adopted by CERN. In his personal notes from 1990 he
listed "some of the many areas in which hypertext is used" and put
an encyclopedia first.
The first publicly available description of HTML was a document called "HTML
Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes
18 elements comprising the initial, relatively simple design of HTML. Except for the
hyperlink tag, these were strongly influenced by SGMLguid, an in-house Standard
Generalized Markup Language (SGML)-based documentation format at CERN.
Eleven of these elements still exist in HTML 4.
HTML is a markup language that web browsers use to interpret and compose text,
images, and other material into visual or audible web pages. Default characteristics
for every item of HTML markup are defined in the browser, and these characteristics
can be altered or enhanced by the web page designer's additional use of CSS. Many
of the text elements are found in the 1988 ISO technical report TR 9537 Techniques
for using SGML, which in turn covers the features of early text formatting languages
such as that used by the RUNOFF command developed in the early 1960s for
the CTSS (Compatible Time-Sharing System) operating system: these formatting
commands were derived from the commands used by typesetters to manually format
documents. However, the SGML concept of generalized markup is based on
elements (nested annotated ranges with attributes) rather than merely print effects,
with also the separation of structure and markup; HTML has been progressively
moved in this direction with CSS.
Berners-Lee considered HTML to be an application of SGML. It was formally defined
as such by the Internet Engineering Task Force (IETF) with the mid-1993 publication
of the first proposal for an HTML specification, the "Hypertext Markup Language
(HTML)" Internet Draft by Berners-Lee and Dan Connolly, which included an
SGML Document type definition to define the grammar. The draft expired after six
months, but was notable for its acknowledgment of the NCSA Mosaic browser's
custom tag for embedding in-line images, reflecting the IETF's philosophy of basing
standards on successful prototypes. Similarly, Dave Raggett's competing Internet-
20 | P a g e
Draft, "HTML+ (Hypertext Markup Format)", from late 1993, suggested standardizing
already-implemented features like tables and fill-out forms.
After the HTML and HTML+ drafts expired in early 1994, the IETF created an HTML
Working Group, which in 1995 completed "HTML 2.0", the first HTML specification
intended to be treated as a standard against which future implementations should be
based.
Further development under the auspices of the IETF was stalled by competing
interests. Since 1996, the HTML specifications have been maintained, with input
from commercial software vendors, by the World Wide Web
Consortium (W3C). However, in 2000, HTML also became an international standard
(ISO/IEC 15445:2000). HTML 4.01 was published in late 1999, with further errata
published through 2001. In 2004, development began on HTML5 in the Web
Hypertext Application Technology Working Group (WHATWG), which became a joint
deliverable with the W3C in 2008, and completed and standardized on 28 October
2014.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such
as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is
a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content,
including layout, colors, and fonts. This separation can improve content accessibility;
provide more flexibility and control in the specification of presentation characteristics;
enable multiple web pages to share formatting by specifying the relevant CSS in a
separate .css file, which reduces complexity and repetition in the structural content;
and enable the .css file to be cached to improve the page load speed between the
pages that share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-screen,
in print, by voice (via speech-based browser or screen reader), and on Braille-
based tactile devices. CSS also has rules for alternate formatting if the content is
accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine which
style rule applies if more than one rule matches a particular element. This cascading
priority scheme is predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Internet media type (MIME type) text/css is registered for use with CSS by RFC
2318 (March 1998). The W3C operates a free CSS validation service for CSS
documents.
In addition to HTML, other markup languages support the use of CSS
including XHTML, plain XML, SVG, and XUL.
21 | P a g e
Syntax
CSS has a simple syntax and uses a number of English keywords to specify the
names of various style properties.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors, and a declaration block.
Selector
In CSS, selectors declare which part of the markup a style applies to by matching
tags and attributes in the markup itself.
Selectors may apply to the following:
 all elements of a specific type, e.g. the second-level headers h2
 elements specified by attribute, in particular:
o id: an identifier unique within the document, identified with a hash prefix
e.g. #id
o class: an identifier that can annotate multiple elements in a document,
identified with a period prefix e.g. .classname
 elements depending on how they are placed relative to others in
the document tree.
Classes and IDs are case-sensitive, start with letters, and can include alphanumeric
characters, hyphens, and underscores. A class may apply to any number of
instances of any elements. An ID may only be applied to a single element.
Pseudo-classes are used in CSS selectors to permit formatting based on information
that is not contained in the document tree. One example of a widely used pseudo-
class is :hover, which identifies content only when the user "points to" the visible
element, usually by holding the mouse cursor over it. It is appended to a selector as
in a:hover or #elementid:hover. A pseudo-class classifies document elements, such
as :link or :visited, whereas a pseudo-element makes a selection that may consist of
partial elements, such as ::first-line or ::first-letter. Note the double-colon notation for
pseudo-elements versus single-colon notation for pseudo-class.
Selectors may be combined in many ways to achieve great specificity and flexibility.
Multiple selectors may be joined in a spaced list to specify elements by location,
element type, id, class, or any combination thereof. The order of the selectors is
important. For example, div .myClass {color: red;} applies to all elements of class
myClass that are inside div elements, whereas .myClass div {color: red;} applies to
all div elements that are inside elements of class myClass. This is not to be confused
with concatenated identifiers such as div.myClass {color: red;} which applies to div
elements of class myClass.
22 | P a g e
The following table provides a summary of selector syntax indicating usage and the
version of CSS that introduced it.
JavaScript
JS, is a programming language that is one of the core technologies of the World
Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript
on the client side for web page behaviour, often incorporating third-party libraries. All
major web browsers have a dedicated JavaScript engine to execute
the code on users' devices.
JavaScript is a high-level, often just-in-time compiled language that conforms to
the ECMAScript standard. It has dynamic typing, prototype-based object-orientation,
and first-class functions. It is multi-paradigm, supporting event-driven, functional,
and imperative programming styles. It has application programming interfaces (APIs)
for working with text, dates, regular expressions, standard data structures, and
the Document Object Model (DOM).
The ECMAScript standard does not include any input/output (I/O), such
as networking, storage, or graphics facilities. In practice, the web browser or
other runtime system provides JavaScript APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core
components of some servers and a variety of applications. The most popular runtime
system for this usage is Node.js.
Although Java and JavaScript are similar in name, syntax, and respective standard
libraries, the two languages are distinct and differ greatly in design.
History
Creation at Netscape
The first web browser with a graphical user interface, Mosaic, was released in 1993.
Accessible to non-technical people, it played a prominent role in the rapid growth of
the nascent World Wide Web. The lead developers of Mosaic then founded
the Netscape corporation, which released a more polished browser, Netscape
Navigator, in 1994. This quickly became the most-used.
During these formative years of the Web, web pages could only be static, lacking the
capability for dynamic behavior after the page was loaded in the browser. There was
a desire in the flourishing web development scene to remove this limitation, so in
1995, Netscape decided to add a scripting language to Navigator. They pursued two
routes to achieve this: collaborating with Sun Microsystems to embed
23 | P a g e
the Java programming language, while also hiring Brendan Eich to embed
the Scheme language.
Netscape management soon decided that the best option was for Eich to devise a
new language, with syntax similar to Java and less like Scheme or other extant
scripting languages. Although the new language and its interpreter implementation
were called LiveScript when first shipped as part of a Navigator beta in September
1995, the name was changed to JavaScript for the official release in December.
The choice of the JavaScript name has caused confusion, implying that it is directly
related to Java. At the time, the dot-com boom had begun and Java was the hot new
language, so Eich considered the JavaScript name a marketing ploy by Netscape.
Adoption by Microsoft
Microsoft debuted Internet Explorer in 1995, leading to a browser war with Netscape.
On the JavaScript front, Microsoft reverse-engineered the Navigator interpreter to
create its own, called JScript.
JScript was first released in 1996, alongside initial support for CSS and extensions
to HTML. Each of these implementations was noticeably different from their
counterparts in Navigator. These differences made it difficult for developers to make
their websites work well in both browsers, leading to widespread use of "best viewed
in Netscape" and "best viewed in Internet Explorer" logos for several years.
The rise of JScript
In November 1996, Netscape submitted JavaScript to Ecma International, as the

starting point for a standard specification that all browser vendors could conform to.
This led to the official release of the first ECMAScript language specification in June
1997.
The standards process continued for a few years, with the release of ECMAScript 2
in June 1998 and ECMAScript 3 in December 1999. Work on ECMAScript 4 began
in 2000.
Meanwhile, Microsoft gained an increasingly dominant position in the browser

market. By the early 2000s, Internet Explorer's market share reached 95%. This
meant that JScript became the de facto standard for client-side scripting on the Web.
Microsoft initially participated in the standards process and implemented some

proposals in its JScript language, but eventually it stopped collaborating on Ecma
work. Thus ECMAScript 4 was mothballed.
Growth and standardization
During the period of Internet Explorer dominance in the early 2000s, client-side
scripting was stagnant. This started to change in 2004, when the successor of
Netscape, Mozilla, released the Firefox browser. Firefox was well received by many,
taking significant market share from Internet Explorer.
24 | P a g e
In 2005, Mozilla joined ECMA International, and work started on the ECMAScript for
XML (E4X) standard. This led to Mozilla working jointly with Macromedia (later
acquired by Adobe Systems), who were implementing E4X in their ActionScript 3
language, which was based on an ECMAScript 4 draft. The goal became
standardizing ActionScript 3 as the new ECMAScript 4. To this end, Adobe Systems
released the Tamarin implementation as an open source project. However, Tamarin
and ActionScript 3 were too different from established client-side scripting, and
without cooperation from Microsoft, ECMAScript 4 never reached fruition.
Meanwhile, very important developments were occurring in open-source

communities not affiliated with ECMA work. In 2005, Jesse James Garrett released a
white paper in which he coined the term Ajax and described a set of technologies, of
which JavaScript was the backbone, to create web applications where data can be
loaded in the background, avoiding the need for full page reloads. This sparked a
renaissance period of JavaScript, spearheaded by open-source libraries and the
communities that formed around them. Many new libraries were created,
including jQuery, Prototype, Dojo Toolkit, and MooTools.
Google debuted its Chrome browser in 2008, with the V8 JavaScript engine that was
faster than its competition. The key innovation was just-in-time compilation (JIT), so
other browser vendors needed to overhaul their engines for JIT.
In July 2008, these disparate parties came together for a conference in Oslo. This
led to the eventual agreement in early 2009 to combine all relevant work and drive
the language forward. The result was the ECMAScript 5 standard, released in
December 2009.
Reaching maturity
Ambitious work on the language continued for several years, culminating in an

extensive collection of additions and refinements being formalized with the
publication of ECMAScript 6 in 2015.
The creation of Node.js in 2009 by Ryan Dahl sparked a significant increase in the
usage of JavaScript outside of web browsers. Node combines the V8 engine,
an event loop, and I/O APIs, thereby providing a stand-alone JavaScript runtime
system. As of 2018, Node had been used by millions of developers, and npm had
the most modules of any package manager in the world.
The ECMAScript draft specification is currently maintained openly on GitHub, and

editions are produced via regular annual snapshots. Potential revisions to the
language are vetted through a comprehensive proposal process. Now, instead of
edition numbers, developers check the status of upcoming features individually.
The current JavaScript ecosystem has many libraries and frameworks, established
programming practices, and substantial usage of JavaScript outside of web
browsers. Plus, with the rise of single-page applications and other JavaScript-heavy
websites, several transpilers have been created to aid the development process.
Trademark
"JavaScript" is a trademark of Oracle Corporation in the United States.
25 | P a g e
Website client-side usage
JavaScript is the dominant client-side scripting language of the Web, with 98% of
all websites (mid–2022) using it for this purpose. Scripts are embedded in or
included from HTML documents and interact with the DOM. All major web
browsers have a built-in JavaScript engine that executes the code on the user's
device.
Examples of scripted behavior
 Loading new web page content without reloading the page, via Ajax or
a WebSocket. For example, users of social media can send and receive
messages without leaving the current page.
 Web page animations, such as fading objects in and out, resizing, and moving
them.
 Playing browser games.
 Controlling the playback of streaming media.
 Generating pop-up ads.
 Validating input values of a web form before the data is sent to a web server.
 Logging data about the user's behavior then sending it to a server. The
website owner can use this data for analytics, ad tracking,
and personalization.
 Redirecting a user to another page.
Libraries and frameworks
Over 80% of websites use a third-party JavaScript library or web framework for their
client-side scripting.
jQuery is by far the most popular library, used by over 75% of

websites. Facebook created the React library for its website and later released it
as open source; other sites, including Twitter, now use it. Likewise,
the Angular framework created by Google for its websites,
including YouTube and Gmail, is now an open source project used by others.
In contrast, the term "Vanilla JS" has been coined for websites not using any libraries
or frameworks, instead relying entirely on standard JavaScript functionality.
Other usage
The use of JavaScript has expanded beyond its web browser roots. JavaScript
engines are now embedded in a variety of other software systems, both for server-
side website deployments and non-browser applications.
Initial attempts at promoting server-side JavaScript usage were Netscape Enterprise

Server and Microsoft's Internet Information Services, but they were small niches.
Server-side usage eventually started to grow in the late 2000s, with the creation
of Node.js and other approaches.
26 | P a g e
Electron, Cordova, React Native, and other application frameworks have been used
to create many applications with behavior implemented in JavaScript. Other non-
browser applications include Adobe Acrobat support for
scripting PDF documents and GNOME Shell extensions written in JavaScript.
JavaScript has recently begun to appear in some embedded systems, usually by

leveraging Node.js.
Features
The following features are common to all conforming ECMAScript implementations

unless explicitly specified otherwise.
Imperative and structured
JavaScript supports much of the structured programming syntax

from C (e.g., if statements, while loops, switch statements, do while loops, etc.). One
partial exception is scoping: originally JavaScript only had function scoping with var;
then block scoping was added in ECMAScript 2015 with the keywords let and const.
Like C, JavaScript makes a distinction between expressions and statements. One
syntactic difference from C is automatic semicolon insertion, which allow semicolons
(which terminate statements) to be omitted.
Mongo DB
Data Modeling Introduction

The key challenge in data modeling is balancing the needs of the application, the
performance characteristics of the database engine, and the data retrieval patterns. When
designing data models, always consider the application usage of the data (i.e. queries,
updates, and processing of the data) as well as the inherent structure of the data itself.
Flexible Schema
Unlike SQL databases, where you must determine and declare a table's schema before
inserting data, MongoDB's collections, by default, do not require their documents to have the
same schema. That is:
The documents in a single collection do not need to have the same set of fields and the data
type for a field can differ across documents within a collection.
To change the structure of the documents in a collection, such as add new fields, remove
existing fields, or change the field values to a new type, update the documents to the new
structure.
27 | P a g e
This flexibility facilitates the mapping of documents to an entity or an object. Each document
can match the data fields of the represented entity, even if the document has substantial
variation from other documents in the collection.
In practice, however, the documents in a collection share a similar structure, and you can
enforce document validation rules for a collection during update and insert operations. See
Schema Validation for details.
Document Structure
The key decision in designing data models for MongoDB applications revolves around the
structure of documents and how the application represents relationships between data.
MongoDB allows related data to be embedded within a single document.
Embedded Data
Embedded documents capture relationships between data by storing related data in a single
document structure. MongoDB documents make it possible to embed document structures in
a field or array within a document. These denormalized data models allow applications to
retrieve and manipulate related data in a single database operation.
Data model with embedded fields that contain all related information.
For many use cases in MongoDB, the denormalized data model is optimal.
See Embedded Data Models for the strengths and weaknesses of embedding documents.
References
References store the relationships between data by including links or references from one
document to another. Applications can resolve these references to access the related data.
Broadly, these are normalized data models.
Data model using references to link documents. Both the ``contact`` document and the
``access`` document contain a reference to the ``user`` document.
See Normalized Data Models for the strengths and weaknesses of using references.
Atomicity of Write Operations
Single Document Atomicity
In MongoDB, a write operation is atomic on the level of a single document, even if the
operation modifies multiple embedded documents within a single document.
A denormalized data model with embedded data combines all related data in a single
document instead of normalizing across multiple documents and collections. This data
model facilitates atomic operations.
For details regarding transactions in MongoDB, see the Transactions page.
Multi-Document Transactions
When a single write operation (e.g. db.collection.updateMany()) modifies multiple
documents, the modification of each document is atomic, but the operation as a whole is not
atomic.
When performing multi-document write operations, whether through a single write operation
or multiple write operations, other operations may interleave.
For situations that require atomicity of reads and writes to multiple documents (in a single or
multiple collections), MongoDB supports multi-document transactions:
28 | P a g e
In version 4.0, MongoDB supports multi-document transactions on replica sets.
In version 4.2, MongoDB introduces distributed transactions, which adds support for multi-
document transactions on sharded clusters and incorporates the existing support for multi-
document transactions on replica sets.
For details regarding transactions in MongoDB, see the Transactions page.
IMPORTANT
In most cases, multi-document transaction incurs a greater performance cost over single
document writes, and the availability of multi-document transactions should not be a
replacement for effective schema design. For many scenarios, the denormalized data model
(embedded documents and arrays) will continue to be optimal for your data and use cases.
That is, for many scenarios, modeling your data appropriately will minimize the need for
multi-document transactions.
For additional transactions usage considerations (such as runtime limit and oplog size limit),
see also Production Considerations.
Atomicity Considerations
Data Use and Performance

When designing a data model, consider how applications will use your database. For
instance, if your application only uses recently inserted documents, consider using Capped
Collections. Or if your application needs are mainly read operations to a collection, adding
indexes to support common queries can improve performance.
See Operational Factors and Data Models for more information on these and other
operational considerations that affect data model designs.
React.Js
React.js, often referred to as React, is an open-source JavaScript library developed and
maintained by Facebook. It's primarily used for building user interfaces (UIs) in web
applications. React allows developers to create interactive and dynamic UI components,
making it a popular choice for building modern, single-page applications (SPAs) and user
interfaces that update efficiently as data changes.
Key Features and Concepts of React:
Component-Based : React encourages a modular approach to building UIs. Developers

can create reusable components that encapsulate specific UI elements and their behavior.
This modular design simplifies development, testing, and maintenance.
29 | P a g e
Virtual DOM : React uses a virtual representation of the actual DOM (Document Object
Model). This virtual DOM allows React to update the UI efficiently by minimizing direct
manipulation of the real DOM. When there are changes in the data, React calculates the
minimal set of updates needed to reflect those changes in the UI, improving performance.
Unidirectional Data Flow : React follows a unidirectional data flow, also known as a "top-
down" approach. Data flows in a single direction, from parent components to child
components. This helps in managing data and ensuring that changes to the data are
predictable, reducing side effects.
JSX : React uses JSX (JavaScript XML), which is a syntax extension for JavaScript. It
allows developers to write UI components using a markup-like syntax that resembles HTML.
JSX is transpiled to regular JavaScript, making it easier to describe the structure of UI
components within JavaScript code.
Component Lifecycle : React components have a lifecycle with methods that get called at
specific stages, such as when a component is created, updated, or removed. This lifecycle
allows developers to control behavior and perform actions at different points in a
component's existence.
React Ecosystem : React has a large and active ecosystem with a wealth of third-party
libraries, tools, and extensions that make development faster and more efficient. This
ecosystem includes state management solutions (like Redux), routing libraries, testing
frameworks, and much more.
React is widely used in the web development industry, and it has a strong community of
developers who contribute to its growth and provide support through various online
resources. It's an excellent choice for building interactive, high-performance web
applications.
Express.Js
Routing: Express offers a straightforward and intuitive routing system. Developers can
define routes for handling specific HTTP methods (GET, POST, PUT, DELETE, etc.) and
URL patterns. This makes it easy to create the necessary endpoints for various
functionalities in your application.
Middleware: Middleware functions in Express can intercept and process requests before
they reach the final route handler. This is extremely useful for tasks like authentication,
logging, error handling, and parsing request bodies. Express has a rich ecosystem of
middleware that you can easily integrate into your application.
Template Engines: While Express itself does not include a template engine, it provides
support for various popular template engines like EJS, Pug (formerly Jade), and Handlebars.
These engines allow you to dynamically generate HTML or other content for your views.
Static File Serving: Express can serve static files (HTML, CSS, images, etc.) easily. This is
useful for hosting client-side files or serving assets in your application.
Error Handling: Express provides mechanisms for handling errors in a centralized manner.
You can define error-handling middleware to catch and handle errors that occur during
request processing.
30 | P a g e
REST API Development: Express is often used for creating RESTful APIs. Its simplicity and
support for middleware make it a great choice for building robust APIs that handle data
operations for frontend applications.
Middleware Integration: Express allows you to use third-party middleware and write
custom middleware functions, enabling you to extend the functionality of your application in a
modular way.
Scalability: Express is lightweight, allowing you to scale your application based on your
needs. It's commonly used in conjunction with other libraries like cluster to take full
advantage of multi-core systems.
Active Community: Express has a large and active community of developers. This means
you can find extensive documentation, tutorials, and a wide range of modules and
extensions developed by the community.
In summary, Express.js is a powerful and versatile framework that makes it easy to create
web applications, especially APIs, with Node.js. Its flexibility, middleware support, and active
community contribute to its widespread use in the Node.js ecosystem.
Node.Js
Use Node.js, often simply referred to as Node, is an open-source, server-side JavaScript
runtime environment. It allows developers to run JavaScript code on the server, providing a
powerful platform for building scalable and high-performance network applications. Node.js
is designed to be efficient and non-blocking, making it particularly well-suited for applications
that require handling many simultaneous connections or real-time interactions.
Key Features and Concepts of Node.js:
Asynchronous and Non-blocking: One of the fundamental principles of Node.js is its non-
blocking, asynchronous architecture. It uses an event-driven, single-threaded model that
enables handling many connections concurrently without the need for multiple threads or
processes. This makes Node.js extremely efficient and capable of handling I/O-heavy tasks
without blocking other operations.
JavaScript on the Server: Node.js enables developers to use JavaScript on both the client
and server sides, creating a unified development environment. This is especially valuable for
teams that want to use a single language throughout the full stack of their applications.
V8 Engine: Node.js is built on the V8 JavaScript engine, developed by Google for use in
Chrome. V8 compiles JavaScript into machine code, making it highly performant.
NPM (Node Package Manager): NPM is a powerful package manager that comes bundled
with Node.js. It allows developers to easily install, manage, and share reusable code
modules and libraries, making it simple to integrate third-party functionality into your
applications.
Event Loop: The event loop is a core concept in Node.js. It enables asynchronous I/O
operations to be handled efficiently. This means that Node.js applications can respond to
multiple requests without blocking, resulting in a highly responsive and scalable architecture.
31 | P a g e
Single-Threaded: While Node.js itself is single-threaded, it can handle many concurrent
connections through non-blocking I/O. For CPU-intensive tasks, Node.js can leverage child
processes to distribute the workload.
Community and Ecosystem: Node.js has a thriving and active community of developers.
This has led to a vast ecosystem of open-source libraries and modules available through
NPM, allowing developers to solve common problems without reinventing the wheel.
Scalability: Node.js is known for its ability to handle a large number of simultaneous
connections with relatively low resource usage. This scalability makes it suitable for real-time
applications, chat applications, streaming services, and more.
Node.js is widely used for building a variety of web applications, APIs, real-time applications,
and networking tools. Its non-blocking nature and focus on efficiency make it a popular
choice for modern, high-performance applications.
Design of Nxt Shop : Shopping Application
32 | P a g e
An e-commerce shopping cart serves as a virtual cart that allows customers to add
and hold items until they complete the purchase. It accepts payments of customers
and organizes and distributes all order information to the merchant, customer, and
other relevant parties.
This process requires a database to store and retrieve the relevant data while
supporting the functionality of the shopping cart. A shopping cart database will
contain all the critical information about products, orders, and customers and allow
users to perform real-time changes reflected in their shopping sessions. The
database can have immutable structures or a separate table to store all the order
details.
Note: The purpose of this post is to present considerations for designing a shopping
cart database. It's not a step-by-step tutorial for building a production-ready cart
database as we have done to power our order management system and cart APIs.
33 | P a g e
Data Flow Diagram
Entity-Relationship Diagram
34 | P a g e
Category_id
Category_name
Category
has
address Email_id
password
Last_name
Online
Shopping has
User Belongs to
p_pid
First_name
p_price
username
Product p_name
Buys
p_model
quatity
Added to Cart Item

does
Total_cost
Payment_id
Payment Cart_id
amount
Payment_type
done
Cart Made of
35 | P a g e
Coding
index.js
import React from 'react';

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';

import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<Provider store={store} >
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>
);
Header.jsx
import { useState } from 'react';
import { AppBar, Toolbar, Box, Typography, IconButton, Drawer, List, styled } from
'@mui/material';
import { Menu } from '@mui/icons-material';
import { Link } from 'react-router-dom';

import img from './nxtshop.png'
36 | P a g e
//components
import CustomButtons from './CustomButtons';
import Search from './Search';
const StyledHeader = styled(AppBar)`

background: #2874f0;
height: 55px;
`;
const Component = styled(Link)`

margin-left: 12%;
line-height: 0;
color: #FFFFFF;
text-decoration: none;
`;
const SubHeading = styled(Typography)`

font-size: 10px;
font-style: italic;
`
const PlusImage = styled('img')({

width: 10,
height: 10,
marginLeft: 4
})
const MenuButton = styled(IconButton)(({ theme }) => ({

display: 'none',
[theme.breakpoints.down('sm')]: {
display: 'block'
}
}));
37 | P a g e
const CustomButtonWrapper = styled('span')(({ theme }) => ({
margin: '0 5% 0 auto',
display: 'none'
}
}));
const Header = () => {

const logoURL = img;
// const subURL = 'https://static-assets-web.flixcart.com/www/linchpin/fk-cp-
zion/img/plus_aef861.png';
const [open, setOpen] = useState(false);
const handleClose = () => {

setOpen(false);
}
const handleOpen = () => {

setOpen(true);
}
const list = () => (

<Box style={{ width: 250 }} onClick={handleClose}>
<List>
<listItem button>
<CustomButtons />
</listItem>
</List>
</Box>
);
return (
38 | P a g e
<StyledHeader position="fixed">
<Toolbar style={{ minHeight: 55 }}>
<MenuButton
color="inherit"
onClick={handleOpen}
>
<Menu />
</MenuButton>
<Drawer open={open} onClose={handleClose}>

{list()}
</Drawer>
<Component to='/'>
<img src={logoURL} style={{ width: 100 }} />
</Component>
<Search />
<CustomButtonWrapper>
<CustomButtons />
</CustomButtonWrapper>
</Toolbar>
</StyledHeader>
)
}
export default Header;
CustomButtons.jsx
import React, { useState, useContext } from 'react';
import { Box, Typography, Badge, Button, styled } from '@mui/material';

import { ShoppingCart } from '@mui/icons-material';
39 | P a g e
import { LoginContext } from '../../context/ContextProvider';
import { useSelector } from 'react-redux';
import Profile from './Profile';

import LoginDialog from '../Login/LoginDialog';
const Container = styled(Link)(({ theme }) => ({

display: 'flex',
display: 'block'
}
}));
const Wrapper = styled(Box)(({ theme }) => ({

margin: '0 3% 0 auto',
display: 'flex',
'& > *': {
marginRight: '40px !important',
textDecoration: 'none',
color: '#FFFFFF',
fontSize: 12,
alignItems: 'center',
color: '#2874f0',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
marginTop: 10
}
},
display: 'block'
40 | P a g e
}
}));
const LoginButton = styled(Button)(({ theme }) => ({

color: '#2874f0',
background: '#FFFFFF',
textTransform: 'none',
fontWeight: 600,
borderRadius: 2,
padding: '5px 40px',
height: 32,
boxShadow: 'none',
background: '#2874f0',
color: '#FFFFFF'
}
}));
const CustomButtons = () => {

const { account, setAccount } = useContext(LoginContext);
const cartDetails = useSelector(state => state.cart);

const { cartItems } = cartDetails;
const openDialog = () => {

setOpen(true);
}
return (
<Wrapper>
{
41 | P a g e
account ? <Profile account={account} setAccount={setAccount} /> :
<LoginButton variant="contained" onClick={() =>
openDialog()}>Login</LoginButton>
}
<Typography style={{ marginTop: 3, width: 135 }}>Become a Seller</Typography>
<Typography style={{ marginTop: 3 }}>More</Typography>
<Container to='/cart'>
<Badge badgeContent={cartItems?.length} color="secondary">
<ShoppingCart />
</Badge>
<Typography style={{ marginLeft: 10 }}>Cart</Typography>
</Container>
<LoginDialog open={open} setOpen={setOpen} setAccount={setAccount} />
</Wrapper>
)
}
export default CustomButtons;
Profile.jsx
import { useState } from 'react';

import { Typography, Menu, MenuItem, Box, styled } from '@mui/material';
import { PowerSettingsNew } from '@mui/icons-material';
const Component = styled(Menu)`

margin-top: 5px;
`;
42 | P a g e
const Logout = styled(Typography)`
font-size: 14px;
margin-left: 20px;
`;
const Profile = ({ account, setAccount }) => {

const handleClick = (event) => {

setOpen(event.currentTarget);
};

setOpen(false);
};
const logout = () => {

setAccount('');
}
return (
<>
<Box onClick={handleClick}><Typography style={{ marginTop: 2
}}>{account}</Typography></Box>
<Component
anchorEl={open}
open={Boolean(open)}
onClose={handleClose}
>
<MenuItem onClick={() => { handleClose(); logout();}}>
<PowerSettingsNew fontSize='small' color='primary'/>
<Logout>Logout</Logout>
</MenuItem>
43 | P a g e
</Component>
</>
)
}
export default Profile;
Search.jsx
import { useState, useEffect } from 'react';
import SearchIcon from '@mui/icons-material/Search';

import { InputBase, List, ListItem, Box, styled } from '@mui/material';
import { useSelector, useDispatch } from 'react-redux'; // hooks

import { getProducts as listProducts } from '../../redux/actions/productActions';
const SearchContainer = styled(Box)`

border-radius: 2px;
margin-left: 10px;
width: 38%;
background-color: #fff;
display: flex;
`;
const SearchIconWrapper = styled(Box)`

margin-left: auto;
padding: 5px;
display: flex;
color: blue;
`;
44 | P a g e
const ListWrapper = styled(List)`
position: absolute;
color: #000;
background: #FFFFFF;
margin-top: 36px;
`;
const InputSearchBase = styled(InputBase)`

font-size: unset;
width: 100%;
padding-left: 20px;
`;
const Search = () => {

const [ text, setText ] = useState();
const [ open, setOpen ] = useState(true)
const getText = (text) => {

setText(text);
setOpen(false)
}
const getProducts = useSelector(state => state.getProducts);

const { products } = getProducts;
const dispatch = useDispatch();
useEffect(() => {
dispatch(listProducts())
}, [dispatch])
return (
<SearchContainer>
45 | P a g e
<InputSearchBase
placeholder="Search for products, brands and more"
inputProps={{ 'aria-label': 'search' }}
onChange={(e) => getText(e.target.value)}
/>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
{
text &&
<ListWrapper hidden={open}>
{
products.filter(product =>
product.title.longTitle.toLowerCase().includes(text.toLowerCase())).map(product => (
<ListItem>
<Link
to={`/product/${product.id}`}
style={{ textDecoration:'none', color:'inherit'}}
onClick={() => setOpen(true)}
>
{product.title.longTitle}
</Link>
</ListItem>
))
}
</ListWrapper>
}
</SearchContainer>
)
}
export default Search;
46 | P a g e
Cart.jsx
import { useEffect } from 'react';
import { Box, Typography, Button, Grid, styled } from '@mui/material';

import { useParams, useHistory, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';

import { addToCart, removeFromCart } from '../../redux/actions/cartActions';
import TotalView from './TotalView';

import EmptyCart from './EmptyCart';
import CartItem from './CartItem';
import { post } from '../../utils/paytm';

import { payUsingPaytm } from '../../service/api';
const Component = styled(Grid)(({ theme }) => ({

padding: '30px 135px',
display: 'flex',
padding: '15px 0'
}
}));
const LeftComponent = styled(Grid)(({ theme }) => ({

paddingRight: 15,
marginBottom: 15
}
}));
47 | P a g e
const Header = styled(Box)`
padding: 15px 24px;
background: #fff;
`;
const BottomWrapper = styled(Box)`

padding: 16px 22px;
background: #fff;
box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
border-top: 1px solid #f0f0f0;
`;
const StyledButton = styled(Button)`

display: flex;
margin-left: auto;
background: #fb641b;
color: #fff;
border-radius: 2px;
width: 250px;
height: 51px;
`;
const Cart = () => {

const cartDetails = useSelector(state => state.cart);
const { cartItems } = cartDetails;
const { id } = useParams();
// const history = useHistory();

const navigate = useNavigate();
const dispatch = useDispatch();
useEffect(() => {
if(cartItems && id !== cartItems.id)
48 | P a g e
dispatch(addToCart(id));
}, [dispatch, cartItems, id]);
const removeItemFromCart = (id) => {

dispatch(removeFromCart(id));
}
const buyNow = async () => {
// let response = await payUsingPaytm({ amount: 500, email: 'kunaltyagi@gmail.com'});

// var information = {
// action: 'https://securegw-stage.paytm.in/order/process',
// params: response
// }
// post(information);
// history.push('/successful-order');
// dispatch(reset());
navigate('/successful-order');
}
return (
<>
{ cartItems.length ?
<Component container>
<LeftComponent item lg={9} md={9} sm={12} xs={12}>
<Header>
<Typography style={{fontWeight: 600, fontSize: 18}}>My Cart
({cartItems?.length})</Typography>
</Header>
{ cartItems.map(item => (
<CartItem item={item} removeItemFromCart={removeItemFromCart}/>
))
}
49 | P a g e
<BottomWrapper>
<StyledButton onClick={() => buyNow()} variant="contained">Place
Order</StyledButton>
</BottomWrapper>
</LeftComponent>
<Grid item lg={3} md={3} sm={12} xs={12}>
<TotalView cartItems={cartItems} />
</Grid>
</Component> : <EmptyCart />
}
</>
)
}
export default Cart;
CartIteam.jsx
import { Card, Box, Typography, Button, styled } from '@mui/material';
import { addEllipsis } from '../../utils/util';

import GroupButton from './GroupButton';
const Component = styled(Card)`

border-top: 1px solid #f0f0f0;
border-radius: 0px;
display: flex;
`;
const LeftComponent = styled(Box)`

margin: 20px;
display: flex;
50 | P a g e
flex-direction: column;
`;
const SmallText = styled(Typography)`

color: #878787;
font-size: 14px;
margin-top: 10px;
`;
const Cost = styled(Typography)`

font-size: 18px;
font-weight: 600;
`;
const MRP = styled(Typography)`

color: #878787;
`;
const Discount = styled(Typography)`

color: #388E3C;
`;
const Remove = styled(Button)`

margin-top: 20px;
font-size: 16px;
`;
const CartItem = ({ item, removeItemFromCart }) => {

const fassured = 'https://static-assets-web.flixcart.com/www/linchpin/fk-cp-
zion/img/fa_62673a.png';
return (
<Component>
<LeftComponent>
51 | P a g e
<img src={item.url} style={{ height: 110, width: 110 }} />
<GroupButton />
</LeftComponent>
<Box style={{ margin: 20 }}>
<Typography>{addEllipsis(item.title.longTitle)}</Typography>
<SmallText>Seller:RetailNet
<span><img src={fassured} style={{ width: 50, marginLeft: 10 }} /></span>
</SmallText>
<Typography style={{margin: '20px 0'}}>
<Cost component="span">₹{item.price.cost}</Cost>
<MRP
component="span"><strike>₹{item.price.mrp}</strike></MRP>
<Discount component="span">{item.price.discount} off</Discount>
</Typography>
<Remove onClick={() => removeItemFromCart(item.id)}>Remove</Remove>
</Box>
</Component>
)
}
export default CartItem;
CartItem;
product.js
export const products = [

{
id: 'product1',
url: 'https://rukminim1.flixcart.com/image/150/150/kapoo7k0/electric-kettle/p/6/s/pigeon-
favourite-original-imafs7xhj5uwgrh4.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kapoo7k0/electric-
kettle/p/6/s/pigeon-favourite-original-imafs7xhj5uwgrh4.jpeg?q=70',
title: {
shortTitle: 'Home & Kitchen',
52 | P a g e
longTitle: 'Pigeon FAVOURITE Electric Kettle (1.5 L, Silver, Black)'
},
price: {
mrp: 1195,
cost: 625,
discount: '47%'
},
quantity: 1,
description: 'This electric kettle from Pigeon will soon become a travelers best friend, a
hostelite saviour and an answer to all the midnight cravings. With this handy appliance, you
can boil water and use it to make instant noodles, packet soup, coffee and green tea.',
discount: 'Extra 10% Off',
tagline: 'Deal of the day'
},
{
id: 'product2',
url: 'https://rukminim1.flixcart.com/image/416/416/kl6wx3k0/sandwich-
maker/8/r/d/sandwich-01-flipkart-smartbuy-original-imagydds4zthxt8z.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kl6wx3k0/sandwich-
title: {
shortTitle: 'Sandwich Makers',
longTitle: 'Flipkart SmartBuy Sandwich 01 Grill (Black)'
},
price: {
mrp: 1499,
cost: 899,
discount: '40%'
},
quantity: 1,
description: 'This non-stick sandwich toaster .easy to use and very handy. Directly hold
over flame to make tasty toasts and toasted sandwiches. Specially designed by keeping
your needs in mind, the sandwich maker makes whatever youre doing simpler, smarter and
better',
discount: 'From 99+5% Off',
tagline: 'Pestige, Nova & more'
53 | P a g e
},
{
id: 'product3',
url: 'https://rukminim1.flixcart.com/image/150/150/kohigsw0/resistance-tube/c/s/e/new-
adjustable-single-resistance-tube-multicolor-na-ajro-deal-original-
imag2xg88mhmwxz5.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kohigsw0/resistance-
tube/c/s/e/new-adjustable-single-resistance-tube-multicolor-na-ajro-deal-original-
title: {
shortTitle: 'Fitness Gear',
longTitle: 'AJRO DEAL New Adjustable Single Resistance Tube (Multicolor)
Resistance Tube (Multicolor)'
},
price: {
mrp: 499,
cost: 166,
discount: '66%'
},
quantity: 1,
description: 'This unique product can tone your back muscles, reduce belly fat, improve
blood circulation and also improves your body posture. It increases the stamina, energy and
vitality of the body. The elastic resistance of the rubber training rope can be used to train and
exercise in whichever way you want, according to your physical needs.',
discount: 'Upto 70% Off',
tagline: 'Deal of the Day'
},
{
id: 'product4',
url: 'https://rukminim1.flixcart.com/image/300/300/kll7bm80/smartwatch/c/1/n/43-mo-
sw-sense-500-android-ios-molife-original-imagyzyycnpujyjh.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kll7bm80/smartwatch/c/1/n/43-
mo-sw-sense-500-android-ios-molife-original-imagyzyycnpujyjh.jpeg?q=70',
title: {
shortTitle: 'Smart Watches',
longTitle: 'Molife Sense 500 Smartwatch (Black Strap, Freesize)',
},
54 | P a g e
price: {
mrp: 6999,
cost: 4049,
discount: '42%'
},
quantity: 1,
description: 'The Molife Sense 500, a brilliant smartwatch with a beautiful large display.
Say hello to the infinity 1.7-inch display with 2.5D curved edges. Thanks to seamless
Bluetooth 5.0 connectivity, you wont have to keep waiting. Bring a change to your outfit
every day with changeable straps. A splash of color every day keeps the boredom away.',
discount: 'Grab Now',
tagline: 'Best Seller'
},
{
id: 'product5',
url: 'https://rukminim1.flixcart.com/image/416/416/k3uhhu80/hair-dryer/n/m/t/nova-2800-
w-professional-nhp-8220-original-imafmvwfhmzsxdrw.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/k3uhhu80/hair-dryer/n/m/t/nova-
2800-w-professional-nhp-8220-original-imafmvwfhmzsxdrw.jpeg?q=70',
title: {
shortTitle: 'Trimmers, Dryers & more',
longTitle: 'Nova Professional NHP 8220 Hair Dryer (1800 W, Multicolor)'
},
price: {
mrp: 1899,
cost: 1124,
discount: '40%'
},
quantity: 1,
description: '',
discount: 'From ₹499',
tagline: 'Kubra, Nova & more'
},
{
id: 'product6',
55 | P a g e
url: 'https://rukminim1.flixcart.com/image/150/150/kk01pjk0/fan/d/d/l/tiktik-quiet-
portable-table-fan-zigma-original-imafzg7ftzuckpad.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kk01pjk0/fan/d/d/l/tiktik-quiet-
title: {
shortTitle: 'Table Fans',
longTitle: 'Portable 300 mm Ultra High Speed 3 Blade Table Fan (Black, Pack of 1)'
},
price: {
mrp: 2250,
cost: 1199,
discount: '46%'
},
quantity: 1,
description: 'Table Fan. Perfect size fan for use on a table, desk or in an RV. Whisper
quiet, powerful airflow and reliable operation in a compact 6" size. Two adjustable speeds to
customize airflow: high or low settings. Tough break-resistant ABS plastic blades. ',
discount: 'Minimum 40% Off',
tagline: 'Top Selling'
},
{
id: 'product7',
url: 'https://rukminim1.flixcart.com/image/150/150/kcgk1ow0/headphone/n/u/a/235v2-
fast-charging-boat-original-imaftk6us4af7bca.jpeg?q=70',
detailUrl:
'https://rukminim1.flixcart.com/image/416/416/kcgk1ow0/headphone/n/u/a/235v2-fast-
charging-boat-original-imaftk6us4af7bca.jpeg?q=70',
title: {
shortTitle: 'Headphones',
longTitle: 'boAt Rockerz 235v2 with ASAP charging Version 5.0 Bluetooth Headset '
},
price: {
mrp: 2990,
cost: 1199,
discount: '59%'
},
56 | P a g e
quantity: 1,
description: 'Let music brighten up your mood anytime, anywhere with the boAt 235v2
Fast Charging Bluetooth Headset. This Bluetooth headset features a Call Vibration Alert, a
Fast Charging Technology, and Easy Access Controls to listen to and manage your favorite
music with ease.',
tagline: 'Grab Now!'
}
];
productcontroller.js
import Product from '../model/productSchema.js';
export const getProducts = async (request, response) => {

try {
const products = await Product.find({});
response.json(products);
}catch (error) {
}
}
export const getProductById = async (request, response) => {

try {
const products = await Product.findOne({ 'id': request.params.id });
response.json(products);
}catch (error) {
}
}
57 | P a g e
db.js
import mongoose from 'mongoose';
const Connection = async (username, password) => {

const URL =
`mongodb+srv://vipul1234:plenteous90009@plenteousvipul.hybgf.mongodb.net/Ecommerce
AppRajeev?retryWrites=true&w=majority`
try {
await mongoose.connect(URL, { useUnifiedTopology: true, useNewUrlParser: true,
useFindAndModify: false });
console.log('Database Connected Succesfully');
} catch(error) {
console.log('Error: ', error.message);
}
};
export default Connection;
PaytmChecksum.js
"use strict";
var crypto = require('crypto');
class PaytmChecksum {
static encrypt(input, key) {

var cipher = crypto.createCipheriv('AES-128-CBC', key, PaytmChecksum.iv);
var encrypted = cipher.update(input, 'binary', 'base64');
encrypted += cipher.final('base64');
return encrypted;
}
static decrypt(encrypted, key) {
58 | P a g e
var decipher = crypto.createDecipheriv('AES-128-CBC', key,
PaytmChecksum.iv);
var decrypted = decipher.update(encrypted, 'base64', 'binary');
try {
decrypted += decipher.final('binary');
}
catch (e) {
console.log(e);
}
return decrypted;
}
static generateSignature(params, key) {
if (typeof params !== "object" && typeof params !== "string") {
var error = "string or object expected, " + (typeof params) + " given.";
return Promise.reject(error);
}
if (typeof params !== "string"){
params = PaytmChecksum.getStringByParams(params);
}
return PaytmChecksum.generateSignatureByString(params, key);
}
static verifySignature(params, key, checksum) {

if (typeof params !== "object" && typeof params !== "string") {
var error = "string or object expected, " + (typeof params) + " given.";
return Promise.reject(error);
}
if(params.hasOwnProperty("CHECKSUMHASH")){
delete params.CHECKSUMHASH
}
if (typeof params !== "string"){
params = PaytmChecksum.getStringByParams(params);
}
59 | P a g e
return PaytmChecksum.verifySignatureByString(params, key, checksum);
}
static async generateSignatureByString(params, key) {

var salt = await PaytmChecksum.generateRandomString(4);
return PaytmChecksum.calculateChecksum(params, key, salt);
}
static verifySignatureByString(params, key, checksum) {

var paytm_hash = PaytmChecksum.decrypt(checksum, key);
var salt = paytm_hash.substr(paytm_hash.length - 4);
return (paytm_hash === PaytmChecksum.calculateHash(params, salt));
}
static generateRandomString(length) {
return new Promise(function (resolve, reject) {
crypto.randomBytes((length * 3.0) / 4.0, function (err, buf) {
if (!err) {
var salt = buf.toString("base64");
resolve(salt);
}
else {
console.log("error occurred in generateRandomString: "
+ err);
reject(err);
}
});
});
}
static getStringByParams(params) {
var data = {};
Object.keys(params).sort().forEach(function(key,value) {
60 | P a g e
data[key] = (params[key] !== null && params[key].toLowerCase() !==
"null") ? params[key] : "";
});
return Object.values(data).join('|');
}
static calculateHash(params, salt) {

var finalString = params + "|" + salt;
return crypto.createHash('sha256').update(finalString).digest('hex') + salt;
}
static calculateChecksum(params, key, salt) {
var hashString = PaytmChecksum.calculateHash(params, salt);
return PaytmChecksum.encrypt(hashString,key);
}
}
PaytmChecksum.iv = '@@@@&&&&####$$$$';
module.exports = PaytmChecksum;
Banner.jsx
PaytmChecksum;
import Carousel from 'react-multi-carousel';

import "react-multi-carousel/lib/styles.css";
import { styled } from '@mui/material';
import { bannerData } from '../../constants/data';
const Image = styled('img')({

width: '100%',
height: 280
})
61 | P a g e
const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 1
},
tablet: {
items: 1
},
mobile: {
items: 1
}
};
const Banner = () =>{

return(
<Carousel
swipeable={false}
draggable={false}
responsive = {responsive}
infinite={true}
autoPlay={true}
autoPlaySpeed={4000}
keyBoardControl={true}
slidesToSlide={1}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
containerClass="carousel-container"
>
{
62 | P a g e
bannerData.map(data => (
<Image src={data.url} alt="banner" />
))
}
</Carousel>
)
}
export default Banner;
Home.jsx
//components
import NavBar from './NavBar';
import Banner from './Banner';
import { styled,Box } from "@mui/material";
const Component = styled(Box)`

padding: 10px;
background: #F2F2F2;
`
const Home = () =>{

return(
<>
<NavBar />
<Component>
<Banner />
63 | P a g e
</Component>
</>
)
}
export default Home;
import { Box, Typography, styled } from "@mui/material";
import { navData } from "../../constants/data";

display: flex;
margin: 0px 130px 0 130px;
justify-content: space-between;
align-items: center;
`;
const Container = styled(Box)`

padding: 0px 8px;
text-align: center;
`;
const Text = styled(Typography)`

font-size: 14px;
font-weight: 600;
font-family: inherit;
`;
const NavBar = () =>{

return(
<Component>
{
64 | P a g e
navData.map(data => (
<Container>
<img src={data.url} alt="nav" style={{width: 64}}/>
<Text>{data.text}</Text>
</Container>
))
}
</Component>
)
}
export default NavBar;
Home.jsx
import {useState} from 'react';
import { Dialog, Box, TextField, Typography, Button, styled } from '@mui/material';

height: 70vh;
width: 108vh;
`
const Image = styled(Box)`
background: #2874f0 url(https://static-assets-web.flixcart.com/www/linchpin/fk-cp-
zion/img/login_img_c4a81e.png) center 85% no-repeat ;
height: 83%;
width: 28%;
padding: 45px 35px;
& > p, & h5 {
color: #FFFFFF;
font-weight: 600;
}
65 | P a g e
`
const Wrapper = styled(Box)`

display: flex;
flex-direction: column;
padding: 25px 35px;
flex: 1;
& > div, & button, & p {
margin-top: 20px;
}
`
const LoginButton = styled(Button)`
text-transform: none;
background: #FB641B;
color: #fff;
height: 48px;
border-radius: 2px;
`
const RequestOTP = styled(Button)`
text-transform: none;
background: #fff;
color: #2874f0;
height: 48px;
border-radius: 2px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
`;
const Text = styled(Typography)`

font-size: 12px;
color: #878787;
`;
const CreateAccount = styled(Typography)`
66 | P a g e
font-size: 14px;
text-align: center;
color: #2874f0;
font-weight: 600;
cursor: pointer;
`;
const accountIntialValues = {
login: {
view:'login',
heading: 'Login',
subHeading: 'Get access to your Orders, Wishlist and Recommendations'
},
signup: {
view: 'signup',
heading: "Looks like you're new here!",
subHeading: 'Sign up with your mobile number to get started'
}
}
const LoginDialog = ({ open, setOpen }) => {
const [account, toggleAccount] = useState(accountIntialValues.login);

setOpen(false);
toggleAccount(accountIntialValues.login);
}
const toggleSignup = () => {

toggleAccount(accountIntialValues.signup);
}
return (
67 | P a g e
<Dialog open={open} onClose={handleClose} PaperProps={{ sx: { maxWidth:
'unset'}}}>
<Component>
<Box style={{display: 'flex', height: '100%'}}>
<Image>
<Typography variant='h5'>{account.heading}</Typography>
<Typography style={{marginTop:
10}}>{account.subHeading}</Typography>
</Image>
{
account.view === 'login' ?
<Wrapper>
<TextField variant="standard" label="Enter Email/Mobile number"
/>
<TextField variant="standard" label="Enter Password" />
<Text>By continuing, you agree to Flipkart's Terms of Use and
Privacy Policy.</Text>
<LoginButton> Login </LoginButton>
<Typography style={{textAlign: 'center'}}>OR</Typography>
<RequestOTP> Request OTP </RequestOTP>
<CreateAccount onClick={()=>toggleSignup()}>New to Flipkart?
Create an account</CreateAccount>
</Wrapper>
:
<Wrapper>
<TextField variant="standard" label="Enter Firstname" />
<TextField variant="standard" label="Enter Lastname" />
<TextField variant="standard" label="Enter Username" />
<TextField variant="standard" label="Enter Email" />
<TextField variant="standard" label="Enter Password" />
<TextField variant="standard" label="Enter Phone" />
<LoginButton> Continue </LoginButton>
</Wrapper>
68 | P a g e
}
</Box>
</Component>
</Dialog>
)
}
export default LoginDialog;
data.js
export const products = [

{
id: 'product1',
url: 'https://rukminim1.flixcart.com/image/150/150/kapoo7k0/electric-kettle/p/6/s/pigeon-
favourite-original-imafs7xhj5uwgrh4.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kapoo7k0/electric-
kettle/p/6/s/pigeon-favourite-original-imafs7xhj5uwgrh4.jpeg?q=70',
title: {
shortTitle: 'Home & Kitchen',
longTitle: 'Pigeon FAVOURITE Electric Kettle (1.5 L, Silver, Black)'
},
price: {
mrp: 1195,
cost: 625,
discount: '47%'
},
quantity: 1,
69 | P a g e
description: 'This electric kettle from Pigeon will soon become a travelers best friend, a
hostelite saviour and an answer to all the midnight cravings. With this handy appliance, you
can boil water and use it to make instant noodles, packet soup, coffee and green tea.',
discount: 'Extra 10% Off',
tagline: 'Deal of the day'
},
{
id: 'product2',
url: 'https://rukminim1.flixcart.com/image/416/416/kl6wx3k0/sandwich-
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kl6wx3k0/sandwich-
title: {
shortTitle: 'Sandwich Makers',
longTitle: 'Flipkart SmartBuy Sandwich 01 Grill (Black)'
},
price: {
mrp: 1499,
cost: 899,
discount: '40%'
},
quantity: 1,
description: 'This non-stick sandwich toaster .easy to use and very handy. Directly hold
over flame to make tasty toasts and toasted sandwiches. Specially designed by keeping
your needs in mind, the sandwich maker makes whatever youre doing simpler, smarter and
better',
discount: 'From 99+5% Off',
tagline: 'Pestige, Nova & more'
},
{
id: 'product3',
url: 'https://rukminim1.flixcart.com/image/150/150/kohigsw0/resistance-tube/c/s/e/new-
adjustable-single-resistance-tube-multicolor-na-ajro-deal-original-
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kohigsw0/resistance-
tube/c/s/e/new-adjustable-single-resistance-tube-multicolor-na-ajro-deal-original-
title: {
70 | P a g e
shortTitle: 'Fitness Gear',
longTitle: 'AJRO DEAL New Adjustable Single Resistance Tube (Multicolor)
Resistance Tube (Multicolor)'
},
price: {
mrp: 499,
cost: 166,
discount: '66%'
},
quantity: 1,
description: 'This unique product can tone your back muscles, reduce belly fat, improve
blood circulation and also improves your body posture. It increases the stamina, energy and
vitality of the body. The elastic resistance of the rubber training rope can be used to train and
exercise in whichever way you want, according to your physical needs.',
discount: 'Upto 70% Off',
tagline: 'Deal of the Day'
},
{
id: 'product4',
url: 'https://rukminim1.flixcart.com/image/300/300/kll7bm80/smartwatch/c/1/n/43-mo-
sw-sense-500-android-ios-molife-original-imagyzyycnpujyjh.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kll7bm80/smartwatch/c/1/n/43-
mo-sw-sense-500-android-ios-molife-original-imagyzyycnpujyjh.jpeg?q=70',
title: {
shortTitle: 'Smart Watches',
longTitle: 'Molife Sense 500 Smartwatch (Black Strap, Freesize)',
},
price: {
mrp: 6999,
cost: 4049,
discount: '42%'
},
quantity: 1,
description: 'The Molife Sense 500, a brilliant smartwatch with a beautiful large display.
Say hello to the infinity 1.7-inch display with 2.5D curved edges. Thanks to seamless
Bluetooth 5.0 connectivity, you wont have to keep waiting. Bring a change to your outfit
every day with changeable straps. A splash of color every day keeps the boredom away.',
71 | P a g e
discount: 'Grab Now',
tagline: 'Best Seller'
},
{
id: 'product5',
url: 'https://rukminim1.flixcart.com/image/416/416/k3uhhu80/hair-dryer/n/m/t/nova-2800-
w-professional-nhp-8220-original-imafmvwfhmzsxdrw.jpeg?q=70',
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/k3uhhu80/hair-dryer/n/m/t/nova-
2800-w-professional-nhp-8220-original-imafmvwfhmzsxdrw.jpeg?q=70',
title: {
shortTitle: 'Trimmers, Dryers & more',
longTitle: 'Nova Professional NHP 8220 Hair Dryer (1800 W, Multicolor)'
},
price: {
mrp: 1899,
cost: 1124,
discount: '40%'
},
quantity: 1,
description: '',
discount: 'From ₹499',
tagline: 'Kubra, Nova & more'
},
{
id: 'product6',
url: 'https://rukminim1.flixcart.com/image/150/150/kk01pjk0/fan/d/d/l/tiktik-quiet-
detailUrl: 'https://rukminim1.flixcart.com/image/416/416/kk01pjk0/fan/d/d/l/tiktik-quiet-
title: {
shortTitle: 'Table Fans',
longTitle: 'Portable 300 mm Ultra High Speed 3 Blade Table Fan (Black, Pack of 1)'
},
price: {
mrp: 2250,
72 | P a g e
cost: 1199,
discount: '46%'
},
quantity: 1,
description: 'Table Fan. Perfect size fan for use on a table, desk or in an RV. Whisper
quiet, powerful airflow and reliable operation in a compact 6" size. Two adjustable speeds to
customize airflow: high or low settings. Tough break-resistant ABS plastic blades. ',
tagline: 'Top Selling'
},
{
id: 'product7',
url: 'https://rukminim1.flixcart.com/image/150/150/kcgk1ow0/headphone/n/u/a/235v2-
fast-charging-boat-original-imaftk6us4af7bca.jpeg?q=70',
detailUrl:
'https://rukminim1.flixcart.com/image/416/416/kcgk1ow0/headphone/n/u/a/235v2-fast-
charging-boat-original-imaftk6us4af7bca.jpeg?q=70',
title: {
shortTitle: 'Headphones',
longTitle: 'boAt Rockerz 235v2 with ASAP charging Version 5.0 Bluetooth Headset '
},
price: {
mrp: 2990,
cost: 1199,
discount: '59%'
},
quantity: 1,
description: 'Let music brighten up your mood anytime, anywhere with the boAt 235v2
Fast Charging Bluetooth Headset. This Bluetooth headset features a Call Vibration Alert, a
Fast Charging Technology, and Easy Access Controls to listen to and manage your favorite
music with ease.',
tagline: 'Grab Now!'
}
];
73 | P a g e
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
74 | P a g e
Output Screen
Homepage
Product Page
75 | P a g e
Order Page
Order Placed
76 | P a g e
Future Scope
Personalized Shopping Experience:**

Implement advanced AI and machine learning algorithms to analyze user
behaviour and preferences. This can enable the app to offer highly personalized
product recommendations, tailored promotions, and a unique shopping journey for
each user.
Augmented Reality (AR) and Virtual Reality (VR) Integration:

Enable customers to virtually try on products before purchasing, such as clothing,
accessories, or even furniture. This immersive experience can enhance customer
confidence and reduce returns, ultimately improving customer satisfaction.
Voice and Visual Search:

Integrate voice and visual search functionality using AI-powered recognition
systems. This can make the shopping process more intuitive and efficient, allowing
users to find products by describing them or taking pictures.
Blockchain and Cryptocurrency Integration:

Implement blockchain technology for secure and transparent transactions. You
could also consider accepting cryptocurrencies as a form of payment, catering to
tech-savvy customers and potentially expanding your customer base.
Sustainable and Ethical Shopping:

Highlight eco-friendly and ethically sourced products. Consumers are becoming
more conscious of their purchasing choices, and integrating sustainability metrics
into product listings could attract environmentally conscious customers.
Social Commerce:
Integrate social media features within the app, allowing users to share their
purchases, reviews, and recommendations. This can create a sense of community
and drive user engagement.
Subscription Services:
Offer subscription-based models for products that customers regularly purchase,
such as groceries, personal care items, or pet supplies. This can provide a steady
revenue stream and enhance customer loyalty.
77 | P a g e
Real-time Customer Support:
Develop AI-powered chat bots for instant customer assistance. These bots can
handle common queries, provide product information, and even process orders,
enhancing the overall shopping experience.
Cross-Channel Consistency:
Ensure a seamless shopping experience across various platforms, such as mobile
apps, websites, and even emerging platforms like smart TVs or smart speakers.
Consistency helps build trust and loyalty.
Data-driven Insights:
Invest in advanced analytics tools to gain insights into customer behavior,
purchasing trends, and inventory management. This data-driven approach can
optimize inventory, marketing strategies, and user experience.
Global Expansion:
Explore opportunities to expand your eCommerce platform to international
markets. This might involve tailoring the app to different languages, currencies, and
local preferences.
Gamification Elements:
Incorporate gamification elements like loyalty programs, reward points, and
interactive challenges to engage users and encourage repeat purchases.
One-Click Purchasing:
Streamline the checkout process with one-click purchasing options, reducing cart
abandonment rates and making the purchase journey more frictionless.
Artificial Intelligence for Inventory Management

Implement AI algorithms to predict demand and optimize inventory levels. This can
reduce overstocking and under stocking issues, leading to better cost management.
78 | P a g e
Conclusion
Technology has made significant progress over the years to provide consumers a
better online shopping experience and will continue to do so for years to come. With
the rapid growth of products and brands, people have speculated that online
shopping will overtake in-store shopping. While this has been the case in some
areas, there is still demand for brick and mortar stores in market areas where the
consumer feels more comfortable seeing and touching the product being bought.
However, the availability of online shopping has produced a more educated
consumer that can shop around with relative ease without having to spend a large
amount of time. In exchange, online shopping has opened up doors to many small
retailers that would never be in business if they had to incur the high cost of owning
a brick and mortar store. At the end, it has been a win-win situation for both
consumer and sellers.
Bibliography
https://www.mongodb.com/
https://nodejs.org/en/docs
https://www.tutorialspoint.com/expressjs/index.htm
https://stackoverflow.com/
https://github.com/
https://mongoosejs.com/docs/
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://reactrouter.com/en/6.15.0/web/guides/quick-start
https://axios-http.com/docs/intro
https://redux.js.org/introduction/getting-started
https://expressjs.com/
79 | P a g e

NXT Shop Documentation

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

NXT Shop Documentation

Uploaded by

Copyright:

Available Formats

Nxt Shop : Shopping Application

A project report submitted in partial fulfilment of the

Master of Computer Application (MCA)

DR. SHYAMA PRASAD MUKHERJEE UNIVERSITY, RANCHI

A task or project cannot be completed alone. It requires the effort of many

Name: RAJEEV RANJAN

Roll No.: 21MC515224

Name : RAJEEV RANJAN

Roll No.: 21MC515224

NAME: DR. I.N. SAHU

Is approved and is acceptable in quality and form.

External Examiner Internal Examiner

Name : RAJEEV RANJAN

Roll No. : 21MC515224 Certified

The key objectives of this project include:

Comprehensive Product Catalogue: The app features a diverse product catalog,

Personalization and Recommendations: Nxt Shop employs advanced algorithms to

Multi-Platform Support: Nxt Shop is designed as a cross-platform application,

Shopping cart software is a piece of e-commerce software on a web

Need of the application

Features of Nxt Shop:

1. Secure registration and profile management facilities for Customers.

Benefits of Nxt Shop

6. Easy Price Comparisons

9. You Can Buy Used or Damaged Items at Lower Prices

10. Discrete Purchases Are Easier

Additional Benefits of Shopping Online

Disadvantages of Nxt Shop : Shopping Application

1. Negative Environmental Impact of Packaging and Gas

2. Shipping Problems and Delays

4. Spending Too Much Time Online

5. Less Contact With the Community

6. You Don't Know Exactly What You're Getting

7. Returns Can Be Complicated

8. Unfriendly, Scammy, or Complicated Websites

10. No Support for Local Retailers

Software Requirements Specification (SRS) for Nxt Shop : Shopping Application

Technologies Used for Making This Site

Tim Berners-Lee in April 2009

The rise of JScript

In November 1996, Netscape submitted JavaScript to Ecma International, as the

Meanwhile, Microsoft gained an increasingly dominant position in the browser

Microsoft initially participated in the standards process and implemented some

Growth and standardization

Meanwhile, very important developments were occurring in open-source

Ambitious work on the language continued for several years, culminating in an

The ECMAScript draft specification is currently maintained openly on GitHub, and

"JavaScript" is a trademark of Oracle Corporation in the United States.

Examples of scripted behavior

Libraries and frameworks

jQuery is by far the most popular library, used by over 75% of

Initial attempts at promoting server-side JavaScript usage were Netscape Enterprise

JavaScript has recently begun to appear in some embedded systems, usually by

The following features are common to all conforming ECMAScript implementations

Imperative and structured

JavaScript supports much of the structured programming syntax

Data Modeling Introduction

Data Use and Performance

Key Features and Concepts of React:

Component-Based : React encourages a modular approach to building UIs. Developers

Design of Nxt Shop : Shopping Application

Added to Cart Item