Aura Attire E-Commerce Website

using Mern Submitted in partial

fulfilment of the requirements for the

award of the degree of

Bachelor of Computer Applications

To

Guru Gobind Singh Indraprastha University,

Delhi

Guide: Submitted by:

Ms. Anjaly Chauhan Md Arslaan
(BCA-V)
(Assistant Professor) (07713702022)

Institute of Information Technology & Management, New Delhi – 110058

Batch (2021-2024)
 Certificate

I, (Md Arslaan,07713702022) certify that the Minor Project Report (BCA- 307) entitled

“E-Commerce Website Using Mern”

is done by me and it is an authentic work carried out by me at Institute of Information

Technology & Management. The matter embodied in this project work has not been
submitted earlier for the award of any degree or diploma to the best of my knowledge and
belief.

Signature of the Student

Date:

Certified that the Project Report (BCA-307) entitled “ ”

done by the above student is completed under my guidance.

Signature of the Guide:

Date:
Name of the Guide: Ms. Anjaly Chauhan

Designation: Associate Professor

Prof. (Dr.) Ganesh Kumar Wadhwani Prof. (Dr.) Rachita Rana

Counter Sign HOD- Computer Science Counter Sign Director

i
 Acknowledgement

Presentation inspiration and motivation have always played a key role in the success of any
venture.
I would like to express my sincere gratitude towards my project guide “Ms. Anjaly Chauhan”
whose valuable guidance and kind supervision made the project successful.
Our esteemed Head of Department Prof. (Dr.) Ganesh Kumar Wadhwani whose leadership
and vision have created an environment conducive to learning and innovation. Your support
for academic endeavors has been a constant source of motivation.
I am immensely obliged to my friends for the relegating inspiration, encouraging guidance
and kind supervision in the completion of my project.
This project would not have been possible without the collective wisdom and encouragement
of these individuals. I thank each one of you from the bottom of our heart for your
contributions.

ii
 TABLE OF CONTENTS

S No Topic Page No
1 Cover Page as per format _

2 Acknowledgement _
3 Synopsis _

4 Abstract _

5 CHAPTER 1 - INTRODUCTION 1-6

1.1 Objective & Scope of the Project _

1.2 Theoretical Background Definition of Problem _
1.3 System Analysis & Design vis-à-vis User Requirement -
1.4 System Planning (PERT Chart) -
6 CHAPTER 2 – METHODOLOGY -
2.1 Methodology adopted -
2.2 System Implementation -
2.3 Details of Hardware & Software
2.4 System Maintenance & Evaluation -
7 CHAPTER 3 – SOFTWARE REQUIREMENT SPECIFICATION 10-12
3.1 Description of Information System (Block Diagram) -
3.2 Use Case Diagram -
3.3 Entity-Relationship (ER) Diagram
3.4 Data Flow Diagram (DFD)
8 CHAPTER 4 – Coding and Screenshots of the project 13-19
4.1 Code Structure and Organization
4.2 Key Functional Code Snippets
4.3 User Interface and Workflow Screenshots
4.4 Database Description
9 CHAPTER 5 – CONCLUSION AND FUTURE WORK 20-22
5.1 Conclusion -
5.2 Future Scope
5.3 References

iii
 SYNOPSIS

1. Title of the Project –

The title of the project is “Aura Attire E-Commerce Website Using Mern”

2. Problems with the Existing System

Shoppers often want a seamless way to compare styles, prices, quality, and product availability
across multiple popular brands like Zara, H&M, and Puma. Current e-commerce platforms
often fall short, lacking a unified interface for brand-to-brand comparisons. As a result, users
are required to visit multiple websites or sift through extensive product lists within a single site,
making it hard to evaluate items side-by-side. This process is time-consuming and can lead to
missed opportunities for finding the best deals or styles that align with the shopper’s
preferences.

3. Description of the Proposed System:

• Brand-Centric Shopping: Aura Attire allows users to browse and shop clothing from
popular brands like Zara, H&M, Puma, and more, in one platform.
• Comparison Feature: Users can easily compare products across different brands based on
style, price, and availability.
• Real-Time Updates: The platform provides real-time information on product availability,
prices, and discounts.
• User-Friendly Interface: Designed for simplicity, the website ensures a smooth, intuitive
shopping experience with easy navigation.
• Personalized Recommendations: The system suggests items based on user preferences
and browsing history, enhancing the shopping experience

4. Description and Identification of the Functional Modules

• User Authentication Module: Allows users to register, log in, and manage their accounts
securely. Users can view their order history, save items to a wishlist, and track current
orders.
• Product Browsing and Filtering Module: Users can browse products from different
brands, with filters for size, color, price, and category. The brand-specific shopping

iv
 feature helps users find items from their preferred brands like Zara, H&M, and Puma.
• Product Comparison Module: Users can compare multiple products across different
brands, looking at factors like price, style, and availability in a side-by-side view for
informed decision-making.
• Admin Product Management Module: Admins have the ability to add, update, and remove
products from the platform, categorized by brand. They can manage product details such
as name, description, price, images, and stock availability.
• Order Management Module: Users can place orders, add items to their cart, and proceed
to checkout. Admins can track and manage orders, update order status, and handle
customer inquiries regarding shipping and returns.
• Payment Gateway Integration: A secure payment module that allows users to pay for their
purchases through various methods like credit/debit cards, online wallets, or net banking.
• Review and Rating System: Users can leave feedback, rate products, and view reviews
from other customers to make more informed purchase decisions.
User
4.1 Admin
Description: A user with administrative privileges who manages product listings,
orders, and customer accounts.
4.2 Customer (End User)
Description: A registered or guest user who visits the platform to browse, compare,
and purchase clothing.
5. Tools/Platforms:
5.1 Hardware Specifications:
• RAM: Minimum 4 GB (Recommended: 8 GB or more for better performance)
• HDD: Minimum 10 GB storage (Recommended: SSD for faster performance)
• Processor: Intel Core i3 or above (or equivalent)
5.2 Software Specifications:
• Operating System: Windows 7 or above, Linux, macOS
• Front-End: React.js, Tailwind CSS
• Back-End: Node.js, Express.js
• Database: MongoDB
• Other Technologies:
o JWT (JSON Web Token): For secure authentication and user session management.
o Version Control: Git and GitHub for code management and version control.

v
 o Payment Gateway: Integration with payment systems (e.g., PayPal).

6. Methodology:
6.1 SDLC Model to be Used: Agile Model
6.2 Justification for the Selection of Model: The Agile model is well-suited for this project
because it supports incremental and iterative development. Given the dynamic nature of web
applications, it allows for continuous improvement based on user feedback and evolving
requirements. Agile’s flexibility ensures that features such as real-time updates, authentication with
JWT tokens, and payment gateway integrations can be added progressively. Regular collaboration
between frontend and backend teams enhances communication, ensuring that all modules, from
product browsing to secure login, work seamlessly. This methodology fosters quick adaptability to
changes, which is essential for a project like Aura Attire that may require rapid adjustments as new
technologies emerge or user needs change.
4o mini

7. Future Scope

Augmented Reality (AR) Virtual Try-On:

• Description: Integrate an AR feature that allows customers to virtually try on clothes before
purchasing. Using their webcam or phone camera, customers can see how a piece of clothing
fits on their virtual avatar or body.
• Immersive Shopping Experience: AR allows users to virtually try on clothes, offering a
realistic and interactive experience from the comfort of their home.
• Reduced Return Rates: By visualizing how products will look on them, customers can make
more confident purchasing decisions, reducing product returns.
• Increased Customer Engagement: AR features encourage users to spend more time on the
platform, enhancing brand interaction and satisfaction.
• Virtual Fitting Room: Customers can experiment with different outfits, sizes, and styles in
a virtual fitting room, improving the overall shopping experience.
• Brand Differentiation: Integrating AR sets the brand apart from competitors, positioning
Aura Attire as a leader in tech-driven fashion e-commerce.

vi
8. References
[Smith, J., & Lee, S. (2020).] Web Application Development with React.js. Packt Publishing.

[Tiwari, A., & Singh, R. (2020).] Augmented Reality in E-Commerce: A Review and Research

Directions. International Journal of Scientific & Technology Research, 9(2), 1776-1780.

[Mohammad, M. (2021).] Exploring the Role of Augmented Reality in Enhancing the E-

commerce Experience. Journal of Retailing and Consumer Services, 58, 102226.

[Kour, S., & Bhagat, R. (2019).] The Impact of Augmented Reality on Consumer Behavior in

Online Retailing. International Journal of Advanced Research in Computer Science, 10(5), 56-

[Gupta, R., & Sharma, P. (2020).] Web Application Development with React.js. Springer.

[Ramachandran, S., & Sivasubramaniam, A. (2018).] E-commerce and the Use of

Technology: A Focus on Front-End Frameworks and Back-End Systems. Business &

Economics Journal, 9(4).

[Hancock, T. (2021).] Leveraging Tailwind CSS for Modern Web Design. Smashing

[Cheng, C., & Liang, H. (2017).] Enhancing E-commerce Website Performance: The Role of

User Interface and Experience. Journal of Electronic Commerce Research, 18(2), 125-140.

[Gomez, V., & Wu, Z. (2021).] The Integration of Machine Learning and AR in E-commerce

Websites. Artificial Intelligence in E-Commerce Journal, 4(1), 98-104.

[Mishra, S. (2022).] Exploring the Future of AR in Online Shopping. TechCrunch.

[Johnson, B., & Lam, A. (2021).] Implementing Secure Authentication with JWT Tokens in

Modern Web Applications. Journal of Web Security and Authentication, 12(3), 221-229.

[Pereira, L., & Fernandes, A. (2020).] AR in Fashion E-Commerce: Revolutionizing the

Virtual Shopping Experience. FashionTech Journal, 2(1), 45-52.

[Sharma, S., & Chawla, D. (2020).] Using MongoDB for Scalable and Efficient E-commerce

Databases. International Journal of Computer Applications, 171(7), 20-25.

9. [Singh, P., & Sharma, R. (2021).] Building and Scaling E-Commerce Platforms with Node.js
References

vii
 Abstract:

Aura Attire is an innovative e-commerce platform designed to simplify the online shopping
experience for fashion enthusiasts. The website enables users to browse, compare, and purchase
clothing from popular brands such as Zara, H&M, and Puma, all in one seamless interface. The
platform leverages modern web development technologies, including React.js for front-end design
and Node.js with Express.js for backend services. It utilizes MongoDB as its database solution to
manage product listings, user data, and transactions efficiently.

The core functionality of Aura Attire includes product categorization by brand, size, and price
range, allowing users to filter and find their desired items quickly. Additionally, the site integrates
JWT token-based authentication for secure user login and registration processes. The website
provides a responsive design optimized for both desktop and mobile devices, ensuring a smooth
user experience across various platforms.

The project aims to address key challenges faced by online shoppers, such as the difficulty in
comparing products across multiple brands and the lack of streamlined, user-friendly interfaces.
Through its combination of functionality and aesthetics, Aura Attire strives to offer a unique and
engaging shopping experience while supporting brands and providing users with a reliable platform
for purchasing fashion items.

viii
 Image Index

Page no Fig no
4 1.5.1
7 2.3.1,2.3.1
8 2.3.3,2.3.4,2.3.5,2.3.6
9 2.3.7,2.3.8,2.3.9
12 3.1.1
14 3.2.1
16 3.3.1
18 3.4.1
19 3.4.2,3.4.3
20 3.4.4
22 4.1.1
22 4.1.2
23 4.2.2,4.2.3
24 4.2.4,4.2.5
25 4.2.6,4.2.7
26 4.2.8,4.2.9
27 4.2.10,4.2.11
28 4.2.12,4.2.13
29 4.2.14,4.2.14
30 4.3.1.1,4.3.1.2
31 4.3.1.3,4.3.1.4
32 4.3.2.1,4.3.2.2
33 4.3.2.3,4.3.2.4
34 4.4.1,4.4.2
35 4.4.3,4.4.4

ix
 CHAPTER 1 – INTRODUCTION
1.1 Objective & Scope of the Project
Objective:
The primary objective of the Aura Attire project is to create a comprehensive and user-friendly e-
commerce platform where users can easily browse and purchase clothing from various popular
brands like Zara, H&M, and Puma. The platform aims to provide a seamless shopping experience
by enabling customers to filter products based on brand, category, size, and price, and offering
secure user authentication through JWT tokens.
Scope:
The scope of this project includes the development of the front-end using React.js and Tailwind
CSS, and the back-end using Node.js and Express.js. The database management system, MongoDB,
will be used for storing product listings, user data, and transaction information. The website will
offer features like product searching, real-time chat support, secure login, and easy checkout, all
accessible through both desktop and mobile devices.

1.2 Theoretical Background

E-Commerce and Online Shopping:
E-commerce has revolutionized the retail industry, providing users with the convenience of
shopping from anywhere at any time. Online shopping platforms enable users to explore a wide
range of products, compare different brands, and make purchases securely without having to visit
physical stores. The rise of online clothing retail has made it easier for consumers to access their
favorite brands and discover new fashion trends.
Web Development Technologies:
To meet the needs of modern users, Aura Attire uses React.js, a popular front-end JavaScript
library that provides a fast and dynamic user interface. The back-end is powered by Node.js and
Express.js, which offer scalable and efficient server-side operations. MongoDB is used as the
database to handle the data management of products and users efficiently.

1.3 Definition of Problem

In today's digital age, online shoppers often face challenges when navigating e-commerce websites,
such as:
• Difficulty in Comparing Products: Shoppers often struggle to compare prices, sizes,
styles, and availability across multiple brands within a single platform.
• Poor User Experience: Many existing e-commerce platforms lack seamless user interfaces

1
 that are both functional and visually appealing, resulting in higher bounce rates and lower
customer satisfaction.
• Security Issues: E-commerce websites may not provide secure login and payment systems,
making users hesitant to complete purchases.
The Aura Attire platform addresses these problems by providing a clean, intuitive, and secure
shopping experience, focusing on easy brand comparison, a responsive design, and enhanced
security through JWT token authentication.

1.4 System Analysis & Design vis-a-vis User Requirements

User Requirements:
The following are the key user requirements for the Aura Attire platform:
• User Authentication: Secure login and registration using JWT tokens.
• Brand-specific Product Listings: Products should be easily searchable and categorized by
brand (Zara, H&M, Puma).
• Product Filtering: Users must be able to filter products by size, price range, and category.
• Responsive Design: The platform should work seamlessly on both desktop and mobile
devices.
• Real-Time Support: The platform should have a real-time chat feature for customer
support.
System Design:
The design of Aura Attire is based on a multi-layer architecture:
1. Front-End Layer (React.js): Provides the user interface and interaction.
2. Back-End Layer (Node.js and Express.js): Handles business logic, user authentication,
and database operations.
3. Database Layer (MongoDB): Manages product and user data storage.
1.5 System Planning (PERT Chart)
A PERT (Program Evaluation Review Technique) chart is a project management tool that helps
visualize the tasks required to complete the project and the time dependencies between these tasks.
The PERT chart for Aura Attire includes the following stages:
1. Requirement Gathering & Analysis
o Time: 1 week
o Tasks: Finalizing user requirements, defining features, setting project goals.
2. System Design & Architecture
o Time: 2 weeks
o Tasks: Designing front-end and back-end architecture, selecting technology stack,
2
 database schema design.
3. Development Phase 1 (Frontend Development)
o Time: 3 weeks
o Tasks: Building UI components with React.js, integrating Tailwind CSS for styling.
4. Development Phase 2 (Backend Development)
o Time: 3 weeks
o Tasks: Building server-side logic using Node.js and Express.js, integrating
MongoDB for data management.
5. Integration & Testing
o Time: 2 weeks
o Tasks: Testing the integration of front-end and back-end, ensuring all features work
as expected, security testing (JWT authentication).
6. Deployment & Launch
o Time: 1 week
o Tasks: Deploying the website on the server, ensuring scalability, and launching for
user access.
7. Post-launch Support & Maintenance
o Time: Ongoing
o Tasks: Monitoring system performance, fixing bugs, adding new features as needed.

3
Fig 1.5.1

4
 CHAPTER 2 – METHODOLOGY
2.1 Methodology Adopted
The methodology adopted for the development of Aura Attire is the Agile Development Model,
which emphasizes iterative and incremental development. Agile is well-suited for web-based
projects as it allows for continuous feedback, flexibility in handling changes, and the ability to
incorporate new features based on user requirements.
The development process follows the stages of planning, designing, developing, testing, and
delivering in a cycle that allows flexibility for improvements and refinements after each iteration.
Agile methodologies focus on collaboration, customer feedback, and short release cycles to ensure
that the application meets the needs of its users.
Key features of the methodology include:
• Sprint-based development: Tasks are divided into small, manageable sprints (usually 2-3
weeks), with deliverables presented after each sprint.
• Continuous Testing: Functional and security tests are run after each iteration, ensuring
quality throughout the development process.
• Customer Collaboration: Frequent meetings with stakeholders to gather feedback and
ensure the project meets the user requirements.
This methodology ensures that the platform remains adaptable to evolving business needs, and any
changes or new features can be integrated seamlessly into the system.

2.2 System Implementation

System implementation for Aura Attire follows a structured approach using the following phases:
1. Requirement Analysis and Planning:
The first phase involves understanding user needs and defining the system requirements.
This includes user interface preferences, functional requirements (e.g., product filtering,
real-time chat support), and non-functional requirements (e.g., performance, security).
2. System Design:
After defining the requirements, the system architecture is planned. The design phase
includes:
o Frontend Design: Developed using React.js and Tailwind CSS, ensuring a
responsive, intuitive, and visually appealing user interface.
o Backend Design: Built using Node.js and Express.js, which provide scalable
server-side logic. The back-end handles user authentication, product data retrieval,
and transactions.
o Database Design: Using MongoDB to store and manage product catalogs, user
5
 data, and transaction history.
3. Development:
The development phase involves the actual coding of the platform:
o Frontend Development: Creating the user interface using React.js, ensuring it is
responsive and provides an optimal user experience across various devices.
o Backend Development: Implementing server-side functionality with Node.js and
Express.js. User authentication is handled with JWT (JSON Web Tokens) for
secure access to the platform.
o Integration: Connecting the frontend to the backend through RESTful APIs,
ensuring smooth data flow between the client and server.
4. Testing:
Comprehensive testing is performed to ensure the system works as expected:
o Unit Testing: Testing individual modules for their functionality.
o Integration Testing: Ensuring the frontend and backend communicate correctly.
o User Acceptance Testing (UAT): Validating the system with real users to ensure it
meets business and user requirements.
o Security Testing: Ensuring secure authentication and payment processes.
5. Deployment:
After successful testing, the system is deployed on a production server, making the platform
live for users. Deployment is done using a cloud hosting service to ensure scalability and
reliability.
6. Post-deployment Support:
After deployment, ongoing support and maintenance are provided to fix bugs, improve
performance, and integrate user feedback.

2.3 Details of Hardware & Software

2.3.1 Hardware Specifications:
• RAM: Minimum of 4 GB (recommended for optimal performance).
• Storage: Minimum of 10 GB of free disk space for storing application files and user data.
• Processor: Intel Core i3 or above (or equivalent) to ensure smooth processing and handling
of user requests and database queries.
2.3.2 Software Specifications:
• Operating System: The platform is cross-platform and can be run on Windows 7 or above,
Linux, or macOS.
• Frontend:
6
 o React.js: A JavaScript library for building dynamic, single-page user interfaces.
o Tailwind CSS: A utility-first CSS framework for rapid design of responsive,
modern websites.
• Backend:
o Node.js: A JavaScript runtime for server-side application development.
o Express.js: A minimal and flexible Node.js web application framework for building
robust backends.
• Database:
o MongoDB: A NoSQL database that stores product, user, and order data in a flexible,
scalable format.
• Authentication:
o JWT (JSON Web Tokens): Used for user authentication, ensuring secure login and
registration.
• Version Control:
o Git: A version control system used to track changes in the codebase.
o GitHub: A platform for hosting the code repository and collaborating with team
members.
o Postman: A Platform which is used for testing of Api.
Representations of library used in attire Aura

Fig 2.3.1

Fig 2.3.2
7
Fig 2.3.3

Fig 2.3.4

Fig 2.3.5

Fig 2.3.6

8
 Fig 2.3.7
Tools Used in Aura Attire

Fig 2.3.8

Fig 2.3.9

Fig 2.3.10

9
2.4 System Maintenance & Evaluation
System Maintenance:
Post-deployment maintenance ensures the smooth functioning of the Aura Attire platform by
performing the following tasks:
• Bug Fixes: Identifying and fixing any issues that arise in the system after deployment.
• Performance Optimization: Continuously monitoring the platform's performance and
optimizing it for better speed and reliability.
• Feature Updates: Adding new features or modifying existing ones based on user feedback
or market trends.
Evaluation:
The system is evaluated based on the following criteria:
• User Satisfaction: Measuring user engagement and feedback to assess how well the system
meets the expectations of the target audience.
• System Performance: Evaluating the system's speed, reliability, and responsiveness.
• Security: Continuously testing the system for security vulnerabilities and ensuring the
protection of user data.
Evaluation is done at multiple stages:
• During development: Regular testing and feedback loops ensure the quality of the system.
• After deployment: Ongoing monitoring and performance evaluation ensure the system
continues to meet user needs and operates smoothly.

10
 CHAPTER 3: SOFTWARE REQUIREMENT SPECIFICATION(SRS)
3.1 Description of Information System (Block Diagram)
Aura Attire is an e-commerce platform designed to provide a streamlined and enjoyable online
shopping experience for clothing enthusiasts. The website enables users to browse, compare,
and purchase apparel from well-known brands such as Zara, H&M, and Puma—all within a
single, convenient interface.
Client (User Interface):
• The client-side, built with React.js and styled with Tailwind CSS, provides an interactive
user interface where customers can browse products, apply filters, view details, add items
to the cart, and proceed to checkout.
• The client also handles user authentication, where login and registration data are securely
sent to the server using JWT tokens.
Backend (Server):
• The backend, developed with Node.js and Express.js, handles all business logic, such as
processing product queries, managing shopping carts, handling authentication, and
processing orders.
• RESTful APIs enable communication between the client and the server, where the client
makes requests, and the server responds with the appropriate data.
• The server is responsible for verifying user JWT tokens during login, ensuring secure access
to personalized features.
Database (MongoDB):
• MongoDB serves as the primary database for storing information, including product data,
user accounts, order histories, and shopping cart details.
• The database is structured to allow efficient retrieval of data, such as products by brand,
category, or price range, and supports the storage of user-specific data like cart items and
purchase history.
Authentication (JWT):
• JWT (JSON Web Token) is used for secure user authentication. After a successful login,
the server generates a token that is sent to the client and stored for the session.
• Each time a user accesses their account or makes a purchase, the JWT token is verified to
confirm the user’s identity and permissions.

11
Block Diagram:
The block diagram below illustrates the key components and data flow in the system, highlighting
input from users, the backend processing, and the system's outputs.

Fig 3.1.1

12
3.2 Use Case Diagram for Aura Attire
In the context of Aura Attire, the use case diagram illustrates how different types of users (like
registered users, guests, and administrators) interact with the system to perform various actions,
such as browsing products, adding items to the cart, checking out, and managing inventory. Each
use case represents a specific action that a user can initiate, highlighting the core functionalities of
the platform.
Actors:
1. Registered User: A user who has created an account and can log in to make purchases.
2. Admin: An administrator who can add, update, or remove products and manage orders.
Key Use Cases:
1. User Login: Allows registered users to securely log in with their credentials (uses JWT
authentication).
2. Browse Brands: Allows all users (both registered and guest) to browse available clothing
brands like Zara, H&M, and Puma.
3. View Products: Enables users to view details of products listed under each brand.
4. Add to Cart: Allows registered users to add selected products to their shopping cart for
later purchase.
5. View Cart: Enables users to review items in their cart before checkout.
6. Checkout: Allows users to initiate the purchase process for items in the cart.
7. Payment: Facilitates the completion of payment for the items being purchased.
8. Admin Add Product: Allows the administrator to add new products to the catalog,
organized by brand.
9. Admin Update/Delete Product: Enables the admin to update product details or remove
products as necessary.

13
Fig 3.2.1

14
3.3 Entity-Relationship (ER) Diagram
An Entity Relationship Diagram (ERD) is a visual representation of the relationships between
entities (data objects) in a database. It helps to design and structure databases by illustrating
how different entities interact with each other, identifying key attributes, and defining types of
relationships. An ERD is essential for understanding the data requirements and organization for
any system.
Key Concepts of ERD
1. Entities: These represent tables in the database. Each entity is a real-world object or concept,
like User, Product, or Order in an e-commerce system. Entities are usually represented as
rectangles.
2. Attributes: Attributes are characteristics or properties of an entity. For example, the User
entity might have attributes like UserID, Name, and Email. Attributes are shown as ovals
linked to their entities.
3. Primary Key: A unique identifier for each record in an entity. It ensures that each instance
is distinct, such as UserID for the User entity. Primary keys are typically underlined.
4. Foreign Key: An attribute in one entity that links to the primary key of another entity. This
establishes relationships between entities, like ProductID in an Order entity linking to the
Product entity.
5. Relationships: Relationships show how entities are related. There are three main types:
• One-to-One (1:1): Each instance of one entity is associated with only one instance of another
entity (e.g., each User has one Profile).
• One-to-Many (An instance of one entity can relate to multiple instances of another (e.g., a
User can place multiple Orders).
• Many-to-Many (M Instances of both entities can relate to multiple instances of each other
(e.g., Products can belong to multiple Categories and vice versa). This often requires a
linking (junction) table.
6. Cardinality and Participation: Defines the number of instances in a relationship and whether
the relationship is mandatory or optional.

15
Fig 3.3.1

16
3.4 Data Flow Diagram (DFD)
A Data Flow Diagram (DFD) is a graphical representation of how data flows within a system,
showing the input and output of data, where the data comes from, where it goes, and how it’s
stored. For your e-commerce clothing website, Aura Attire, a DFD illustrates how users
interact with the system, how data moves between different components, and how it’s processed
at each step. This helps visualize the data flow across user actions, backend processing, and
database interactions.
Data Flow Diagram for Aura Attire
For Aura Attire, the DFD would include these main components:
1. External Entities:
o User: Represents the end-users, which could be registered users, guests, or
administrators. Users interact with the system by browsing products, adding items
to their cart, checking out, and so on.
o Admin: Represents the administrator who manages product listings, updates
inventory, and handles order processing.
2. Processes:
o User Login/Authentication: Validates registered users through JWT tokens and
ensures secure access to user-specific features (like adding to cart and checkout).
o Browse Products and Brands: Allows users to view the available brands and
clothing items, querying the database for product details.
o Add to Cart: Enables users to add selected items to their cart, temporarily storing
this data for later checkout.
o Checkout and Payment: Collects payment information and processes transactions,
including inventory update, payment confirmation, and order generation.
o Manage Products (Admin only): Allows the administrator to add, update, or delete
products in the catalog.
3. Data Stores:
o User Database: Stores user profile data, login information, and purchase history.
o Product Database: Contains information on available brands, clothing items,
prices, and inventory.
o Cart Data: Temporarily stores items added to the cart by each user before checkout.
o Order Database: Stores confirmed orders with details about items purchased, user
details, and payment confirmation.
4. Data Flow:
o User Authentication Data Flow: User credentials are validated, and upon
17
 successful login, a JWT token is generated and sent to the user for session
management.
o Product Viewing Data Flow: When a user browses products, the system queries
the product database and displays available items based on the selected brand.
o Cart Management Data Flow: Items added to the cart are stored in the cart
database, allowing users to review them before checkout.
o Checkout and Order Processing Data Flow: At checkout, user information, cart
details, and payment data are processed. Upon successful payment, the order is
saved in the order database, and the inventory is updated.
o Product Management Data Flow (Admin): The admin interacts with the product
database to update product information, manage stock levels, or delete items as
needed.
Levels of DFD
For your project, you might create multiple levels of DFDs to provide a clearer view of the
system:
1. Level 0 (Context Diagram): A high-level view showing the interaction between the system
and external entities like User and Admin.
2. Level 1 DFD: Breaks down major processes like User Login, Browse Products,
Checkout, and Manage Products into smaller, more detailed steps.

Fig 3.4.1

18
Level 0

Fig 3.4.2

Level 1 ( Admin Side Data Flow Diagram)

Fig 3.4.3

19
Level 1 ( User Side Data Flow Diagram)

Fig 3.4.4

20
 CHAPTER 4 – Coding and Screenshots of the project
4.1 Code Structure and Organization
The code structure and organization in the Aura Attire e-commerce project are designed to
promote readability, maintainability, and modularity. This organization follows best
practices in software development to ensure scalability and ease of collaboration. Key
aspects of the code structure include:
1. Modular Codebase: The project is divided into different modules, each handling a specific
functionality, such as authentication, product management, cart, and checkout. This
modularity allows for easy updates and debugging.
2. Clear Folder Structure:
o Frontend: Contains components for the user interface, such as brand browsing,
product listing, cart, and checkout views. Uses React.js with Tailwind CSS for
styling.
o Backend: Organized around routes, controllers, models, and middlewares, ensuring
separation of concerns. Express.js is used for the server setup, and MongoDB
manages the database.
o Shared Assets: Includes common assets like images, icons, and stylesheets that can
be accessed by both frontend and backend as needed.
3. State Management with Redux:
• Redux Store: Centralized store managing the application state, making it easier to access
and update global data across different components.
• Redux Slices: Each slice manages a particular feature’s state, like authentication, products,
or cart. Slices are organized within a redux or store folder, which improves code readability
and organization.
• Redux Middleware: Thunk is used for handling asynchronous operations (e.g., API calls
for fetching products or processing orders). This ensures that data is fetched and updated
efficiently without disrupting the user experience.

4. API Design: RESTful APIs are used to manage data flow between the frontend and
backend. Routes are organized by functionality (e.g., /auth, /products, /cart, and /orders),
making it easy to understand the API endpoints.
5. Security and Authentication: Implements JWT tokens for secure user sessions. Sensitive
information is managed via environment variables, ensuring data protection.
6. Version Control: Git and GitHub are used for version control, allowing for team
21
 collaboration, easy tracking of changes, and code backup.

Fig 4.1.1

4.2 Key Functional Code Snippets

The Aura Attire e-commerce website offers a streamlined shopping experience for clothing items
across popular brands. Here are the key functionalities that enhance user interaction, simplify
shopping, and enable efficient site management:
Code Snippets: Backend
4.2.1 Database Connectivity

Fig 4.2.1
22
4.2.2 User Model (Schema of User)

Fig 4.2.2
4.2.3 Product Model (Product Schema)

Fig 4.2.3
23
4.2.4 Cart Model (Cart Schema)

Fig 4.2.4
4.2.5 Address model (Address Schema)

Fig 4.2.5
24
4.2.6 Auth Route

Fig 4.2.6
4.2.7 Product Route

Fig 4.2.7
25
4.2.8 Cloudnary Code Snippet

Fig 4.2.8

4.2.9 Paypal Code Snippet

Fig 4.2.9

26
Code Snippets: Frontend
4.2.10 Assets

Fig 4.2.10

4.2.11 App.jsx

Fig 4.2.11

27
4.2.12 Main.jsx

Fig 4.2.12

4.2.13 AdminView

Fig 4.2.13
28
4.2.14 Order.jsx

Fig 4.2.14
4.2.15 Layout.jsx

Fig 4.2.15

29
4.3 User Interface and Workflow Screenshots
4.3.1.1 Admin (Product)

Fig 4.3.1.1
4.3.1.2Admin(Dashboard)

Fig 4.3.1.2

30
4.3.1.3. Admin(Orders)

Fig 4.3.1.3
4.3.1.4 Admin (Product Creation)

Fig 4.3.1.4
31
4.3.2.1 User (Home)

Fig 4.3.2.1
4.3.2.2 User Product

Fig 4.3.2.2

32
4.3.2.3 User Search

Fig 4.3.2.3
4.3.2.4 User Cart

Fig 4.3.2.4

33
4.4 Database Description
MongoDB
MongoDB is a popular NoSQL database designed for high performance, scalability, and
flexibility. It stores data in a format known as BSON (Binary JSON), which allows for a more
flexible, schema-less data model. This makes MongoDB ideal for applications that require rapid
development and can handle diverse types of unstructured or semi-structured data.
Database (Aura Attire)

Fig 4.4.1
Login User Database

Fig 4.4.2
34
Cloudinary Database.

Fig 4.4.3

Cart Items Database

Fig 4.4.4

35
 CHAPTER 5 – CONCLUSION AND FUTURE WORK

5.1 Conclusion
The Aura Attire project successfully delivers a dynamic e-commerce platform tailored for
customers looking to shop across multiple fashion brands like Zara, H&M, and Puma. Below are
the key conclusions drawn from this project:
1. Enhanced User Experience: Aura Attire provides an intuitive and engaging interface,
allowing users to easily browse, search, and filter clothing items by brand, category, size,
and other attributes, making the shopping process seamless.
2. Secure Authentication: By implementing JWT-based authentication, user data is securely
protected, enhancing trust and ensuring that sensitive information is safeguarded
throughout the shopping experience.
3. Efficient State Management: Utilizing Redux for state management allows for smooth
interactions across the site, providing real-time updates to the shopping cart, product
views, and user profile sections, even as the data grows.
4. Scalable Back-End Architecture: The combination of Node.js and MongoDB ensures
that the platform is capable of handling high traffic and large volumes of data, with easy
scalability to support future growth.
5. Robust Product and Order Management: Admins have a dedicated interface for
managing products, brands, and inventory, making it easy to keep the catalog up-to-date
and manage orders efficiently.
6. Enhanced Shopping Cart Functionality: The shopping cart provides a flexible, user-
friendly experience with features like quantity adjustments, total cost calculation, and a
streamlined checkout process.
7. Integration of Advanced APIs: The platform has potential to incorporate advanced APIs
in future iterations, such as an AR virtual try-on and product recommendation engine, to
further personalize and enhance the shopping experience.
8. Future Scalability for New Features: The system architecture and tech stack are flexible
enough to accommodate additional features like discount systems, loyalty programs, and
user analytics without disrupting the existing structure.
9. Optimized Code Organization and Version Control: The use of Git and GitHub for
version control provides an organized codebase that is easy to maintain and allows for
collaborative work and seamless updates.
10. Continuous Improvement and User Feedback: By following the Agile methodology,
this project is set up for continuous improvement, where regular feedback from users.

36
5.2 Future Scope
The Aura Attire e-commerce platform has several exciting opportunities for future
enhancements, with a focus on improving user experience, personalization, and interactive
shopping. Below are ten potential future developments, centered around Augmented Reality
(AR) Virtual Try-On and other advanced features:
1. Augmented Reality (AR) Virtual Try-On: Integrating AR technology to allow
customers to "try on" clothing virtually would give them a better sense of fit, style, and
appearance before purchasing, significantly reducing return rates and enhancing user
engagement.
2. Personalized Recommendations: Leveraging AI and machine learning to provide
personalized product recommendations based on user browsing history, preferences, and
purchase behavior, helping users discover relevant products and enhancing the shopping
experience.
3. Advanced Size Guide with AR Measurements: Using AR to help customers take precise
body measurements could provide more accurate size suggestions, reducing sizing issues
and increasing customer satisfaction.
4. Real-Time Product Availability and Stock Alerts: Implementing a system that notifies
users when a product is back in stock or when limited quantities are available would
improve user engagement and encourage timely purchases.
5. Visual Search: Adding a visual search feature where users can upload images of clothing
items and find similar products on the platform, making it easier to locate specific styles
they’re interested in.
6. Enhanced Virtual Showroom: Creating an interactive virtual showroom where users can
explore collections by brand or category in a virtual space, enhancing brand immersion
and customer experience.
7. Social Media Integration: Allowing users to share their virtual try-on looks on social
media directly from the platform would create brand visibility, encourage user
engagement, and act as free marketing for the platform.
8. In-Depth Analytics for Personalized Insights: Implementing advanced analytics to track
user behavior, preferences, and shopping patterns. These insights can guide personalized
recommendations and targeted marketing efforts, enhancing sales and customer
satisfaction.
9. Loyalty Programs and Rewards: Developing a loyalty program where users earn
rewards based on purchases or engagement, encouraging repeat purchases and building
brand loyalty.
37
10. Live Chat with Fashion Consultants: Integrating a live chat feature where users can
interact with fashion consultants for styling advice and product recommendations. This
feature, combined with AR try-on, would offer a highly personalized shopping experience.

38
5.3 References

[1. Smith, J., & Lee, S. (2020).] Web Application Development with React.js. Packt Publishing.
[2.Tiwari, A., & Singh, R. (2020).] Augmented Reality in E-Commerce: A Review and Research
Directions. International Journal of Scientific & Technology Research, 9(2), 1776-1780.
[3.Mohammad, M. (2021).] Exploring the Role of Augmented Reality in Enhancing the E-
commerce Experience. Journal of Retailing and Consumer Services, 58, 102226.
[4.Kour, S., & Bhagat, R. (2019).] The Impact of Augmented Reality on Consumer Behavior in
Online Retailing. International Journal of Advanced Research in Computer Science, 10(5), 56-62.
[5.Gupta, R., & Sharma, P. (2020).] Web Application Development with React.js. Springer.
[6.Ramachandran, S., & Sivasubramaniam, A. (2018).] E-commerce and the Use of
Technology: A Focus on Front-End Frameworks and Back-End Systems. Business & Economics
Journal, 9(4).
[7.Hancock, T. (2021).] Leveraging Tailwind CSS for Modern Web Design. Smashing
Magazine.
[8.Cheng, C., & Liang, H. (2017).] Enhancing E-commerce Website Performance: The Role of
User Interface and Experience. Journal of Electronic Commerce Research, 18(2), 125-140.
[9.Gomez, V., & Wu, Z. (2021).] The Integration of Machine Learning and AR in E-commerce
Websites. Artificial Intelligence in E-Commerce Journal, 4(1), 98-104.
[10.Mishra, S. (2022).] Exploring the Future of AR in Online Shopping. TechCrunch.
[11.Johnson, B., & Lam, A. (2021).] Implementing Secure Authentication with JWT Tokens in
Modern Web Applications. Journal of Web Security and Authentication, 12(3), 221-229.
[12.Pereira, L., & Fernandes, A. (2020).] AR in Fashion E-Commerce: Revolutionizing the
Virtual Shopping Experience. FashionTech Journal, 2(1), 45-52.
[13.Sharma, S., & Chawla, D. (2020).] Using MongoDB for Scalable and Efficient E-commerce
Databases. International Journal of Computer Applications, 171(7), 20-25.
[14.Singh, P., & Sharma, R. (2021).] Building and Scaling E-Commerce Platforms with Node.js
and MongoDB. Web Application Development (2nd ed.).
[15. Kumar, V., & Patel, M. (2022).] Developing Real-Time E-commerce Applications with
Redux and State Management. Journal of Modern Web Development, 14(2), 305-312.

39