SOLEVERSE

A Project Report

Submitted to the Faculty of Engineering and Technology

for the partial fulfilment of the requirements of
Master of Computer Applications

Supervised by: Submitted by:

Ms. Harjit Kaur Naman Singh
(Asst. Professor) 27502100012

Department of Computer Science

Guru Nanak Dev University
Amritsar – 143005
India
May, 2024
 DECLARATION

I hereby declare that the work embodied in this project entitled SoleVerse submitted to the
Department of Computer Science, Guru Nanak Dev University, Amritsar, for the partial fulfilment
of the degree of Master of Computer Applications is entirely based on my own work and not
submitted elsewhere for the award of any other degree. All ideas and references have been duly
acknowledged.

Date Signature
 CERTIFICATE

Certified that Mr. Naman Singh Roll Number 27502100012 of MCA (FYIC) 6th Semester
has worked on the project entitled, SoleVerse , for the partial fulfilment of the degree of
Master of Computer Applications. The student will be solely responsible for the authenticity
and originality of the work submitted.

Date : Supervisor: Ms. Harjit Kaur

 ACKNOWLEDGEMENT

It took a lot of efforts in this project. However, it would not have been possible
without the kind support and help of many individuals and the organization. I would like
to extend my sincere thanks to them. I am highly indebted to Ms. Harjit Kaur for
their guidance and constant supervision as well as for providing necessary information
regarding the project and also for their support in completing the project. My thanks and
appreciations also go to my friends and family in developing the project and people
who have willingly helped me out with their abilities.

Naman Singh
 TABLE OF CONTENTS

Sno. Topic Page No

1 Introduction 1

2 Features 2

3 Techonologies Used 6

4 Front End 7

5 Back End 13

6 Software Development Life Cycle 18

7 Feasibility Study 23

8 Process Design 24

9 Design and Screenshots 34

10 Testing 47

11 Maintenance 51

12 Limitations 52

13 Future Scope 53

14 Conclusion 54

15 Bibliography 55
 INTRODUCTION

Welcome to SoleVerse, the ultimate online destination for footwear enthusiasts everywhere! At
SoleVerse, we're passionate about providing you with a seamless and enjoyable shopping
experience, where finding the perfect pair of shoes is as easy as a few clicks. Our website,
meticulously crafted using cutting-edge technologies such as React and Node.js, ensures that you
have access to a smooth, responsive, and secure platform every time you visit. Whether you're in
search of the latest trends in sneakers, timeless classics in boots, or comfortable and stylish options
in sandals, our diverse collection has something for every taste and occasion. From casual
everyday wear to formal occasions and everything in between, SoleVerse offers a wide range of
footwear options to suit your needs. Plus, with our user-friendly interface and intuitive navigation,
browsing through our extensive catalog is a breeze. And rest assured, when you shop with us, your
transactions are safe and secure, so you can shop with confidence. Step into SoleVerse today,
explore our galaxy of footwear, and elevate your style with every step you take!

SoleVerse's backend, which is fully powered by Node.js, is its central component. We can build a
fast, scalable, and effective platform with Node.js thanks to its lightweight, event-driven
architecture, which can satisfy the demands of contemporary online commerce. Node.js serves as
the foundation of SoleVerse, managing everything from user accounts to order processing, making
sure that every part of our website functions reliably and efficiently. However, SoleVerse is a
community of like-minded people who have a passion about shoes and fashion, not just a website.
Make connections with other shoe enthusiasts, discuss your most recent discoveries, and remain
informed about the newest styles and arrivals.

SoleVerse extends a warm welcome to all individuals , regardless of their level of experience with
footwear. Enter our universe to experience the online shoe buying of the future.

1
 FEATURES

2.1 ADMIN MODULE :

Admin Login :

The admin login page is the entry point for accessing the admin panel. Here, users are prompted
to enter their credentials, typically a username and password, to authenticate their identity. Upon
submitting the login form, the entered credentials are validated against the database to verify the
user's identity. This process ensures that only authorized users with valid login credentials can
access the admin panel.

Manage Categories :

Admins can create product categories directly from the admin panel. They can specify the category
name to accurately represent the category. Admins have the ability to delete categories that are no
longer relevant or necessary.

Manage Sub Categories :

In Admin module, Admins can create new subcategories. When creating a subcategory,
administrators specify its name and assign a parent category to the subcategory by selecting the
appropriate category ID as a foreign key. This relationship ensures that subcategories are
associated with the correct parent category, enabling accurate classification and organization of
products.

2
Manage Products :

Admins can add new products to the catalog directly from the admin panel. They input details such
as product name, description, price, images, and other relevant attributes. Admins can assign
products to specific categories and subcategories to organize them within the catalog. This helps
users navigate the website more easily and find products relevant to their interests.

Settings :

In Admin module, the settings section provides administrators with a centralized hub for managing
their account preferences, including options to change passwords and logout securely.
Administrators can easily update their passwords to enhance account security. This feature
typically involves the following steps:

1. Accessing the "Change Password" option within the settings menu.

2. Providing the current password for verification, followed by entering the new password and
confirming it.

3. Submitting the changes to update the password in the system.

By facilitating password changes within the settings section, Administrators can maintain strong
and secure login credentials, reducing the risk of unauthorized access.

The settings section also includes a logout option, allowing administrators to securely end their
current session and log out of the admin panel.

3
2.2 USER MODULE :

Login and Sign Up :

The sign-up and login features provide customers with a seamless and secure experience for
creating accounts and accessing the platform. New users access the sign-up page, typically
accessible from the homepage. Upon submitting the sign-up form, the system validates

the provided information, checking for errors or missing fields. If the information is
valid, the system creates a new user account and stores the user's details securely in
the database.

Registered users access the login page, accessible from the homepage. Users enter
their username or email address and password into the login form. The system
verifies the entered credentials against the stored user data in the database. These
sign-up and login features are essential components of user module, providing
customers with a smooth onboarding process and secure access to the platform's
features and services.

View Products :

Customers can browse through the product catalog using various navigation options such as
categories, subcategories, filters, or search functionality. This allows them to narrow down their
choices and find products that match their preferences and needs. Clicking on a product opens a
detailed product page, providing comprehensive information about the selected item. This may
include additional images, detailed descriptions, specifications, materials, care instructions, and
customer reviews and ratings. Customers can add products to their shopping cart directly from the
product page. They can specify the desired quantity and select any applicable size or variation
options before adding the item to their cart.

4
Manage Cart :

The "Manage Cart" feature enables customers to conveniently add, remove, and modify items in
their shopping cart before proceeding to checkout. Customers can add items to their cart from the
product listings or product detail pages by clicking on the "Add to Cart" button. Customers can
view their shopping cart at any time by clicking on the "Cart" icon or navigating to the cart page.
The cart page displays a list of all items currently in the cart, along with their details such as name,
price, quantity, and subtotal. Customers can remove items from their cart if they no longer wish to
purchase them. They can do so by clicking on the "Remove" or "Delete" button next to the
respective item. Customers can continue shopping and browsing for additional items even while
items are in their cart. They can navigate back to the product listings or product detail pages to add
more items as desired.

Wishlist :

Users can create wishlists to save products they're interested in for future reference or purchase.
Wishlist functionality enables users to curate a personalized collection of desired items and track
availability or price changes over time.

Manage Orders :

The "Manage Orders" feature enables customers to track, view, and manage their past and current
orders. Customers can access their order history, which provides a comprehensive record of all
their past purchases. Each order is listed with details such as order date, order number, items
purchased, prices, and order status. Customers have the option to reorder items from their order
history with ease. By clicking on a past order, users can quickly add the same items to their cart
for repurchase, streamlining the ordering process for frequently purchased items.

5
 TECHNOLOGIES USED IN PROJECT

3.1 FRONTEND :

HTML :- HTML (Hypertext Markup Language) is the standard language for creating
and structuring web pages.
CSS :- CSS (Cascading Style Sheets) is a stylesheet language used to control the
presentation and styling of HTML elements in web development.
Bootstrap :- Bootstrap is a front-end framework that simplifies and accelerates web
development by providing pre-designed templates, components, and
CSS styles.
JavaScript :- JavaScript is a versatile programming language commonly used for
creating interactive and dynamic elements on websites.

3.2 FRONTEND LIBRARY :

React JS :- React JS enables developers to create reusable UI components that

efficiently update and render when data changes.

3.3 BACKEND :

Node JS :- Node.js is a runtime environment that allows developers to run JavaScript code
on the server-side, enabling scalable and efficient web application development.

3.4 BACKEND FRAMEWORK :

Express JS :- It is a minimalist web application framework for Node.js, designed to simplify

the process of building web applications and APIs.

3.5 DATABASE :

MySQL :- MySQL is an open-source RDBMS that enables efficient storage, retrieval,

and management of structured data.

6
 FRONTEND

4.1 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 and scripting languages such as JavaScript.

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of a Webpage

 HTML consists of a series of elements

 HTML elements tell the browser how to display the content

 HTML elements are represented by tags

 HTML tags label pieces of content such as "heading", "paragraph", "table", and soon

 Browsers do not display the HTML tags, but use them to render the content of the page

7
4.1.1 HTML TAGS :

 HTML tags are element names surrounded by angle brackets.

 HTML tags normally come in pairs like <p> and</p>

 The first tag in a pair is the start tag, the second tag is the end tag.

 The end tag is written like the start tag, but with a forward slash inserted before the tag
name.

4.2 CSS

Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web
pages. They can be used to define text styles, table sizes, and other aspects of Web pages that
previously could only be defined in a page's HTML.CSS helps Web developers create a uniform
look across several pages of a Web site. Instead of defining the style of each table and each block
of text within a page's HTML, commonly used styles need to be defined only once in a CSS
document. Once the style is defined in cascading style sheet, it can be used by any page that
references the CSS file. Plus, CSS makes it easy to change styles across several pages at once. For
example, a Web developer may want to increase the default text size from 10pt to 12pt for fifty
pages of a Web site. If the pages all reference the same style sheet, the text size only needs to be
changed on the style sheet and all the pages will show the larger text.

8
While CSS is great for creating text styles, it is helpful for formatting other aspects of Web page
layout as well. For example, CSS can be used to define the cell padding of table cells, the style,
thickness, and color of a table's border, and the padding around images or other objects. CSS gives
Web developers more exact control over how Web pages will look than HTML does. This is why
most Web pages today incorporate cascading style sheets.

4.3 BOOTSTRAP

Bootstrap is a free and open-source frontend development framework for the creation of websites
and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate
the development of responsive, mobile-first sites and apps. Responsive design makes it possible
for a web page or app to detect the visitor’s screen size and orientation and automatically adapt
the display accordingly; the mobile first approach assumes that smartphones, tablets and task-
specific mobile apps are employees 'primary tools for getting work done and addresses the
requirements of those technologies in design. Bootstrap includes user interface components,
layouts and JS tools a long with the frame work for implementation. The software is available
precompiled or as source code.
Mark Otto and Jacob Thornton developed Bootstrap at Twitter as a means of improving the
consistency of tools used on the site and reducing maintenance. The software was formerly known
as Twitter Blueprint and is sometimes referred to as Twitter Bootstrap.
In computers, the word bootstrap means to boot: to load a program into a computer using a much
smaller initial program to load in the desired program (which is usually an operating system). In
the physical world, a bootstrap is a small strap or loop at the back of a leather boot that enables
you to pull the entire boot on and in general usage, bootstrap in the leveraging of a small initial

9
effort into something larger and more significant. There is also a common expression, "pulling
yourself up by your own bootstraps," meaning to leverage yourself to success from a small
beginning.

4.4 JAVASCRIPT

JavaScript is a dynamic computer programming language. It is lightweight and most commonly

used as a part of web pages, whose implementations allow client-side script to interact with the
user and make dynamic pages. It is an interpreted programming language with object-oriented
capabilities. JavaScript was first known as Live Script, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name Live Script. The general-purpose core of the
language has been embedded in Netscape, Internet Explorer, and other web browsers. Client-Side
JavaScript.

Client-side JavaScript is the most common form of the language. The script should be included in
or referenced by an HTML document for the code to be interpreted by the browser. It means that
a web page need not be a static HTML, but can include programs that interact with the user, control
the browser, and dynamically create HTML content. The JavaScript client-side mechanism
provides many advantages over traditional CGI server-side scripts. For example, you might use
JavaScript to check if the user has entered valid-mail address in a form field. The JavaScript code
is executed when the user submits the form, and only if all the entries are valid, they would be
submitted to the Webserver.

10
4.4.1 Advantages of JavaScript:

The merits of using JavaScript are −

 Less server interaction − You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to see
if they have forgotten to enter something.
 Increased interactivity − You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

4.5 REACT JS

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript
library for building user interfaces based on UI components. It is maintained by Meta (formerly
Facebook) and a community of individual developers and companies. React can be used as a base
in the development of single-page or mobile applications. However, React is only concerned with
state management and rendering that state to the DOM, so creating React applications usually
requires the use of additional libraries for routing, as well as certain client-side functionality.

11
4.5.1 Declarative:

React adheres to the declarative programming paradigm. Developers design views for each state
of an application, and react updates and renders components when data changes.

4.5.2 Component:
React code is made of entities called components. Components can be rendered to a particular
element in the DOM using the React DOM library. When rendering a component, one can pass in
values that are known as "props".
The two primary ways of declaring components in React is via function components and class-
based components.
a) Function Component
Function components are declared with a function that then returns some JSX.

b) Class-based Component
Class-based components are declared using ES6 classes.

4.5.3 JSX:
JSX, or JavaScript XML, is an extension to the JavaScript language syntax. Similar in appearance
to HTML, JSX provides a way to structure component rendering using syntax familiar to many
developers. React components are typically written using JSX, although they do not have to be
(components may also be written in pure JavaScript).

4.5.4 History of React:

React was created by Jordan Walke, a software engineer at Facebook, who released an early
prototype of React called "FaxJS". He was influenced by XHP, an HTML component library
for PHP. It was first deployed on Facebook's News Feed in 2011 and later on Instagram in 2012. It
was open-sourced at JSConf US in May 2013.

On September 26, 2017, React 16.0 was released to the public. On February 16, 2019, React 16.8
was released to the public. The release introduced React Hooks.

On August 10, 2020, the React team announced the first release candidate for React v17.0, notable
as the first major release without major changes to the React developer-facing API.

12
 BACKEND

5.1 NODE JS
Node.js is an open-source, cross-platform JavaScript runtime environment designed to execute
JavaScript code on the server side. It allows developers to build scalable and high-performance
network applications, making it particularly well-suited for building web servers, APIs, and real-
time applications.

5.1.1 KEY FEATURES:

 JavaScript Runtime: Node.js enables the execution of JavaScript code on the server side,
outside the context of a web browser. This unification of server-side and client-side
scripting allows developers to use a single programming language (JavaScript) throughout
the entire application stack.

 Event-Driven and Asynchronous: Node.js is built on an event-driven, non-blocking I/O

model. This means that it can handle multiple connections simultaneously without waiting
for one to complete before moving on to the next. This asynchronous nature is crucial for
building scalable and performant applications, especially those involving a large number
of concurrent connections.

 V8 JavaScript Engine: Node.js is powered by the V8 JavaScript engine, developed by

Google. V8 compiles JavaScript code into machine code, resulting in fast execution times.
This engine is also used in the Chrome browser, providing consistent performance between
client and server-side JavaScript execution.

13
 NPM (Node Package Manager): Node.js comes with a powerful package manager called
NPM. NPM allows developers to easily install, manage, and share third-party libraries and
packages, facilitating modular and efficient development.

 Single-Threaded Event Loop: While Node.js itself is single-threaded, it uses an event loop
to handle asynchronous operations efficiently. This allows Node.js to handle many
concurrent connections without the need for multi-threading, making it lightweight and
resource-efficient.

 Wide Range of Use Cases: Node.js is versatile and suitable for various applications,
including web servers, APIs, real-time applications (like chat applications and online
gaming), streaming services, and more. Its efficiency in handling concurrent connections
makes it well-suited for applications with high traffic and real-time requirements.

 Active and Supportive Community: Node.js has a large and active community of
developers contributing to its growth and improvement. This community support is
reflected in the availability of numerous libraries, frameworks, and tools that enhance the
development process.

 Cross-Platform: Node.js is designed to be cross-platform, allowing developers to run their

applications on various operating systems, including Windows, macOS, and Linux.

14
5.2 Express JS

Express.js is a minimal and flexible web application framework for Node.js, designed to build
web and mobile applications. It simplifies the process of creating robust and scalable server-
side applications by providing a set of features and tools for handling HTTP requests, routing,
middleware management, and more.

5.2.1 KEY ASPECTS:

 Minimalism and Flexibility: Express.js is intentionally lightweight, allowing developers

the flexibility to choose and integrate additional libraries or modules as needed. It provides
a fundamental set of features, leaving room for customization based on the specific
requirements of the application.

 Routing: Express simplifies the handling of HTTP requests by providing a routing

mechanism. Developers can define routes for different URLs and HTTP methods,
specifying the corresponding functions or middleware to execute when a particular route
is accessed.

 Middleware: Middleware functions in Express are used to perform tasks during the request-
response cycle. They can modify the request and response objects, execute code, terminate
the request-response cycle, or pass control to the next middleware in the stack. Middleware
plays a crucial role in handling tasks like authentication, logging, and error handling.

 Template Engines: Express supports various template engines, such as Pug, EJS, and
Handlebars, allowing developers to dynamically generate HTML on the server and send it
to the client.

15
  Error Handling: Express provides a built-in error-handling mechanism, making it easy to
handle errors and respond to clients with appropriate error messages. Custom error
handling middleware can be added to manage errors in a centralized manner.

 Static File Serving: Express simplifies the serving of static files, such as images,
stylesheets, and client-side JavaScript, by providing a middleware for this purpose.

 Middleware for Parsing Incoming Data: Express includes middleware for parsing incoming
data from requests, such as form data or JSON payloads. This makes it easy to work with
data sent by clients.

 RESTful API Development: Express is commonly used for building RESTful APIs. It
provides a straightforward way to define routes and handle HTTP methods, making it
efficient for creating APIs that follow REST principles.

Express.js is widely used in the Node.js ecosystem for building web applications, APIs, and server-
side components. Its simplicity, along with the ability to extend functionality through middleware
and plugins, has contributed to its popularity among developers for creating scalable and
maintainable web applications.

16
5.3 MYSQL

MySQL is an open-source relational database management system (RDBMS) that is widely used
for managing and organizing structured data. Developed by Oracle Corporation, MySQL is known
for its reliability, scalability, and performance. It supports a variety of operating systems, including
Windows, Linux, and macOS.

5.3.1 Key features:

 Relational Database: MySQL follows the relational model, organizing data into tables with
rows and columns. This structure allows for efficient storage, retrieval, and manipulation
of data.

 SQL Support: MySQL uses Structured Query Language (SQL) for interacting with the
database. Users can use SQL to perform tasks such as querying, updating, inserting, and
deleting data.

 Data Security: MySQL provides robust security features, including user authentication,
access control, and encryption. This ensures that only authorized users have access to
specific databases or tables.

 Scalability: MySQL is designed to handle both small and large-scale applications. It can
efficiently manage databases of varying sizes and accommodate growing data
requirements.

 Replication and High Availability: MySQL supports replication, allowing for the creation
of copies of a database for redundancy and load balancing. This enhances the system's
availability and fault tolerance.

 Community and Support: As an open-source database, MySQL has a large and active
community of developers. This community contributes to ongoing development, provides
support through forums, and shares resources and plugins.

17
 SYSTEM DEVELOPMENT LIFE CYCLE (SDLC)

SDLC is the acronym of Software Development Life Cycle. SDLC is a framework defining tasks
performed at each step in the software development process.

SDLC is a process followed for a software project, within a software organization. It consists of
a detailed plan describing how to develop, maintain, replace and alter or enhance specific
software. The life cycle defines a methodology for improving the quality of software and the
overall development process.

The following figure is a graphical representation of the various stages of a typical SDLC.

Fig 6.1 SDLC

18
6.1 Stages of SDLC:

 Planning and Requirement Analysis - Requirement analysis is the most important and
fundamental stage in SDLC. It is performed by the senior members of the team with
inputs from the customer, the sales department, market surveys and domain experts in
the industry
 Defining Requirements - Once the requirement analysis is done the next step is to
clearly define and document the product requirements and get them approved from the
customer or the market analysts.
 Designing the Product Architecture - SRS is the reference for product architects to
come out with the best architecture for the product to be developed.

Product Architecture

Fig 6.1.1

Full stack web developer uses a combination of HTML, CSS, and JavaScript to build
everything a user sees and interacts with on a website. At the back-end, they develop the
application, server, and database that make up the foundational structure of a website. Their
skills are often centred around solution stacks like Apache, MySQL, Express.js, ReactJS,
Node.js which contain all the technologies required to set up a complete website.

19
Full stack is based on the 3Tier Web Architecture. This is the unique system of developing
web database applications which work around the 3 tier model, comprising of the database tier
at the bottom, the application tier in the middle and the client tier at the top. This
comprehensive 3 tier architecture module is the framework for most Web Applications on the
Internet. This system helps to separate the Business Logic from the Application, Data Storage,
and database.

Advantages:

1. Improved Data Integrity

2. High Degree of Flexibility in deployment platform and configurations
3. Improved security
4. High Performance and persistent objects
5. Architecture is scalable, adding users and resources in future would be easy
6. Maintenance and modifications can be done effectively
7. Code and data reusability can be achieved

 Building or Developing the Product - In this stage of SDLC the actual development
starts and the product is built. The programming code is generated as per DDS during
this stage. If the design is performed in a detailed and organized manner, code generation
can be accomplished without much hassle.

 Testing the Product - This stage is usually a subset of all the stages as in the modern
SDLC models, the testing activities are mostly involved in all the stages of SDLC.

 Deployment in the Market and Maintenance - Once the product is tested and ready to
be deployed it is released formally in the appropriate market.

20
6.2 SDLC Models

There are various software development life cycle models defined and designed which are
followed during the software development process. These models are also referred as Software
Development Process Models".

Iterative Model

An Iterative Lifecycle model does not attempt to start with a full specification of requirements.
Instead, development begins by specifying and implementing just part of the software, which can
then be reviewed in order to identify further requirements. This process is then repeated, producing
a new version of the software for each cycle of the model. Consider an iterative lifecycle model
which consists of repeating the following four phases in sequence:

Fig 6.2.1 Iterative Model

21
1. A Requirements phase, in which the requirements for the software are gathered and analysed.
Iteration should eventually result in a requirements phase that produces a complete and final
specification of requirements.

2. A Design phase, in which a software solution to meet the requirements is designed. This may
be a new design, or an extension of an earlier design.

3. An Implementation and Test phase, when the software is coded, integrated and tested.

4. A Review phase, in which the software is evaluated, the current requirements are reviewed,
and changes and additions to requirements proposed.

5. For each cycle of the model, a decision has to be made as to whether the software produced by
the cycle will be discarded, or kept as a starting point for the next cycle (sometimes referred to
as incremental prototyping). Eventually a point will be reached where the requirements are
complete and the software can be delivered, or it becomes impossible to enhance the software
as required, and a fresh start has to be made.

6. The iterative lifecycle model can be likened to producing software by successive

approximation. Drawing an analogy with mathematical methods that use successive
approximation to arrive at a final solution, the benefit of such methods depends on how rapidly
they converge on a solution.

7. The key to successful use of an iterative software development lifecycle is rigorous validation
of requirements, and verification (including testing) of each version of the software against
those requirements within each cycle of the model. The first three phases of the example
iterative model is in fact an abbreviated form of a sequential V or waterfall lifecycle model.
Each cycle of the model produces software that requires testing at the unit level, for software
integration, for system integration and for acceptance. As the software evolves through
successive cycles, tests have to be repeated and extended to verify each version of the software.

22
 FEASIBILITY STUDY

After doing the project Online Shopping Website, study and analysing all the existing or required
functionalities of the system, the next task is to do the feasibility study for the project. A feasibility
study is a preliminary study which investigates the information needs of prospective users and
determines the resource requirements, determining the cost effectiveness of various alternatives in
the designs of the information system, benefits and feasibility of proposed project. The goal of the
feasibility study is to evaluate alternative systems to propose the most feasible and desirable
systems for development.

7.1 Operational Feasibility

The operational feasibility is responsible for the operations of management, faculty members, and
students involved in a project. Our project is operationally feasible because the modules we have
considered such as Manual Downloading, Auto Downloading and Manual Uploading provides a
combined platform by using which the related tasks can be handled in a easy manner.

7.2 Technical Feasibility

Technical feasibility can be demonstrated if reliable hardware and software capable of meeting
needs of proposed system can be developed or acquired by the business in required time. Our
project is technically feasible because the required hardware and software needed for our project
are made available to us by our lab technician.

7.3 Economic Feasibility

This is a very important aspect to be considered while developing a project. We decided the
technology based on minimum possible cost factor. Overall, we have estimated that the benefits
the organization is going to receive from the proposed system will surely overcome the initial
costs and the later on running cost for system.

23
 PROCESS DESIGN

8.1 Data Flow Diagrams

A data flow diagram (DFD) maps out the flow of information for any process or system. It uses
defined symbols like rectangles, circles and arrows, plus short text labels, to show data inputs,
outputs, storage points and the routes between each destination. Data flowcharts can range from
simple, even hand-drawn process overviews, to in-depth, multi-level DFDs that dig progressively
deeper into how the data is handled. Like all the best diagrams and charts, a DFD can often visually
“say” things that would be hard to explain in words, and they work for both technical and
nontechnical audiences, from developer to CEO.

8.1.1 Data Flow Diagram (DFDS) notations:

 External entity - External entity is an outside system that sends or receives data,
communicating with the system being diagrammed. They are the sources and destinations
of information entering or leaving the system. They might be an outside organization or
person, a computer system or a business system. They are also known as terminators,
sources and sinks or actors. They are typically drawn on the edges of the diagram.

SYMBOL

24
 Process - Any process that changes the data, producing an output. It might perform
computations, or sort data based on logic, or direct the data flow based on business rules.
Since they transform incoming data to outgoing data, all process must have inputs and
outputs on DFDS. A short label is used to describe the process, such as “Submit payment.”

SYMBOL

 Data Store - A data store does not generate any operations but simply holds data for later
access. Data stores could be consists of files held long term or a batch of documents stored
briefly while they wait to be processed.

SYMBOL

 Data Flow - The route that data takes between the external entities, processes and data
stores. It portrays the interface between the other components and is shown with arrows,
typically labeled with a short data name, like “Billing details.”

SYMBOL

25
DATA FLOW DIAGRAM

Fig 8.1.1

Fig 8.1.2

26
Fig 8.1.3

Fig 8.1.4

27
Fig 8.1.5

28
8.2 Entity Relationship Diagram

An Entity Relationship (ER) Diagram is a type of flowchart that illustrates how “entities” such as
people, objects or concepts relate to each other within a system. ER Diagrams are most often used
to design or debug relational databases in the fields of software engineering, business information
systems, education and research. Also known as ERDs or ER Models, they use a defined set of
symbols such as rectangles, diamonds, ovals and connecting lines to depict the interconnectedness
of entities, relationships and their attributes. They mirror grammatical structure, with entities as
nouns and relationships as verbs.

Fig 8.2.1 ER Diagram

29
8.3 DATA SCHEMA

 Admin

Table 8.3.1

 Category

Table 8.3.2

 Subcategories

Table 8.3.3

30
 Products

Table 8.3.4

 User SignUp

Table 8.3.5

31
 Cart

Table 8.3.6

 Bill

Table 8.3.7

32
 Bill Details

Table 8.3.8

33
 DESIGN AND SCREENSHOTS
Index/Home Page :- The index page serves as main entry point of the website, displaying
essential information and providing navigation to other sections.

Fig 9.1
34
About Us :- The "About Us" page describes the mission, values, and background of our store.

Fig 9.2

35
Contact Us :- The "Contact Us" page allows visitors to reach out to the administrators for
inquiries, feedback, or support.

Fig 9.3

36
Products Page :- The products page displays a comprehensive catalog of footwear offerings
available for purchase on SoleVerse.

Fig 9.4

37
Shopping Cart :- The shopping cart page is where users can view and manage items they've
added for purchase before proceeding to checkout.

Fig 9.5

38
Checkout :- The checkout page is where users review and finalize their purchases, providing
shipping, payment, and order confirmation details before completing a transaction.

Fig 9.6
39
User Signup :- User Signup page allows users to create new accounts by providing necessary
information such as username, email, and password.

Fig 9.7

40
User Login :- User Login page allows users to authenticate their identity using credentials like
username and password to access user dashboard.

Fig 9.8

41
Admin Login :- The admin login page is where authorized users enter credentials to access
administrative functions and privileges of the website.

Fig 9.9

42
Add Category :- This page allows admin to add a new category into the database.

Fig 9.??

43
Add SubCategory :- This page allows admin to create a new subcategory into an existing
category.

Fig 9.??

44
Add Product :- In this page , Admins can add new products according to the subcategories
available.

Fig 9.??

45
Admin Change Password :- This page allows admin to change their password.

Fig 9.??

46
 TESTING

Software Testing is an empirical investigation conducted to provide stakeholders with information

about the quality of the product or service under test, with respect to the context in which it is
intended to operate. Software Testing also provides an objective, independent view of the software
to allow the business to appreciate and understand the risks at implementation of the software. Test
techniques include, but are not limited to, the process of executing a program or application with
the intent of finding software bugs. It can also be stated as the process of validating and verifying
that a software program/application/product meets the business and technical requirements that
guided its design and development, so that it works as expected and can be implemented with the
same characteristics. Software Testing, depending on the testing method employed, can be
implemented at any time in the development process, however the most test effort is employed
after the requirements have been defined and coding process has been completed.

10.1 Unit Testing :

The primary goal of unit testing is to take the smallest piece of testable software in the
application, isolate it from the remainder of the code, and determine whether it behaves exactly
as you expect. Each unit is tested separately before integrating them into modules to test the
interfaces between modules. Unit testing has proven its value in that a large percentage of defects
are identified during its use. Unit testing is a software verification and validation method where
the programmer gains confidence that individual units of source code are fit for use. A unit is the
smallest testable part of an application. In procedural programming a unit may be an individual
program, function, procedure, etc., while in object-oriented programming, the smallest unit is a
class, which may belong to a base/super class, abstract class or derived/child class. Ideally, each
test case is independent from the others: substitutes like method stubs, mock objects, fakes and
test harnesses can be used to assist testing a module in isolation. Unit tests are typically written
and run by software developers to ensure that code meets its design and behaves as intended.

47
10.2 Integration Testing :

Integration testing, also known as integration and testing (I&T), is a software development
process which program units are combined and tested as groups in multiple ways. In this context,
a unit is defined as the smallest testable part of an application. Integration testing can expose
problems with the interfaces among program components before trouble occurs in real-world
program execution. Integration testing is a component of Extreme Programming (XP), a
pragmatic method of software development that takes a meticulous approach to building a
product by means of continual testing and revision.

There are two major ways of carrying out an integration test, called the bottom-up method and
the top-down method. Bottom-up integration testing begins with unit testing, followed by tests of
progressively higher-level combinations of units called modules or builds. In top-down
integration testing, the highest-level modules are tested first and progressively lower-level
modules are tested after that. In a comprehensive software development environment, bottom-up
testing is usually done first, followed by top-down testing.

10.3 Validation Testing :

At the validation level, testing focuses on user visible actions and user recognizable output from
the system. Validations testing is said to be successful when software functions in a manner that
can be reasonably expected by the customer.

48
10.4 Test Cases of The Project are Given Below

USER LOGIN: On entering wrong password or Email Id, the login page gives an alert.

Fig 10.4.1

USER SIGN UP: We cannot create an account until we fill all the details required.

Fig 10.4.2

49
CHANGE PASSWORD: We get an alert when the old password is not correct.

Fig 10.4.3

CHANGE PASSWORD: We get an alert when the new password and confirm password do not
match.

Fig 10.4.4

50
 MAINTENANCE

Once the software is delivered and deployed, then maintenance phase starts. Software requires
maintenance because there are some residual errors remaining in the system that must be removed
as they discovered. Maintenance involves understanding the existing software (code and related
documents), understanding the effect of change, making the changes, testing the new changes, and
retesting the old parts that were not changed. The complexity of the maintenance task makes
maintenance the costliest activity in the life of software product.

It is believed that almost all software that is developed has residual errors, or bugs, in them. These
errors need to be removed when discovered that leads to the software change. This is called
Corrective Maintenance. Corrective maintenance means repairing, processing or performance
failures or making alterations because of previously ill-defined problems.

Software undergoes change frequently even without bugs because the software must be upgraded
and enhanced to include more features and provide more services. This also requires modification
of the software. The changed software changes the environment, which in turn requires further
change. This phenomenon is called the “law of software evaluation”. Maintenance due to this
phenomenon is called adaptive maintenance. Adaptive maintenance means changing the program
function. Perfect maintenance means enhancing the performance or modifying the programs
according to the user’s additional or changing needs.

The keys to reduce the need for maintenance are:

 More accurately defining the user’s requirement during system development.

 Preparation of system documentation in a better way.
 Using more effective ways for designing processing logic and communicating it to
project team members.
 Making better use of existing tools and techniques.

51
 LIMITATIONS

While SoleVerse excels in providing a diverse range of footwear options and Developing an active
community of enthusiasts, it's essential to acknowledge some of its limitations:

Limited Physical Interaction : SoleVerse operates primarily as an online platform, which means
customers may miss out on the tactile experience of trying on shoes before purchasing. This
limitation can affect purchasing decisions, especially for those who prefer to assess comfort and
fit in person.

Shipping Constraints : Depending on geographical location and shipping policies, customers may
encounter limitations or delays in receiving their orders. This factor can impact customer
satisfaction, especially for those seeking expedited delivery or facing international shipping
challenges.

Competitive Market Landscape : The online footwear market is extremely competitive, with
multiple established and growing businesses competing for customer attention. In this crowded
market, SoleVerse may struggle to differentiate itself from competitors while also attracting and
retaining clients.

Dependence on Digital Infrastructure : SoleVerse's operation relies heavily on digital

infrastructure, including website functionality, payment processing systems, and cybersecurity
measures. Any disruptions or vulnerabilities in these systems could impact the platform's ability
to serve customers effectively.

Despite these limitations, SoleVerse continues to expand and adapt, overcoming obstacles and
providing great value to its clients. By resolving these limitations and focusing on its strengths,
SoleVerse could secure its place as a top online destination for shoe enthusiasts.

52
 FUTURE SCOPE

The Future scope of the SoleVerse website is promising and exciting. Here are a few avenues for
potential growth and development:

Expanded Product Range : Diversifying the footwear collection to include more styles, brands,
and categories can attract a broader audience and cater to diverse tastes and preferences.

Personalization Features : Implementing advanced personalization algorithms can enhance the

shopping experience by offering recommendations based on individual preferences, browsing
history, and purchase behavior.

Social Commerce Integration : Integrating social commerce features that enable users to shop
directly from social media platforms can capitalize on the growing trend of social media-driven
shopping and expand the reach of the brand.

Mobile App Development : Develop a dedicated mobile application for iOS and Android devices
to facilitate convenient browsing, purchasing, and order tracking on smartphones and tablets.

Enhanced Customer Support : Offer 24/7 customer support through various channels such as
live chat, email, and phone, ensuring prompt assistance and resolving queries effectively. Seamless

Checkout Experience : Streamline the checkout process with features like guest checkout, one-
click purchasing, and multiple payment options to reduce cart abandonment and improve
conversion rates.

By embracing innovation ,customer-centricity, and sustainability, SoleVerse can continue to

evolve in the competitive landscape of online footwear retail, delivering exceptional value to its
customers while staying ahead of industry trends.

53
 CONCLUSION

This is to conclude that the project that I undertook was worked upon with a sincere effort. Most
of the requirements have been fulfilled up to the mark and the requirements which have been
remaining, can be completed with a short extension.

We have successfully implemented the site on ‘SoleVerse Online Shopping’ with the help of
various links and tools, we have been able to provide a site which is live and running on the web.
We have been successful in our attempt to take care of the needs of both the customers as well as
the administrator. In conclusion, it's critical to understand SoleVerse's limitations even if it
provides a wide variety of footwear options and develops a lively online community of
consumers. These include challenges related to physical interaction, shipping constraints,
personalization options, size and fit issues, lack of physical presence, competitive market
landscape, and dependence on digital infrastructure .

SoleVerse is still dedicated to overcoming these obstacles and providing its clients with
outstanding value. By addressing these problems and utilizing its capabilities, SoleVerse can
further establish itself as a leading global online platform for shoe enthusiasts.

54
 BIBLIOGRAPHY

To bring the system to verge of completion the following resources have been used:

 https://react-bootstrap.netlify.app/
 https://www.w3schools.com/nodejs/
 https://quantumalert.cosmogic.com/
 https://legacy.reactjs.org/
 https://www.tutorialspoint.com/mysql/mysql-nodejs-syntax.htm

55