A Minor Project Report on

Submitted in partial fulfillment of the

requirements for the award of the degree of

Bachelor of Computer Applications (BCA)

Guide: Submitted by:

Ms. Vandana Dabass TUSHAR (10124402021)

Associate Professor (CS) AKSHIT GUPTA (06224402021)

SACHIN ASWAL (089)

Institute of Innovation in Technology &

Management New Delhi – 1100 58

Batch (2021-2024)

Page | 1
 Acknowledgement

I would like to express my sincere gratitude to all those who have contributed to the successful

completion of the Minor Project “an E-commerce

First and foremost, I extend my heartfelt thanks to MR DHRUV, our project supervisor, for

their invaluable guidance, continuous support, and constructive feedback throughout the

development process. Their expertise and insights were instrumental in shaping the project and

overcoming various challenges.

I would also like to extend my appreciation to my fellow team members who worked diligently

to bring this project to fruition. Each team member's dedication and collaborative spirit played a

crucial role in the project's success. Our collective effort and teamwork significantly enriched

the quality of the final deliverable.

Special thanks are due to Dr Madhu Chauhan for their valuable insights and expertise, which

greatly contributed to the enhancement of our project.

Lastly, I would like to thank my family and friends for their unwavering support and

encouragement throughout the project's duration.

This project has been an incredible learning experience, and the knowledge gained will

undoubtedly serve as a foundation for our future endeavors.

Thank you to everyone who played a part in making this project a success.

TUSHAR(101)

AKSHIT GUPTA (062)

SACHIN ASWAL (088)

Page | 2
 SELF CERTIFICATE

This is to certify that the dissertation/project report entitled “” is done by me is an authentic

work carried out for the partial fulfilment of the requirements for the award of the degree of

Bachelor of Computer Applications under the guidance of MR DHRUV. The matter

embodied in this project work has not been submitted earlier for award of any degree or

diploma to the best of my knowledge and belief.

Signature of the students:

Name of the Students:

TUSHAR (101)
AKSHIT GUPTA (062)
SCHINASWAL (088)

Signature of the students Signature of the Guide

Page | 3
 SYNOPSIS

TITLE OF PROJECT:
– An Ecommerce Product

STATEMENT ABOUT THE PROBLEM

In the rapidly evolving digital marketplace, E-commerce aims to establish a robust online platform that addresses the
critical challenges faced by consumers and sellers alike. Despite the proliferation of e-commerce websites, many still
struggle with issues such as poor user experience, inefficient order fulfillment, limited payment options, and
inadequate customer support. These shortcomings hinder the growth potential of e-commerce businesses and diminish
customer satisfaction.

The proposed e-commerce website will be designed to overcome these obstacles by implementing a user-centric
interface, streamlined logistics, diverse payment gateways, and responsive customer service. The project will focus on
harnessing cutting-edge technologies to create a seamless shopping experience, ensuring timely delivery of products,
providing secure and convenient payment methods, and establishing a 24/7 support system to address customer
inquiries and concerns.

By addressing these issues, the e-commerce website aims to enhance the overall shopping experience, foster customer
loyalty, and position itself as a leading contender in the competitive online retail market.
.

This synopsis provides an overview of our project, outlining its objectives, key features, and

the technologies employed to develop this innovative e-commerce platform. Through

meticulous planning, coding, and testing, we aspire to deliver a practical and functional

solution that showcases our proficiency in web development and contributes to the ever-

evolving world of online retail.

Page | 4
 WHY IS THE TOPIC CHOSEN ?

1. Relevance: E-commerce is a booming industry with exponential growth potential. With the

increasing trend towards online shopping, there is a constant demand for efficient, user-

friendly, and scalable e-commerce platforms. Developing such a platform aligns with current

market needs.

2. Learning Opportunities:

 HTML: You’ll get hands-on experience with creating structured web pages using various

HTML elements. You’ll learn how to use forms for user input, tables for data presentation,

and links for navigation.

 CSS: This project will enhance your understanding of CSS for styling web pages. You’ll learn

about different CSS properties, selectors, and how to create responsive designs that work on

various screen sizes.

 JavaScript: Implementing dynamic functionality on the website will improve your JavaScript

skills. You’ll learn about DOM manipulation, event handling, and making AJAX requests for

dynamic data loading.

 Front-End Frameworks: You might also get the chance to work with front-end frameworks

like Bootstrap or jQuery, which can make development faster and easier.

 Back-End Integration: If your e-commerce site includes server-side processing, you’ll learn

about making API calls and handling responses.

 Database Management: If your project involves a database, you’ll learn about CRUD

operations (Create, Read, Update, Delete), and how to interact with a database using an API.

3. Practical Application: Building a real-world e-commerce platform provides a tangible

application of the theoretical concepts we have learned throughout our academic journey. It

Page | 5
 allows us to apply our coding, design, and project management skills to solve complex

problems.

4. Innovation and Creativity: Developing an e-commerce platform allows for creative

problem-solving and innovation. We can explore unique features, user interfaces, and

marketing strategies that can make our platform stand out in a competitive market.

5. Entrepreneurial Mindset: This project encourages an entrepreneurial mindset by

challenging us to think like business owners. We must consider user experience, security,

scalability, and market competitiveness, mirroring the decisions made by real e-commerce

entrepreneurs

In conclusion, the choice of "Building an E-commerce Platform with the MERN Stack" combines the

practicality of addressing a growing market need with the educational benefits of working with

cutting-edge technologies. It represents an exciting and impactful project that aligns with our

academic and career aspirations.

Page | 6
 OBJECTIVE AND SCOPE OF THE PROJECT

The primary objective of the e-commerce website project is to develop a state-of-the-art

online retail platform that provides a seamless shopping experience for customers while
streamlining business operations. The project aims to:

- Deliver a user-friendly interface that simplifies product discovery and purchasing.

- Implement efficient order processing and logistics management systems.
- Offer a broad selection of products across various categories.
- Provide secure and diverse payment methods.
- Utilize data analytics to enhance customer engagement and satisfaction.
- Ensure high-level security to protect user data and build trust.
- Achieve scalability to support business growth.
- Incorporate sustainable practices in business operations.
- Drive increased sales and profitability.

Page | 7
 Scope
The scope of the project encompasses the following areas:

1. Website Design and Development: Crafting a visually appealing and easy-to-navigate

online store.

2. Product Management: Curating a wide range of products and managing inventory

effectively.

3. Order Fulfillment: Establishing a reliable system for processing and delivering orders
promptly.

4. Payment Gateway Integration: Integrating multiple payment options to facilitate easy

transactions.

5. Customer Service: Setting up a responsive support system to handle queries and issues.

6. Marketing and Promotion: Implementing strategies to attract and retain customers.

7. Data Security: Ensuring the confidentiality and integrity of customer information.

8. Analytics and Reporting: Analyzing performance metrics to inform business decisions.

9. Compliance and Legal: Adhering to e-commerce regulations and best practices.

10. Sustainability Initiatives: Reducing the environmental impact of e-commerce activities.

By defining the objective and scope, the project establishes clear expectations and
boundaries, ensuring that all stakeholders are aligned and the project stays on track to meet
its goals

Page | 8
 METHODOLOGY

• Requirement Analysis:

- Gather requirements from stakeholders.

- Define the target audience and their needs.

- Establish website objectives and features.

• Planning:

- Create a sitemap outlining the structure of the website.

- Develop wireframes for each webpage.

- Plan the user flow and navigation paths.

• Design:

- Design the user interface with a focus on aesthetics and usability.

- Select a color scheme and typography that aligns with the brand identity.

- Create mockups for each page.

• 4. Development:

- HTML: Write the semantic markup for the structure of webpages.

- CSS: Style the website with responsive design techniques for various devices.

- JavaScript: Implement interactive elements and client-side scripting.

• 5. Content Creation:

- Write engaging and SEO-friendly product descriptions.

- Add high-quality images and videos of products.

- Ensure all content is accessible and easy to understand.

Page | 9
• 6. Testing:

- Conduct functionality tests for all features.

- Perform cross-browser and device compatibility checks.

- Validate code and fix any issues.

• 7. Launch:

- Deploy the website on a reliable hosting platform.

- Monitor the site's performance and user behavior.

- Make necessary adjustments based on feedback.

• 8. Maintenance:

- Regularly update content and products.

- Patch security vulnerabilities.

- Optimize site speed and performance.

• 9. Evaluation:

- Analyze website traffic and user engagement metrics.

- Gather user feedback for continuous improvement.

- Adjust strategies to meet business goals.

By following this methodology, you can ensure that your e-commerce website is built on a solid foundation,

offering a great shopping experience for users and meeting business objectives.

Page | 10
SUMMARY OF THE PROJECT

In summary, our project aims to develop a robust and feature-rich e-commerce. By following a

structured methodology, we intend to create a user-friendly and secure platform that offers a

seamless shopping experience for customers while providing efficient management tools for

administrators.

Our project's scope includes essential features such as user authentication, product catalog,

shopping cart, secure payment processing, and order management. We prioritize security,

scalability, and responsiveness to cater to the needs of modern online shoppers.

Throughout the project's lifecycle, we will focus on delivering a high-quality solution that aligns

with industry standards and best practices, demonstrating our competence in web development.

Ultimately, our goal is to contribute a valuable e- commerce platform that meets user

expectations and serves as a practical showcase of our technical skills and innovation.

Page | 11
 HARDWARE AND SOFTWARE TO BE USED:
Hardware Requirements:

• Server: A robust server is crucial for hosting the website and handling traffic. For

small to medium-sized e-commerce sites, a server with at least 1.6 GHz CPU and 4GB RAM

is recommended1.

• Database Storage: Minimum 10GB of database space is required to store product

information, customer data, and transaction records1.

• Network Infrastructure: Adequate bandwidth and network hardware to ensure fast and

reliable internet connectivity.

Software Requirements:

• Domain Name: A unique and memorable domain name that represents your brand.

• Hosting Provider: A reliable hosting service to store website data and ensure uptime.

• E-commerce Platform: Software like Magento or WooCommerce that provides the

framework for your online store

• Content Management System (CMS): To create and manage digital content

efficiently.

• Payment Gateway Integration: Secure payment processing solutions for handling

transactions.

• SSL Certificate: To encrypt data and protect sensitive information.

• Database System: For organizing and retrieving data quickly.

• Analytics Tools: To track website performance and customer behavior.

• Marketing and SEO Tools: For promoting the website and improving search engine

rankings.

These are the foundational elements required to launch and maintain an e-commerce website.

Depending on the scale and complexity of your website, you may need more advanced

hardware and additional software features. It’s important to assess your business needs and

choose the right combination of hardware and software to support your e-commerce

Page | 12
 operations effectively

By carefully selecting and configuring these hardware and software components, our project

aims to create a robust, scalable, and secure e-commerce platform that can effectively meet

the demands of modern online retail while maintaining a high level of performance and

reliability.

Page | 13
 CONTRIBUTION OF THE PROJECT:

The development of an E-commerce represents a significant contribution with multiple

dimensions, addressing the needs of various stakeholders:

I. Economic Growth: The project contributes to economic growth by enabling businesses,

especially small and medium-sized enterprises (SMEs), to establish and expand their

online presence. By providing a ready-made, customizable e-commerce platform, we

empower entrepreneurs to reach a broader customer base and compete effectively in the

digital marketplace.

II. User Convenience: The platform enhances the shopping experience for consumers by

offering a user-friendly interface, secure payment processing, and an extensive product

catalog. This contributes to increased user satisfaction and loyalty, fostering a positive

online shopping culture.

III. Technological Advancement: the project contributes to technological advancement within

the field of e-commerce. It serves as a practical example of how modern web technologies

can be harnessed to create robust and scalable solutions.

IV. Education and Skill Development: The project provides a valuable learning opportunity

for developers and aspiring technologists. It allows them to gain hands-on experience with

HTML CSS & JAVA SCRIPT, best practices in software development, and real- world

problem-solving. This contributes to the growth of a skilled workforce in the technology

sector.

Page | 14
 V. OpenSource Community: The project can be open-sourced, making its codebase

available to the wider development community. This fosters collaboration, innovation,

and the sharing of knowledge, ultimately contributing to the advancement of open- source

technologies.

VI. Business Innovation: The platform's feature set, including secure payment integrationand

product management tools, can serve as a foundation for business innovation.

Entrepreneurs and developers can build upon this project to create unique e-commerce

solutions tailored to specific industries or niches, thereby contributing to entrepreneurial

innovation.

VII. Environmental Impact: By promoting online shopping, the project indirectly contributes

to reducing the carbon footprint associated with traditional brick-and-mortar retail. This

aligns with sustainable practices and the conservation of environmental resources.

In summary, the development of an E- makes a multifaceted contribution by fostering economic

growth, improving user experiences, advancing technology, nurturing skill development,

promoting open-source collaboration, inspiring innovation, considering environmental impacts,

and enabling data-driven decision- making. These contributions collectively position the project

as an asset to the e-commerce ecosystem and the broader technology community.

Page | 15
 MAIN REPORT

1. PURPOSE

The main purpose of this website is to increase the point of customer choice, reduce time

used in shopping and efficiency in buying products. To develop an easy way to useweb-

based interface where users can search for product view the details of the product and order

it without going to market. It minimizes the shopping time of customer, increase the point of

choice. It also facilitates the service provider to know the current stats of market and take

decision which product are selling more now a days and must keep in store

Page | 16
 2. OBJECTIVE
The primary objective of the e-commerce website project is to develop a state-of-the-art
online retail platform that provides a seamless shopping experience for customers while
streamlining business operations. The project aims to:

- Deliver a user-friendly interface that simplifies product discovery and purchasing.

- Implement efficient order processing and logistics management systems.
- Offer a broad selection of products across various categories.
- Provide secure and diverse payment methods.
- Utilize data analytics to enhance customer engagement and satisfaction.
- Ensure high-level security to protect user data and build trust.
- Achieve scalability to support business growth.
- Incorporate sustainable practices in business operations.
- Drive increased sales and profitability.

3. SCOPE

The scope of the project encompasses the following areas:

1. Website Design and Development: Crafting a visually appealing and easy-to-navigate

online store.

2. Product Management: Curating a wide range of products and managing inventory

effectively.

3. Order Fulfillment: Establishing a reliable system for processing and delivering orders

promptly.

4. Payment Gateway Integration: Integrating multiple payment options to facilitate easy

transactions.

Page | 17
 5. Customer Service: Setting up a responsive support system to handle queries and issues.

6. Marketing and Promotion: Implementing strategies to attract and retain customers.

7. Data Security: Ensuring the confidentiality and integrity of customer information.

8. Analytics and Reporting: Analyzing performance metrics to inform business decisions.

9. Compliance and Legal: Adhering to e-commerce regulations and best practices.

10. Sustainability Initiatives: Reducing the environmental impact of e-commerce activities.

By defining the objective and scope, the project establishes clear expectations and boundaries,

ensuring that all stakeholders are aligned and the project stays on track to meet its goals..

Page | 18
 THEORETICAL BACKGROUND DEFINITION OF PROBLEM:

The purpose of this project is to make a web application which will make it easier to find

interesting clothes and easier to sell goods. This E-commerce web application admin can add

some categories like summer sales, winter festival, etc. which will attract customers.

Customers also can easily search for their favorite goods. They can also buy them easily by

just adding them to the cart and they can increase or decrease by clicking on the "+" sign and

"-" sign. After adding they can check the total amount of the thing which has been added to

the cart. A successful payment gateway enables payments to be made by debit card, credit

card, and net banking.

By encountering all problems and weaknesses of the offline shopping system, creating an E-

commerce web application is necessary for searching and shopping in each shop. These days

we have seen so many e-commerce websites are created like Flipkart, Amazon, Myntra one

can easily buy their necessary products by using these websites. By using these types of

websites one can buy their products by staying in their home. Eventually, we can see the

difference between the prices of products also as if we see the cost of the product will be

slightly high in offline shopping when compared to online shopping. For creating these types

of E-commerce

web applications MERN stack will be the best option that can help us for creating the most

effective and powerful web applications

Page | 19
SYSTEM REQUIREMENT AND SPECIFICATION:

Software Requirement Specifications-

A Software requirements specification (SRS), a requirements specification for a software

system, is a complete description of the behavior of a system to be developed and may include a

set of use cases that describe interactions the users will have with the software. In addition, ita

lso contains non-functional requirements. Non-functional requirements impose constraints on the

design or implementation (such as performance engineering requirements, quality standards, or

design constraints). The software requirements specification document enlists all necessary

requirements that are required for the project development. To meet the requirements, we need to

have a clear and thorough understanding of the products to be developed. This is prepared after

detailed communications with the project team and customer.

1. Introduction

The following subsections of Software Requirement Specifications Document should facilitatein

providing the entire overview of the Information system “” - an ecommerce platform” under

development. This document aims at defining the overall software requirements for end

users. Efforts have been made to define the requirements of the Information system

exhaustively and accurately.

1.1 Purpose

The main purpose of Software Requirement Specifications Document is to describe in a precise

manner all the capabilities that will be provided by the Software Application “Netkart”. It also

states the various constraints which the system will abide to. This document further leads to a

clear vision of the software requirements, specifications and capabilities. These are to be

exposed to the development, testing team and end users of the software.

Page | 20
1.2 Scope

The scope of our project is districted to following modules like-Registration, Login, Product

Categories, add to Cart, Create Orders, Make Payment, Give Feedback, Logout.

1.3 Definition, acronyms, abbreviations

 DFD: Data Flow Diagram

 ERD: Entity Relationship Diagram

 SRS: Software Requirement Specification

1.4 References

 PRIMARY SOURCES:

o https://www.flipkart.com/

o https://www.amazon.com/

 SECONDARY SOURCES:
o Industry reports, News articles, social media, Online forums, Publicly

available financial reports, Newspaper, magazines.

1.5 Overview

The rest of this SRS document describes the various system requirements, interfaces, features

and functionality in detail.

2. Overall description of proposed system

2.1 Product Perspective

The application will be a windows-based, self-contained and independent software product.

Page | 21
2.1.1 System Interfaces: None

2.1.2 Interfaces

The application will have a user-friendly and menu-based interface.

The following screens will be provided.

1. A Login Screen for entering username, password

2. A Sign in, Sign up

3. Home Screen

4. Items Added to Cart

2.1.3 Hardware Interfaces

Processor: Intel Core i3 or

equivalent RAM: 4GB or higher

Hard disk: 100GB or higher

Display: 1024x768 or higher resolution

Operating System: Windows 7 or higher, or mac OS 10.12 or higher

Web Browser: Chrome, Firefox, Safari, or Microsoft Edge

2.1.4 Software Interfaces

1. Operating system

2. Backend – MERN (MongoDB, Express JS, React Js, NodeJS)

3. Frontend – HTML, CSS, JavaScript

4. Web browser

2.1.5 Communication Interfaces

None

Page | 22
2.1.6 Memory Constraints

At least 1gb of RAM and 2GB of hard disk will be required for running the website.

2.1.7 Operations

This product will not cover any automated housekeeping aspects of the database. The DBA at

client site will be manually deleting old/ non required data. Database backup and recovery will

also have to be handled by DBA.

2.1.8 Site Adaptation Requirement

The terminals at the client side will have to support the hardware and software interfaces

specified.

Page | 23
2.2 Product functions

The system will allow access only to authorized users with specific roles (Administrator,

Operator). Depending upon the user’s role, he/she will be able to access only specific

modulesof the system.

2.3 User Characteristics

1. Educational Level: At least graduate and should be comfortable with English language.

2. Technical Expertise: Should be a high or middle level employee of the organization

comfortable with using general purpose applications on a computer

2.4 Constraints: None

2.5 Assumptions and Dependencies: None

2.6 Apportioning Requirement: Not Required

3. Specific Requirements

This section contains the software requirements to a level of detail sufficient to enable

designersto design the system, and testers to test the system.

3.1 External Interfaces

3.1.1 User Interfaces

The following screens will be provided.

1. A Login Screen for entering username, password

2. A Sign in, Sign up

3. Home Screen

4. Items Added to Cart

Page | 24
3.1.2 Hardware Interfaces

1. Processor: Intel Core i3 or equivalent

2. RAM: 4GB or higher

3. Hard disk: 100GB or higher

4. Display: 1024x768 or higher resolution

5. Operating System: Windows 7 or higher, or mac OS 10.12 or higher

6. Web Browser: Chrome, Firefox, Safari, or Microsoft Edge

3.1.3 Software Interfaces

7. Operating system

8. Backend – MERN (MongoDB, Express JS, React Js, NodeJS)

9. Frontend – HTML, CSS, JavaScript

10. Web browser

3.1.4 Communication Interfaces

None

3.1.5 System Features

After analysis of project, we conclude that project can be implemented in 3 major modules:

a. Registration, Login:Using this module user can register or login.

a. Validity checks: Name should not be blank.

b. Users should enter their phone number.

c. Users should enter their address.

d. E-mail id should be filled.

b. Error handling / Response to abnormal situations

Page | 25
 a. If user left any field blank, then it shows an error alert box.

b. If registration / login is successful, then it shows a message above

from regarding successful registration / login.

c. Ordermodule:

After registration or login users can view products and order them.

3.2 Performance Requirements:

None

3.3 Logical Database Requirements

The proposed information system contains the following data tables in its database collection.

1. User Table: In this table customer details are stored. The fields are:

a. Full Name

b. Address

c. Email

d. Password

e. Phone No

2. Order Table: In this table booking details are stored. The fields are:

a. User id

b. Product Id

c. Price

d. Quantity

3. Product Details: In this table payment details are stored. The fields are:

Page | 26
 a. Name

b. Description

c. Image

d. Price

e. Category

f. Rating

g. Stock

3.4 Design Constraints

3.4.1 Standard Compliance:

None

3.5 Software System Attributes

1. Reliability

This application is a reliable product that produces fast and verified output of all itsprocesses.

2. Availability

This application will be available to use for your end users and will help them to carryout

their operations conveniently.

3. Security

The application will be password protected. Users will have to enter the correctusername,

password and role in order to access the application.

4. Maintainability

The application will be designed in a maintainable manner. It will be easy to toincorporate

new requirements in the individual modules.

Page | 27
 5. Portability

The application will be easily portable on any windows-based system that has oracle

installed.

3.6 Other Requirements

None

Page | 28
METHODOLOGY USED FOR DATA COLLECTION

AGILE MODEL

1. The meaning of Agile is swift or versatile.

2. It refers to a software development approach based on iterative development.

3. Agile methods break tasks into smaller iterations, or parts which do not directly involve

long term planning.

4. The project scope and requirements are laid down at the beginning of the development

process.

5. Plans regarding the number of iterations, the duration and the scope of each iteration are

clearly defined in advance.

6. The Agile SDLC model is a combination of iterative and incremental process models

with a focus on process adaptability and customer satisfaction by rapid delivery of

working software products.

7. Agile model believes that every project needs to be handled differently and the existing

methods need to be tailored to best suit the project requirements. In Agile, the tasks are

divided into time boxes (small time frames) to deliver specific features for a release.

8. Iterative approach is taken and working software build is delivered after each iteration.

Each build is incremental in terms of features; the final build holds all the features

required by the customer.

Page | 29
PHASES OF AGILE MODEL:

Following are the phases in the Agile model are as follows:

1. Requirements gathering.

2. Design the requirements.

3. Construction/ iteration.

4. Testing/ Quality assurance.

5. Deployment.

6. Feedback.

HARDWARE REQUIREMENT:
1. Processor: Intel Core i3 or equivalent

2. RAM: 4GB or higher

3. Hard disk: 100GB or higher

4. Display: 1024x768 or higher resolution

5. Operating System: Windows 7 or higher, or mac OS 10.12 or higher

6. Web Browser: Chrome, Firefox, Safari, or Microsoft Edge

Page | 30
2.1.4 SOFTWARE REQUIREMENT:

1. Operating system

2. Backend – MERN (MongoDB, ExpressJS, ReactJs, NodeJS)

3. Frontend – html, css, javascript

4. Web browser

Page | 31
DETAILED LIFE CYCLE OF THE PROJECT

DFD is the abbreviation for Data Flow Diagram. The flow of data of a system or a process is

represented by DFD. It also gives insight into the inputs and outputs of each entity and the

process itself.

SYMBOLS USED IN DFD

GUIDELINES

No 2 data stores can be

connected.No 2 processes can be

connected.

There are many levels of DFD as per the software but the most basic is zero level.

Page | 32
Zero level DFD
It represents the entire system as a single bubble and provides an overall picture of the system.

One level DFD

It represents the main functions of the system and how they interact with each other.

Page | 33
 SYSTEM ANALYSIS

System Analysis is a management technique, which helps in designing a new system or

improving an existing system. System Analysis is the process of gathering and interpreting facts,

diagnosing problems (if any), using information to recommend improvements to the

system. There are four basic elements of system analysis: - Output, Input, Files, processes. For

computerization of any system, the existing system must be thoroughly understood to determine

“how the computer can be best used to make its operation most effective”. This is acquired by

analyzing existing systems.

PROCESS INVOLVED:

Step-by-Step guide to developing a MERN stack application:

Step 1: Set up your development environment

To start building your MERN stack application, you'll need to set up your development

environment. Install Node.js, MongoDB, and a code editor like Visual Studio Code.

Step 2: Create a new Node.js project

Create a new Node.js project by running npm init in your project directory. This will create a

package.json file that tracks your project's dependencies.

Step 3: Install the required packages

Install the following packages using the npm install command:

 express - A Node.js web application framework

 mongoose - A MongoDB object modeling tool

 cors - A package that allows Cross-Origin Resource Sharing (CORS) in Express

 dotenv - A package for managing environment variables

Page | 34
Step 4: Set up the server
Create a new file server.js in the root directory of your project. In this file, import the required

packages, configure the app, and connect to MongoDB. You can use the following code as a

starting point:

In the models directory, create a new file example.model.js. In this file, define the schemafor

your data and export a model that can be used to interact with the database. You can use

the following code as a starting point:

Page | 35
Step 5: Set up the API routes
In the routes directory, create a new file example.js. In this file, define the API routes for

your application. You can use the following code as a starting point:

Page | 36
Step 6: Connect the API routes to the server
In the server.js file, import the API routes and use them in your app using the app.use()

method. You can use the following code as a starting point:

Step 7: Create the frontend

Create a new directory called client in the root directory of your project. In the client

directory, run npx create-react-app . to create a new React application. This will create a

basic React application in the client directory.

Step 8: Set up the frontend dependencies

In the client directory, install the following packages using the npm install command:

 axios - A package for making HTTP requests

 react-router-dom - A package for handling client-side routing in React

 bootstrap - A popular CSS framework for building responsive designs

Step 9: Set up the frontend components

In the src directory of the client directory, create a new directory called components. In the

components directory, create a new file Example.js. In this file, create a React component

that displays the example data. You can use the following code as a starting point:

Page | 37
Step 10: Create the frontend views

In the src directory of the client directory, create a new directory called views. In the views

directory, create a new file ExamplesList.js. In this file, create a React component that

displays a list of examples. You can use the following code as a starting point:

Step 11: Set up the frontend routes

In the src directory of the client directory, create a new file App.js. In this file, set up the

client-side routing using react-router-dom. You can use the following code as a starting

point:

Set up the frontend routes

In App.js, add the following code to set up the routes:

Page | 38
This code sets up the client-side routing for the Examples List view.

Step 12: Test the application

In the root directory of your project, start the backend server by running node server.js. In a

new terminal window, navigate to the client directory and run npm start to start the frontend

server.

Page | 39
TEST REPORT, PRINTOUT OF THE REPORT & CODESHEET
This code sets up the client-side routing for the Examples List view.

How Does Google Lighthouse Work?

Google Lighthouse works by performing audits for five main website optimization categories.

1. Performance

In this audit, Lighthouse measures how quickly a website loads and how quickly users can

access it.

It reports your performance for five speed metrics, each measuring some aspect of pageSPEED

2. First Contentful Paint (FCP): Measures the time at which the first text or

image becomes visible to users

3. Largest Contentful Paint (LCP): Calculates the time a page takes to load its

largest element for users

Page | 40
 Total Blocking Time (TBT): Measures the amount of time that a page is

blockedfrom reacting to user input, like a mouse click

 Cumulative Layout Shift (CLS): Measures the layout shifts that occur as

users access a page

 Speed Index (SI): Shows how quickly the content of a page is loaded

Lighthouse assigns an overall performance score to a page based on how your page performed

for all these metrics. The score can be anything from 0 to 100.

If your score is between 90 and 100, it indicates that your page is well optimized for user

experience. Anything below 90 means a significant number of resources on your page are

slowing thingsdown, affecting the overall page experience. Lighthouse also offers suggestions.

Which you can implement to improve your performance.

Page | 41
4. Accessibility

Lighthouse’s accessibility test analyzes how well people who use assistive technologies canuse

your website. Specifically, it looks at elements like buttons and links to see whether they’re

described well. It also analyzes images to see whether alt text is specified. So when users with

limited or novision use screen readers, they understand what the image is all about. Similar to a

performance audit report, the accessibility report gives you a score out of 100.The higher the

score, the better.

The tool also highlights opportunities to improve your overall accessibility.

Page | 42
5. Best Practices

The best practices audit in Lighthouse checks whether your page is built on the modern

standards of web development. Lighthouse examines whether:

 Resources load from secure servers with HTTPS.

 All images appear with the correct aspect ratio and in appropriate resolution

 All JavaScript libraries are safe and free from any vulnerabilities.

 Page has the HTML doctype

 Content Security Policy (CSP) is effective against cross-site scripting (XSS) attacks

 Page is free from all browser errors

 Page is free from deprecated frameworks and APIs

 Page has valid source maps

 Page is free from issues appearing in Chrome DevTools panel, such as

network request failures, insufficient security measures, and other browser

issues

 Page’s character encoding is set with the meta charset tag

 Page allows users to paste password in password field

 Page creates a good user experience by blocking geolocation and

notification permission requests on page load All these factors decide your
Page | 43
 score out of 100.

Page | 44
The Lighthouse report on best practices also highlights specific elements that require your

attention. Which can improve your score.

6. SEO

Lighthouse runs a test to analyze your webpage for some technical aspects of SEO.

Specifically, it checks whether:

 Your webpage is mobile-friendly

 Page has a valid structured data

 Internal links are crawlable

 Page has a valid hreflang attribute

 Title and meta description tags are set

 Page is indexable

Page | 45
 Robots.txt is valid

 Page is returning HTTP 200 (OK) status response code

 Page has a valid “rel=canonical” tag set

 Page content is independent of plugins

 Links on a page are introduced with descriptive text

 Images on a page have image alt texts specified

 Page has a viewport meta tag with width or initial-scale

set And then assigns a score out of 100.

It also highlights any SEO issues it detected when running an audit.

But the tool doesn’t give you a full picture of your SEO. If you want your website to rank better in
Google, you need to ensure it is optimized for allaspects of SEO. Make sure no issues are
affecting your rankings. That’s where tools from Semrush can come in handy.
Page | 46
For example, Site Audit checks your website for over 140 aspects of SEO. Like duplicate

content, redirects, internal links, URL structure, and more.

To use the tool, set up a project and run your audit.

Once the audit is complete, you’ll get a high-level overview of your website’s SEO health.

7. Progressive Web App (PWA)

The PWA audit in Lighthouse validates whether your web application uses modern web

capabilities to provide an optimal user experience.

It checks whether your web app is:

 Fast and reliable on mobile networks and offers offline functionality

 Installable on multiple device types and has features like offline functionality

and push notifications

 PWA-optimized by redirecting HTTP traffic to HTTPS, configuring a custom splash

screen, sizing webpage content to fit on mobile screens, and implementing all the other

best practices listed by Lighthouse

The test runs your web app against these factors and assigns one of the PWA badges.

This means that, unlike the first four reports, you’re assigned a badge (not a score of 100)

when you run a PWA audit in Lighthouse.

Page | 47
The audit report will also provide suggestions for improving your overall PWA performance.Including

specific issues that need to be addressed.

How to Use Google Lighthouse

Now that you know what Google Lighthouse is and how it works, let’s look at the

differentways you can use it to audit your pages.

Using Lighthouse with Chrome Dev-Tools

In your Chrome browser, you can run a Google Lighthouse audit with Chrome Dev-Tools.
Open the webpage you want to audit.
Then right-click anywhere on the page and select “Inspect.”

Page | 48
The Inspect feature will open a DevTools panel on the right side of the webpage.

Select “Lighthouse” from the panel’s toolbar. (If you can’t find the Lighthouse option, click

on the two arrows at the end of the toolbar. You’ll see it there.)

From here, you can select one, more, or all categories, depending on which aspects of your

website you want to analyze. And click “Analyze page load.”

Page | 49
Then the tool will generate a report for you. You’ll find your audit scores for each category at

the top.

You can click on a specific category to learn more. In this example, we clicked“Performance”

audit.

Page | 50
Page | 51
 Coding and Screenshots of Project

GitHub repository link - AbhishekSinghDev/netkart (github.com)

SignUp Interface

Page | 52
code

import email from "../assets/icon/email.svg";

import password from
"../assets/icon/password.svg"; import
google from "../assets/icon/google.svg";
import showEye from "../assets/icon/show-
eye.svg"; import hideEye from
"../assets/icon/hide-eye.svg"; import
fullName from "../assets/icon/full-
name.svg"; import addressIcon from
"../assets/icon/address.svg"; import
phone from "../assets/icon/phone.svg";

import { Link } from "react-router-

dom";
import { useContext, useState }
from "react";
import { UserContext } from "../context/UserContextProvider.jsx";

import { Toaster, toast } from "react-

hot-toast"; import axiosInstance from
"../../axiosInstance.js"; import {
useNavigate } from "react-router-dom";

const Signup = () => {

const navigate = useNavigate();
const { setUser } =
useContext(UserContext); const
[fullname, setFullName] =
useState(""); const [emailInput,
setEmailInput] = useState("");
const [passwordInput, setPasswordInput] = useState("");
const [showPassword, setShowPassword] =
useState("password"); const [address, setAddress] =
useState("");
const [phoneno, setPhoneno] = useState("");

const setPasswordVisibility = () => {

if (showPassword ===
"password") {
setShowPassword("text");
} else setShowPassword("password");
};

const handleSubmit = async

(e) => {
e.preventDefault();

try {
const config
= { headers:
{
"Content-type": "application/json",
},
};
const { data } = await

Page | 53
 axiosInstance.post( "/
api/v1/auth/signup",
{
fullname:
fullname,
email:
emailInput,
password:
passwordInput,
address: address,
phoneno: phoneno,
},
config
);

if (data.success === true) {

localStorage.setItem("access_token",
JSON.stringify(data.token)); toast.success("User
registerd successfully", {
duration: 3000,
});
setUser(data.token);
navigate("/");
}
} catch (err) {
toast.error(err.message);
console.log(err);

if (err.response !==
undefined) { if (
err.response.data.success !== undefined &&
err.response.data.success === false
) {
toast.error(`${err.response.data.message}`);
}
}
}
};

return (
<section className="flex items-center justify-center">
<Toaster />
<form className="text-center">
<h1 className="font-montserrat font-extrabold text-
[50px] my-24"> Welcome to Netkart
</h1>
<div className="input_field">
<img src={fullName} className="h-6 w-6" alt="fullname" />
<input
type="te
xt"
className="w-full text-lg outline-none bg-transparent
placeholder:text- gray-400"
placeholder="Full
name"
value={fullname}
onChange={(e) => setFullName(e.target.value)}

Page | 54
 />
</div>
<div className="input_field my-10">
<img src={email} alt="email_icon" className="h-6 w-6" />
<input
type="ema
il"
placeholder="Email"
className="w-full text-lg outline-none bg-transparent
placeholder:text-gray-400" value={emailInput}
onChange={(e) => setEmailInput(e.target.value)}
/>
</div>

<div className="input_field my-10">

<img src={addressIcon} alt="address" className="h-6 w-6" />
<input
type="te
xt"
placeholder="Address"
className="w-full text-lg outline-none bg-transparent
placeholder:text-gray-400" value={address}
onChange={(e) => setAddress(e.target.value)}
/>
</div>

<div className="input_field my-10">

<img src={phone} alt="phone" className="h-6 w-6" />
<input
type="te
xt"
placeholder="Phone number"
className="w-full text-lg outline-none bg-transparent
placeholder:text-gray-400" value={phoneno}
onChange={(e) => setPhoneno(e.target.value)}
/>
</div>

<div className="input_field my-10">

<img src={password} alt="password_icon" className="h-6 w-6" />
<input
type={showPassword
}
placeholder="Passwo
rd"
className="w-full text-lg outline-none bg-transparent
placeholder:text-gray-400" value={passwordInput}
onChange={(e) => setPasswordInput(e.target.value)}
/>
<img
src={showPassword === "password" ? showEye
: hideEye} className="h-8 w-8 cursor-
pointer"
alt="show-hide"
onClick={setPasswordVis
ibility}
/>

Page | 55
 </div>

<div>
<button
className="btn-dark cursor-pointer font-noto font-
semibold text-xl" type="submit"
onClick={handleSubmit}
>
Sign Up
</button>
</div>

<div className="my-10 relative w-full flex items-center gap-2 opacity-

10 uppercase text-black font-bold">
<hr className="w-1/2 border-black" />
<p>or</p>
<hr className="w-1/2 border-black" />
</div>

<div className="btn-dark flex items-center justify-center gap-4

cursor- pointer">
<img src={google} alt="google_icon" className="h-6 w-6" />
<p className="font-semibold text-lg">Continue With Google</p>
</div>

<p className="my-6 font-semibold

font-noto"> Already have an
account
?{" "}
<Link className="underline underline-offset-
2" to="/login"> Sign in here
</Link>
</p>
</form>
</section>
);
};

export default Signup;

Page | 56
Login Interface

import email from "../assets/icon/email.svg";

import password from
"../assets/icon/password.svg"; import
google from "../assets/icon/google.svg";
import showEye from "../assets/icon/show-
eye.svg"; import hideEye from
"../assets/icon/hide-eye.svg";

import { Link, useNavigate } from "react-

router-dom"; import { useContext,
useState
} from "react";
import { UserContext } from "../context/UserContextProvider";

import { Toaster, toast } from "react-

hot-toast"; import axiosInstance from
"../../axiosInstance.js";

const Signin = () => {

const [emailInput, setEmailInput] = useState();
const [passwordInput, setPasswordInput] =
useState(); const [showPassword, setShowPassword] =
useState("password"); const navigate =
useNavigate();
const { setUser } = useContext(UserContext);

const setPasswordVisibility = () => {

if (showPassword ===
"password") {
setShowPassword("text");
} else setShowPassword("password");
};

Page | 57
 const handleSubmit = async

Page | 58
 (e) => {
e.preventDefault();
try {
const config
= { headers:
{
"Content-type": "application/json",
},
};

const { data } = await

axiosInstance.post( "
/api/v1/auth/login",
{
email: emailInput,
password:
passwordInput,
},
config
);
localStorage.setItem("access_token",
JSON.stringify(data.token)); toast.success(`$
{data.message}`, { duration: 3000 });
setUser(data.token);
navigate("/");
} catch (err) {
toast.error(err.message);
if (err.response.data.success === false) {
toast.error(`${err.response.data.message}`,
{ duration: 3000 });
}
}
};

return (
<section className="flex items-center justify-center">
<Toaster />
<form className="text-center">
<h1 className="font-montserrat font-extrabold text-
[50px] my-24"> Welcome Back
</h1>
<div className="input_field my-10">
<img src={email} alt="email_icon" className="h-6 w-6" />
<input
type="email
"
placeholder="Email"
className="w-full text-lg outline-none bg-transparent
placeholder:text-gray-400" value={emailInput}
onChange={(e) => setEmailInput(e.target.value)}
/>
</div>
<div className="input_field my-10">
<img src={password} alt="password_icon" className="h-6 w-6" />
<input
type={showPassword}
placeholder="Passwor
Page | 59
 d"
className="w-full text-lg outline-none bg-transparent
placeholder:text-gray-400" value={passwordInput}
onChange={(e) => setPasswordInput(e.target.value)}
/>
<img
src={showPassword === "password" ? showEye :
hideEye} className="h-8 w-8 cursor-
pointer" alt="show-hide"
onClick={setPasswordVisib
ility}
/>
</div>

<div>
<button
className="btn-dark cursor-pointer font-noto font-
semibold text-xl" type="submit"
onClick={handleSubmit}
>
Sign In
</button>
</div>

<div className="my-10 relative w-full flex items-center gap-2 opacity-10

uppercase text-black font-bold">
<hr className="w-1/2 border-black" />
<p>or</p>
<hr className="w-1/2 border-black" />
</div>

<div className="btn-dark flex items-center justify-center gap-4

cursor- pointer">
<img src={google} alt="google_icon" className="h-6 w-6" />
<p className="font-semibold text-lg">Continue With Google</p>
</div>

<p className="my-6 font-semibold

font-noto"> Don&apos; t have an
account ?{" "}
<Link className="underline underline-offset-2"
to="/signup"> Join us today
</Link>
</p>
</form>
</section>
);
};

export default Signin;

Screenshots before Signup and Login

Page | 60
Screenshots after signup and login

Page | 61
Home

Home.jsx (Nav)
import React from "react";

const Head = ()
=> { return (
<>
<section className="head">
<div className="container d_flex">
<div className="left row">
<i className="fa fa-phone"></i>
<label className="cursor-pointer hover:text-sky-300">
{" "}
+88012 3456 7894
</label>
<i className="fa fa-envelope"></i>
<label className="cursor-pointer hover:text-sky-300">
{" "}
support@netkart.com
</label>
</div>
<div className="right row RText">
<label className="cursor-pointer
hover:text-sky-300"> Theme
FAQ"s
</label>
<label className="cursor-pointer
hover:text-sky-300"> Need Help?
</label>
</div>
</div>
</section>
Page | 62
 </>

Page | 63
 );
};

export default Head;

Hero page
import React, { useContext } from
"react"; import { Link } from
"react-router-dom";
import { UserContext } from "../../components/context/UserContextProvider";

const Search = ({ CartItem }) => {

// fixed Header
window.addEventListener("scroll",
function () {
const search = document.querySelector(".search");
search.classList.toggle("active", window.scrollY >
100);
});
const { user } = useContext(UserContext);

const handleLogout = () => {

localStorage.removeItem("access_t
oken"); window.location.reload();
};

return (
<>
<section className="search">
<div className="container c_flex">
<div className="logo width ">
{/* <img src={logo} alt='' /> */}
<Link className="text-2xl font-bold cursor-
pointer" to="/"> NetKart
</Link>
</div>

<div className="search-box f_flex">

<i className="fa fa-search"></i>
<input type="text" placeholder="Search netkart.com" />
<span>All Category</span>
</div>

{user ? (
<div className="icon f_flex width">
<i className="fa fa-user icon-circle cursor-pointer"></i>
<div className="cart">
<Link to="/cart">
<i className="fa fa-shopping-bag icon-circle"></i>
<span>{CartItem.lengths === 0 ? "" : CartItem.length}</span>
</Link>
</div>
<div className="flex items-center justify-center mx-6 cursor-pointer">
<p
onClick={handleLogout}
className="bg-gray-200 px-6 py-2 rounded-xl"
>

Page | 64
 Logout
</p>
</div>
</div>
) : (
<>
<Link
to="/login
"
className="whitespace-nowrap bg-black text-white rounded-full px-6 py-
2 text-xl capitalize hover:bg-opacity-80 "
>
<p>Sign In</p>
</Link>

<Link to="/signup" className="btn-light py-2 hidden md:block">

<p>Sign Up</p>
</Link>
</>
)}
</div>
</section>
</>
);
};

export default Search;

Page | 65
Flash deals component
import React, { useState } from
"react"; import Slider from
"react-slick";
import
"slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-
theme.css"; import { useNavigate }
from "react-router-dom";

const SampleNextArrow =
(props) => { const { onClick
} = props;
return (
<div className="control-btn" onClick={onClick}>
<button className="next">
<i className="fa fa-long-arrow-alt-right"></i>
</button>
</div>
);
};
const SamplePrevArrow =
(props) => { const { onClick
} = props;
return (
<div className="control-btn" onClick={onClick}>
<button className="prev">
<i className="fa fa-long-arrow-alt-left"></i>
</button>
</div>
);
};
const FlashCard = ({ productItems,
addToCart }) => { const [count,
setCount] = useState(0);
const navigate =
useNavigate(); const
increment = () => {
setCount(count + 1);
};
const settings
= { dots:
false,
infinite:
true, speed:
500,
slidesToShow: 4,
slidesToScroll: 1,
nextArrow:
<SampleNextArrow
/>, prevArrow:
<SamplePrevArrow />,
};

const handleClick = (e) => {

console.log(e); navigate(`/$
Page | 66
 {productItems.id
}`);

Page | 67
 };

return (
<>
<Slider {...settings} className="cursor-pointer">
{productItems.map((productItems
) => { return (
<div className="box">
<div className="product mtop" onClick={handleClick}>
<div className="img">
<span className="discount">{productItems.discount}% Off</span>
<div className="flex items-center justify-center">
<img src={productItems.cover} alt="" />
</div>
<div className="product-like">
<label>{count}</label> <br />
<i className="fa-regular fa-heart" onClick={increment}></i>
</div>
</div>
<div className="product-details">
<h3>{productItems.name}</h3>
<div className="rate">
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
</div>
<div className="price">
<h4>${productItems.price}.00 </h4>
{/* step : 3
if hami le button ma click garryo bahne
*/}
<button onClick={() => addToCart(productItems)}>
<i className="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
);
})}
</Slider>
</>
);
};

export default FlashCard;

Page | 68
Page | 69
Top categories component
import React from
"react" import
"./style.css"
import TopCart from "./TopCart"

const TopCate = ()
=> { return (
<>
<section className='TopCate background'>
<div className='container'>
<div className='heading d_flex'>
<div className='heading-left row f_flex'>
<i className='fa-solid fa-border-all'></i>
<h2>Top Categories</h2>
</div>
<div className='heading-right row '>
<span>View all</span>
<i className='fa-solid fa-caret-right'></i>
</div>
</div>
<TopCart />
</div>
</section>
</>
)
}

export default TopCate;

Page | 70
Big Discounts components
import React from
"react"; import Dcard
from "./Dcard";

const Discount =
() => { return (
<>
<section className="Discount background NewArrivals">
<div className="container">
<div className="heading d_flex">
<div className="heading-left row f_flex">
<img src="https://img.icons8.com/windows/32/fa314a/gift.png" />
<h2>Big Discounts</h2>
</div>
<div className="heading-right row ">
<span>View all</span>
<i className="fa-solid fa-caret-right"></i>
</div>
</div>
<Dcard />
</div>
</section>
</>
);
};

export default Discount;

Page | 71
Store component
import React, { useState } from "react";

const ShopCart = ({ shopItems,

addToCart }) => { const [count,
setCount] = useState(0);
const increment = ()
=> { setCount(count
+ 1);
};

return (
<>
{shopItems.map((shopItems,
index) => { return (
<div className="box">
<div className="product mtop cursor-pointer">
<div className="img">
<span className="discount">{shopItems.discount}% Off</span>
<img src={shopItems.cover} alt="" />
<div className="product-like">
<label>{count}</label> <br />
<i className="fa-regular fa-heart" onClick={increment}></i>
</div>
</div>
<div className="product-details">
<h3>{shopItems.name}</h3>
<div className="rate">
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
</div>
<div className="price">
<h4>${shopItems.price}.00 </h4>
{/* step : 3
if hami le button ma click garryo bahne
*/}
<button onClick={() => addToCart(shopItems)}>
<i className="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
);
})}
</>
);
};

Page | 72
export default ShopCart;

Page | 73
Announcements component

import React from "react";

const Annocument = ()
=> { const mystyle =
{
width: "30%",
height:
"340px",
};
const mystyle1
= { width:
"68%", height:
"340px",
};
return (
<>
<section className="annocument background">
<div className="container d_flex">
<div className="img" style={mystyle}>
<img
src="./images/banner-
1.png" width="100%"
height="100%"
alt=""
/>
</div>
<div className="img" style={mystyle1}>
<img
src="./images/banner-
2.png" width="100%"
height="100%"
alt=""
/>
</div>
</div>
</section>
</>
);
};

export default Annocument;

Page | 74
Information component
import React from
"react" import
"./style.css"

const Wrapper = ()
=> { const data = [
{
cover: <i class='fa-solid fa-truck-
fast'></i>, title: "Worldwide
Delivery",
decs: "We offer competitive prices on our 100 million plus product any range.",
},
{
cover: <i class='fa-solid fa-id-
card'></i>, title: "Safe Payment",
decs: "We offer competitive prices on our 100 million plus product any range.",
},
{
cover: <i class='fa-solid fa-
shield'></i>, title: "Shop With
Confidence ",
decs: "We offer competitive prices on our 100 million plus product any range.",
},
{
cover: <i class='fa-solid fa-
headset'></i>, title: "24/7 Support
",
decs: "We offer competitive prices on our 100 million plus product any range.",
},
]
return (
<>
<section className='wrapper background'>
<div className='container grid2'>
{data.map((val, index) => {
return (
<div className='product' key={index}>
<div className='img icon-circle'>
<i>{val.cover}</i>
</div>
<h3>{val.title}</h3>
<p>{val.decs}</p>
</div>
)
})}
</div>
</section>
</>
)
}

export default Wrapper

Page | 75
Page | 76
Cart component
import React from
"react" import
"./style.css"

const Cart = ({ CartItem, addToCart, decreaseQty }) => {

// Stpe: 7 calucate total of items
const totalPrice = CartItem.reduce((price, item) => price + item.qty *
item.price, 0)

// prodcut qty
total return (
<>
<section className='cart-items'>
<div className='container d_flex'>
{/* if hamro cart ma kunai pani item xaina bhane no diplay */}

<div className='cart-details'>
{CartItem.length === 0 && <h1 className='no-items product'>No Items are add
in Cart</h1>}

{/* yasma hami le cart item lai display garaaxa */}

{CartItem.map((item) => {
const productQty = item.price * item.qty

return (
<div className='cart-list product d_flex' key={item.id}>
<div className='img'>
<img src={item.cover} alt='' />
</div>
<div className='cart-details'>
<h3>{item.name}</h3>
<h4>
${item.price}.00 * {item.qty}
<span>${productQty}.00</span>
</h4>
</div>
<div className='cart-items-function'>
<div className='removeCart'>
<button className='removeCart'>
<i className='fa-solid fa-xmark'></i>
</button>
</div>
{/* stpe: 5
product ko qty lai inc ra des garne
*/}
<div className='cartControl d_flex'>

Page | 77
 <button className='incCart' onClick={() => addToCart(item)}>
<i className='fa-solid fa-plus'></i>
</button>
<button className='desCart' onClick={() => decreaseQty(item)}>
<i className='fa-solid fa-minus'></i>
</button>
</div>
</div>

<div className='cart-item-price'></div>
</div>
)
})}
</div>

<div className='cart-total product'>

<h2>Cart Summary</h2>
<div className=' d_flex'>
<h4>Total Price :</h4>
<h3>${totalPrice}.00</h3>
</div>
</div>
</div>
</section>
</>
)
}

export default Cart

Page | 78
 Particular product page
import React from "react";
import { useParams } from "react-router-dom";

const ProductDetail = () => {

let { product_id } = useParams();

const
product = {
id:
product_id,
name: "Example Product",
description: "Lorem ipsum dolor sit amet,
consectetur adipiscing elit.", price:
49.99, imageUrl:
"https://via.placeholder.com/300",
};

const handleAddToCart = () => {

// Logic to add the product to the
cart console.log("Product added to
cart:", product);
};

const handleBuyNow = () => {

// Logic for buy now action (redirect to
checkout, etc.) console.log("Buy now:",
product);
};

return (
<div className="container mx-auto my-8 h-[60vh] flex items-center justify-
center">
<div className="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md">
<div className="flex flex-col lg:flex-row">
<div className="w-full lg:w-1/2">
<img
src={product.image
Url}
alt={product.name}
className="w-full h-auto rounded-lg mb-4"
/>
</div>
<div className="w-full lg:w-1/2 lg:ml-6">
<h2 className="text-2xl font-bold mb-4">{product.name}</h2>
<p className="text-gray-600 mb-4">{product.description}</p>
<p className="text-gray-800 text-xl font-bold mb-4">
${product.price}
</p>
<div className="flex space-x-4">
<button

Page | 79
 className="bg-blue-500 hover:bg-blue-600 text-white font-bold
py-2 px-4 rounded" onClick={handleAddToCart}
>
Add to Cart
</button>
<button
className="bg-green-500 hover:bg-green-600 text-white font-bold
py-2 px-4 rounded" onClick={handleBuyNow}
>
Buy Now
</button>
</div>
</div>
</div>
</div>
</div>
);
};

export default ProductDetail;

Page | 80
Backend documentation
Documentation link - Netkart (getpostman.com)

Server (Wrapper)

import "dotenv/config";
import express from
"express";
import mongoose from
"mongoose"; import cors from
"cors";
// import fetchProducts from "./getproducts.js";

// route handlers
import authHandler from "./routes/auth.js";
import updateUserHandler from
"./routes/updateUser.js"; import
productHandler from "./routes/product.js";
import orderHandler from
"./routes/order.js"; import
userHandler from "./routes/user.js";

const PORT =
process.env.PORT; const
app = express();

const corsOptions
= { origin: true,
};

// middlewares
app.use(cors(corsOptions));
app.use(express.json());

// routes
app.use("/api/v1/auth", authHandler);
app.use("/api/v1/user",
updateUserHandler);
app.use("/api/v1/products",
productHandler);
app.use("/api/v1/order", orderHandler);
app.use("/api/v1/user/", userHandler);

const connectDB = async

() => { try {
const dbconnection = await mongoose.connect(process.env.MONGODB_URI);

console.log("Database connected successfully.");

// fetchProducts();
} catch (err) {

Page | 81
 console.log(err);
}
};

connectDB();

app.get("/", (req, res)

=> { res.send("Server is
working");
});

app.listen(PORT, () => {
console.log(`Server running on PORT ${PORT}`);
})

Page | 82
Authentication and Authorization Api
import User from
"../models/userModel.js"; import
bcrypt from "bcrypt";
import generateToken from "../service/generateToken.js";

const signupUser = async (req, res) => {

const { fullname, email, password, address, phoneno } = req.body;

// check weither any of the above field is not empty

if (!fullname || !email || !password || !address ||
!phoneno) { res.status(404).json({
success: false,
message: "please provide all the details",
});
}

// check is user already exists or not ?

const isUserExists = await User.find({ email: email });

if (!isUserExists)
{
res.status(400).jso
n({ success:
false,
message: "there is already a account with provided email address",
});
}

try {
const saltRounds = 10;
bcrypt.hash(password, saltRounds, async
(err, hash) => { if (err) {
console.log("error while hashing password: ", err);
res.status(500).json({
success: false,
message: "unable to signup user, internal server error",
});
} else {
const newUser = new
User({ fullname:
fullname,
email: email,
password: hash,
address:
address,
phoneno:
phoneno,
});
await
newUser.save();
res.status(201).js
on({ success:
true,
message: "user signed up
successfully", user: newUser,

Page | 83
 token:
generateToken(newUser._id),

Page | 84
 });
}
});
} catch (err) {
console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to sign up user. internal server error",
});
}
};
const loginUser = async (req,
res) => { const { email,
password } = req.body;

// check weither any of the

field is empty if ((!email,
!password))
{ res
.status(400)
.json({ success: false, message: "please provide email and password" });
}

// check if userexists or
registered or not try {
const isUserExists = await User.findOne({ email: email });

if (!isUserExists)
{
res.status(400).js
on({ success:
false,
message: "there is no user with provided email",
});
} else {
bcrypt.compare(password,
isUserExists.password, (err, result) => { if
(err) { console.log("error while hashing
password (login): ", err); res
.status(500)
.json({ success: false, message: "unable to login user" });
}

if (result) {
res.status(201).json(
{ success: true,
message: "login
successfull", user:
isUserExists,
token: generateToken(isUserExists._id),
});
} else {
res.status(401).json(
{ success: false,
message: "unauthorized acess, wrong credentials",
});
Page | 85
 }

Page | 86
 });
}
} catch (err) {
console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to login, internal server error",
});
}
};

export { loginUser, signupUser };

Page | 87
Update various details Api
import User from
"../models/userModel.js"; import
bcrypt from "bcrypt";

const updatePassword = async (req, res) => {

const { email, oldPassword, newPassword } = req.body;

// check if weither the password field

is not empty if (!email || !oldPassword
|| !newPassword) {
res
.status(400)
.json({ success: false, message: "please provide all the credentials" });
}

const user = await User.findOne({ email: email });

// check if user
exists or not if
(!user)
return
res.status(400).json({
success: false,
message: "no user exists with the provided email",
});

bcrypt.compare(oldPassword, user.password,
async (err, result) => { if (err) {
res.status(500).js
on({ success:
false,
message: "unable to update password, internal server error",
});
}

if (result) {
const saltRounds = 10;
bcrypt.hash(newPassword, saltRounds, async
(err, hash) => { if (err) {
console.log(
"error while generating salt after previous password
check is passed: ", err
);
res
.status(500)
.json({ success: false, message: "unable to update password" });
}
user.password =
hash; user.save();
res
.status(201)
.json({ success: true, message: "password updated successfully" });
});
} else {
Page | 88
 res.status(400).json({ success: false, message: "wrong credentials" });
}
});

try {
} catch (err) {
console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to update password, internal server error",
});
}
};

const updateEmail = async (req, res) => {

const { oldEmail, newEmail, password } = req.body;

// check for email and password is

not empty if (!oldEmail || !newEmail
|| !password) { return res
.status(400)
.json({ success: false, message: "please provide all the fields" });
}

try {
const isuser = await User.findOne({ email: oldEmail });

// check weither user

exists or not if (!
isuser) return
res.status(400).json({
success: false,
message: "no account find with the provided email",
});

bcrypt.compare(password, isuser.password, async

(err, result) => { if (err) {
console.log("error in updating user
email: ", err); return
res.status(500).json({
success: false,
message: "unable to update email, internal server error",
});
}
if (result) {
isuser.email =
newEmail; await
isuser.save();

return res
.status(201)
.json({ success: true, message: "email updated successfully" });
} else {
return
res.status(401).json({
success: false,
Page | 89
 message: "unauthorized access, wrong credentials",

Page | 90
 });
}
});
} catch (err) {
console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to update email, internal server error",
});
}
};

const updateAddress = async (req, res) => {

const { newAddress, password, email } = req.body;

// check for email and password is

not empty if (!newAddress ||
!password || !email) { return res
.status(400)
.json({ success: false, message: "please provide all the fields" });
}

try {
const isuser = await User.findOne({ email: email });

// check weither user

exists or not if (!
isuser) return
res.status(400).json({
success: false,
message: "no account find with the provided address",
});

bcrypt.compare(password, isuser.password, async

(err, result) => { if (err) {
console.log("error in updating user
email: ", err); return
res.status(500).json({
success: false,
message: "unable to update address, internal server error",
});
}

if (result) {
isuser.address =
newAddress; await
isuser.save();

return res
.status(201)
.json({ success: true, message: "address updated successfully" });
} else {
return
res.status(401).json({
success: false,
message: "unauthorized access, wrong credentials",
Page | 91
 });
}
});
} catch (err) {
console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to update address, internal server error",
});
}
};

const updatePhoneno = async (req, res) => {

const { newPhoneno, password, email } = req.body;

// check for email and password is

not empty if (!newPhoneno ||
!password || !email) { return res
.status(400)
.json({ success: false, message: "please provide all the fields" });
}

try {
const isuser = await User.findOne({ email: email });

// check weither user

exists or not if (!
isuser) return
res.status(400).json({
success: false,
message: "no account find with the provided email",
});

bcrypt.compare(password, isuser.password, async (err, result) => {

if (err) {
console.log("error in updating user
address: ", err); return
res.status(500).json({
success: false,
message: "unable to update address, internal server error",
});
}

if (result) {
isuser.phoneno =
newPhoneno; await
isuser.save();

return res
.status(201)
.json({ success: true, message: "phoneno updated successfully" });
} else {
return
res.status(401).json({
success: false,
message: "unauthorized access, wrong credentials",
Page | 92
 });

Page | 93
 }
});
} catch (err) {
console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to update phoneno, internal server error",
});
}
};

export { updatePassword, updateEmail, updateAddress, updatePhoneno }

Page | 94
Products Api

import Product from

"../models/productModel.js"; const

getAllProducts = async (req, res) => {

try {
const response = await Product.find({});
res.status(201).json({
success: true,
products:
response,
});
} catch (err) {
console.log("Error while fetching all
products"); console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to fetch all products, internal server error",
});
}
};
const getSingleProduct = async
(req, res) => { const id =
req.query.id;

if
(!id)
{ res
.status(400)
.json({ success: false, message: "Please provide id
of the product" }); return;
}

try {
const response = await
Product.findById(id);
res.status(201).json({
success: true,
product:
response,
});
} catch (err) {
console.log("Error while fetching
single product"); console.log(err);
res.status(500).jso
n({ success:
false,
message: "unable to fetch single product, internal server error",
});
}
};
const getAllCategories = async
(req, res) => { try {
Page | 95
 const response = await
Product.distinct("category");
res.status(201).json({ succes
s: true,
categories:
response,
});
} catch (err) {
console.log("Error while fetching
categories"); console.log(err);
res.status(500).jso
n({ success: true,
message: "unable to fetch all categories, internal server error",
});
}
};

export { getAllProducts, getSingleProduct, getAllCategories };

Page | 96
Page | 97
User Info Api
import User from "../models/userModel.js";

// base_url/api/v1/user:user_id
const getUserDetails = async (req, res) => {
// token needed to implement to
increase security const user_id =
req.params.user_id;
if
(!user_id)
{ return
res
.status(400)
.json({ success: false, message: "Please provide user id" });
}

try {
const userInfo = await
User.findById(user_id).populate("orders"); if
(userInfo) {
return res.status(201).json({ success: true, user: userInfo });
} else {
return
res.status(404).json({
success: false,
message: "No user found with provided user id",
});
}
} catch (err) {
console.log("Error while getting
user details");
console.log(err); return
res.status(500).json({
success: false,
message: "Unable to fetch user details, internal server error",
});
}
};

export { getUserDetails };

Page | 98