A

PROJECT REPORT ON

ECOMMERCE WEBSITE
FOR
Shoppinoz Website
At

“Bhagwan Mahavir College of Computer

Application”, Bharthana-Vesu, Surat
As A Partial Fulfilment for The Degree Of

Batchelor of computer Application 2022-24

Guided By: Submitted By:

Amlesh Sir Dhanani Mahipal
Dhameliya Shivam
Dhaduk Tejendra
Dhameliya Om

Bhagwan Mahavir College of Computer Application

Bharthana-Vesu, Surat
Affiliated With
Bhagwan Mahavir University, Surat, Gujarat, India
 BHAGWAN MAHAVIR COLLEGE
OF
COMPUTER APPLICATION

Certificate
This is to certify that the summer project entitled “Shoppinoz Website”

has been submitted by Mahipal Dhanani 2102020101151 at Bhagwan Mahavir College of

Computer Application. As a partial fulfilment of the requirement for the degree of

Batchelor of Computer Application for the academic Year 2022-24.

Place: Surat
Date:

Guided By : Program Head:

~Amlesh Shahni Sir BMCCA
 BHAGWAN MAHAVEER COLLAGE OF
COMPUTER APPLICATION

PROJECT REPORT
1. Project Group No : 1
2. Project Title : Shoppinoz Website
3. Project Guide Name : Amlesh Shahni
4. Progress Report No : 1
5. Project Detail :

1) Project Name : Shoppinoz Website

2) Front End : HTML , CSS , BOOTSTRAP , JAVASCRIPT, REACT_JS

3) Back End : NODE_JS

Project Guide : Amlesh Shahni

Project Guide Sign:

 Acknowledgement

We have taken a lot of effort into this project. However, completing this project would not
have been possible without the support and guidance of a lot of individuals. We would like to extend our sincere
thanks to all of them.

We are highly indebted to Mr. Amlesh Shahni for their guidance and supervision.
We would like to thank her for providing the necessary information and resources for this project.

We would like to express our gratitude towards our parents & our friends for their kind co-
operation and encouragement which help us a lot in completing this project.

Our thanks and appreciations also go to our colleague in developing the project. Thank you
to all the people who have willingly helped us out with their abilities.

We are also Thanks full to our all Faculties Members & specially Our Dean Dr. Sanjay Buch,
BMCCA,BMU , to give us opportunity to make us this project.
Thank you very much,
Mr. Amlesh Shahni
 INDEX
No. Topic Page
No.
1. Abstract
2. INTRODUCTION
2.1. College profile
2.2. Project profile
3. Overall Description
3.1 Description
3.2 Using The Code
3.3 Web Page Details
3.4 Project Details
4. System Requirements
4.1. Use Case Diagram
5. Online Shopping Website
5.1 Sign Up Page
5.2 Login Page
5.3 Admin Dashboard
5.5 Products Page

5.6 Cart Page

5.7 Orders Page

5.8 Completed Order Page

5.9 Profile Page

6. Data Management
6.1 Data Description
 6.2 Data Objects
6.3 DataBase Diagram
7. Non-Functional & Operational Requirements
7.1 Security
7.2 Efficiency & Maintenability
8. Conclusion
 Shoppinoz Website

1. Abstract

In today’s fast-changing business environment, it’s extremely important to be able to respond to client
needs in the most effective and timely manner. If your customers wish to see your business online and
have instant access to your products or services.

Online Shopping is a lifestyle e-commerce web application, which retails various fashion and lifestyle
products (Currently Men’s Wear). This project allows viewing various products available enables registered
users to purchase desired products instantly using PayPal payment processor (Instant Pay) and also can
place order by using Cash on Delivery (Pay Later) option. This project provides an easy access to
Administrators and Managers to view orders placed using Pay Later and Instant Pay options.

In order to develop an e-commerce website, a number of Technologies must be studied and understood.
These include multi-tiered architecture, server and client side scripting techniques, implementation
technologies such as React_Js , and nodeJs. This is a project with the objective to develop a basic website
where a consumer is provided with a shopping cart Website and also to know about the technologies used
to develop such an website.

This document will discuss each of the underlying technologies to create and implement an e- commerce
website.

1
 Shoppinoz Website

2. INTRODUCTION

2.1. College Profile:

Bhagwan Mahavir College of Computer Application, Surat a highly commendable private institute,
occupies a place amongst the technical institutes of the southern region of Gujarat. It is established in
year 2008, financed and run by the Bhagwan Mahavir College Foundation, Surat. It is affiliated to
Bhagwan Mahavir University. The college is controlled by the executive board formed from the
representatives of the Trust under constitution & by laws of the college. The college campus is located at
the open green field areas with a beautiful location, situated at New city light Road, Bharthana – Vesu,
Surat.

The College has excelled itself in many fields. It has occupied a prominent place in the education sphere
of South Gujarat. The building surrounded by green fields and contains spacious classrooms, well
documented library, a multipurpose hall, modern computer lab. It has at present around 850 students.

Vision

In 21st century, IT technology has been growing in every area of business & society, while in competitive
environment it is our vision to make the students more efficient in the field of Information Technology,
which will help students to become more efficient skill oriented professional and ready to grab
opportunities in the said field.

Mission

Our mission is to provide learning experience through renowned educational institution which shall
expose the students in the area of computer application in day to day life.

Imparting quality undergraduate education in the area of Computer Application through well designed
curriculum and train students to apply this education for lifelong high quality careers and give them
competitive benefit in the ever-changing and challenging global work environment of 21st century.

Quality Objectives

The College of Computer Application shares University’s overall mission of being a center of academic
excellence by providing qualitative education and integrating training. The progressive and innovative
faculty, through their teaching, scholarship and publication, leadership and service are fully committed to
the provision of an educational environment which prepares individuals to become successful
professionals.

The main objective of the Department is to help students meet their long-range needs as maturing
professionals as well as their immediate needs upon entering the profession.
3
 Shoppinoz Website

2.2. Project Profile

E-commerce is fast gaining ground as an accepted and used business paradigm. More and more business
houses are implementing web sites providing functionality for performing commercial transactions over
the web. It is reasonable to say that the process of shopping on the web is becoming commonplace.

The objective of this project is to develop a general purpose e-commerce store where product like clothes
can be bought from the comfort of home through the Internet. However, for implementation purposes,
this paper will deal with an online shopping for clothes.

An online store is a virtual store on the Internet where customers can browse the catalog and select
products of interest. The selected items may be collected in a shopping cart. At checkout time, the items in
the shopping cart will be presented as an order. At that time, more information will be needed to complete
the transaction. Usually, the customer will be asked to fill or select a billing address, a shipping address, a
shipping option, and payment information such as credit card number. An e-mail notification is sent to the
customer as soon as the order is placed.

Project Title Shoppinoz Website

an eCommerce website involves the creation of an online platform

Project Definition aimed at facilitating commercial transactions over the internet. It
encompasses the design, development, and deployment of frontend
interfaces, backend functionalities, database management systems,
security measures, and user experience enhancements to create a
seamless online shopping experience for customers."

Framework JAVASCRIPT

Type of Project Website

Duration 3 months

Internal Guide Mr. Amlesh Shahni

Front End HTML , CSS , BOOTSTRAP , JAVASCRIPT , REACT_JS ,

Back End NODE_JS

Language Bootstrap, JavaScript, JQuery, CSS, HTML , JAVA

Operating System Windows 11

Dhanani Mahipal
Dhameliya Shivam
Submitted By Dhaduk Tejendra
Dhameliya Om

4
 VISION OF MAN : “THE GEETA”

3. Overall Description

3.1 Description

 Any member can register and view available products.

 Only registered member can purchase multiple products regardless of quantity.
 There are Three roles available: User and Admin & Visitors.

 User can view and purchase products.

 An Admin has some extra privilege including all privilege of visitor and user.
 Visitor can view available products.

 Admin can Add products, Edit product information and Add/Remove product.
 Admin can add user , edit user information and can remove user.
 Admin can ship order to user based on order placed by After Successful
Payment.
3.2 Using the Code

1. Attach the database in MongoDB.

2. Run the Website on Microsoft Visual Studio as web site.
3. Locate the database.

3.3 Web Page Details

 Sign Up Page
 Login Page
 Admin Panel
 Dashboard Page
 Products Page
 Cart Page
 Orders Page
 Completed Orders Page
 Profile Page

3.4 Project Details

5
 VISION OF MAN : “THE GEETA”

4. System Requirements

4.1 Use Case Diagram

6
 Shoppinoz Website

5. Online Shopping Website

 Anyone can view Online Shopping portal and available products, but every user must login by
his/her Username and password in order to purchase or order products.

 Unregistered members can register by navigating to registration page.

 Only Admin will have access to modify roles, by default developer can only be an ‘Admin’. Once user
register site, his default role will be ‘User’.

5.1 Sign up Page

5.1.1 Description

The signup page of our eCommerce website serves as the gateway for new users to create
accounts and join our platform.

Designed and implemented using Html , Css , Bootstrap , React.js, this page provides a seamless
and intuitive user experience, guiding individuals through the process of creating their account
step by step.

9
 Shoppinoz Website

5.1.2 Key Features :

User-Friendly Interface : The signup page boasts a clean and intuitive interface, featuring
well-defined sections and form fields that are easy to navigate.

Form Validation : To ensure data accuracy and completeness, the signup form incorporates
client-side validation using React.js libraries. Real-time feedback is provided to users to assist
them in correcting any errors before submission.

Input Fields : Various input fields are included to collect essential user information, such as
9
 Shoppinoz Website

username, email address, password, and additional optional details like date of birth or
contact number, depending on the specific requirements of our platform.

Submit Button : Upon completion of the signup form, users can click the submit button to
initiate the account creation process. Client-side validation ensures that all required fields
are filled correctly before submission.

Responsive Design : The signup page is designed to be fully responsive, ensuring seamless
functionality across a wide range of devices and screen sizes, including desktops, tablets,
and smartphones.

5.2 Login Page :

5.2.1 Description :

The login page of our eCommerce website serves as the entry point for registered users to
access their accounts and engage with our platform. Developed using Html , Css , Bootstrap ,
React.js, this page offers a seamless and secure login experience, incorporating essential
features to verify user credentials and provide access to personalized services.

9
 Shoppinoz Website

5.2.2 Key Features :

User-Friendly Interface : The login page features a user-friendly interface designed to simplify
the login process. Clear and intuitive layout elements guide users through the login procedure
effortlessly.

Input Fields : The login form includes designated input fields for users to enter their registered
email address or username and password. These fields are carefully structured to ensure clarity
and ease of use.

Forgot Password Link : In case users forget their passwords, a "Forgot Password" link is
prominently displayed on the login page. Clicking this link redirects users to a password
recovery process, of fering a seamless solution to regain account access.

Authentication : Upon submission of the login form, user credentials are authenticated against
the stored database records. Secure authentication protocols are implemented to safeguard
user data and prevent unauthorized access.

Error Handling : Robust error handling mechanisms are in place to notify users of any login
failures due to incorrect credentials or other issues. Clear and informative error messages are
displayed to guide users in resolving login-related issues effectively.

Secure Sessions : Upon successful authentication, users are granted access to their
accounts and redirected to the appropriate landing page within the platform. Secure
session management techniques are employed to maintain user privacy and protect
sensitive information.

5.3 Admin Dashboard

5.3.1 Description :

The main home page of our admin panel serves as the central hub for managing the
eCommerce platform's operations efficiently. Developed using React.js, this page
combines visually appealing graphs and charts with intuitive navigation elements to
provide administrators with comprehensive insights and convenient access to essential
functionalities

9
 Shoppinoz Website

Key Components:

Header Navigation Bar:

Positioned prominently at the top of the page, the header navigation bar features quick access
buttons for cart, profile, and settings.
These buttons allow administrators to swiftly navigate to different sections of the admin
panel, enhancing user accessibility and efficiency.

React.js Graphs and Charts:

Integrated seamlessly into the dashboard layout , React.js-powered graphs and charts provide
administrators with real-time visualizations of key performance metrics and business analytics.
These interactive data representations facilitate informed decision-making and strategic
planning by offering valuable insights into sales trends, customer behavior, inventory management,
and more.

Sidebar Navigation Menu:

The sidebar navigation menu, situated on the left-hand side of the page, offers a comprehensive
array of options for managing different aspects of the eCommerce platform.
Organized into logical categories, including dashboard, products, cart, orders, completed
orders, and profile, these menu items provide administrators with convenient access to specific
functionalities and administrative tasks.

9
 Shoppinoz Website

Dashboard Overview:
The dashboard section provides a comprehensive overview of the eCommerce platform's
performance, displaying key metrics such as total sales, revenue, order volume, and customer
engagement statistics.

Profile Section:
Within the admin dashboard, the profile section offers administrators access to user-specific
registration data, including registration date, method, user profile information, and account status,
enabling personalized communication and targeted management of individual user accounts