Vision 360 is an Optical Shop Ecommerce Website Made for retailers Major Project MCA Made by Nayan Gupta and Naina Kesharwani Detailed report with Introduction Analysis Planning Design Methodology Implementation Testing Output Limitations Conclusion Also, there are required figures like ER Diagram, DFD, Use Case, Structural Chart, Class Diagram and Website Screenshots

1. 1 | P a g e
Vision360
Project Submitted in Partial fulfillment of the
Requirement for the Award of the Degree of
Master of Computer Applications
Semester IV
Jan - May, 2024
Under the guidance of:
Dr. Ugrasen Suman
Submitted By:
Naina Kesharwani (2211435),
Nayan Gupta (2211346)
School Of Computer Science & It
Devi Ahilya Vishwavidyalaya, Indore, M.P.
2024

2. 2 | P a g e
School of Computer Science & IT
Devi Ahilya Vishwavidyalaya, Indore, M.P.
DECLARATION
I hereby declare that the project titled “Vision360” submitted by Naina Kesharwani, Nayan
Gupta for the partial fulfillment of the requirement for the award of Master of Computer
Applications to School of Computer Science & IT, Devi Ahilya Vishwavidyalaya, Indore,
comprises my own work and due acknowledgement has been made in text to all other material
used.
Signature of the Student:
Name of the Student: Naina Kesharwani, Nayan Gupta
Date:
Place:

3. 3 | P a g e
School of Computer Science & IT
Devi Ahilya Vishwavidyalaya, Indore, M.P.
CERTIFICATE FROM GUIDE
It is to certify that dissertation on “Vision360”, submitted by Naina Kesharwani and Nayan
Gupta to the School of Computer Science & IT, DAVV, Indore has been completed under
my supervision and the work is carried out and presented in a manner required for its
acceptance in partial fulfillment for the award of the degree of Master of Computer
Applications.
Project Guide
Signature:
Name:
Date:

4. 4 | P a g e
School of Computer Science & IT
Devi Ahilya Vishwavidyalaya, Indore, M.P.
CERTIFICATE
It is to certify that we have examined the dissertation on “Vision360”, submitted by Naina
Kesharwani, Nayan Gupta to the School of Computer Science & IT, DAVV, Indore and hereby
accord our approval of it as a study carried out and presented in a manner required for its
acceptance in partial fulfillment for the award of the degree of Master of Computer Applications.
Internal Examiner
Signature:
Name:
Date:
External Examiner
Signature:
Name:
Date:

5. 5 | P a g e
ACKNOWLEDGEMENT
With great pleasure and sense of obligation I express my heartfelt gratitude to my esteemed guide Dr.
Ugrasen Suman, School of Computer Science & IT, DAVV Indore, whose constant encouragement
enabled me to work enthusiastically. My project guide, in spite of his/ her heavy work commitments and
busy schedule, has been there for his/her invaluable guidance and ever ready support. His persistent
encouragement, perpetual motivation, everlasting patience and excellent expertise in discussions, during
progress of the work, have benefited to an extent which is beyond expression. His contributions are beyond
the purview of theacknowledgement.
I sincerely wish to express, my gratefulness to all the members of staff of School of Computer Science
& IT, who have extended their cooperation at all times and have contributed in their own way in
developing the project.
I am thankful to my parents for being a constant source of encouragement in all myendeavors. The
support of my friends is worth appreciation and thankfulness.
Submitted by:
Naina Kesharwani, Nayan Gupta

6. 6 | P a g e
ABSTRACT
Our project aims to develop an intuitive and efficient e-commerce platform tailored for an optical
shop. This website enables customers to browse, select, and purchase eyewear products
conveniently. Features include user-friendly product descriptions, seamless order placement,
secure payment processing. With many backend functionalities, including inventory management
and order fulfillment, the platform ensures a smooth and satisfying shopping experience for users.
Leveraging modern web technologies and responsive design, our solution aims to enhance
accessibility and engagement, ultimately driving sales and customer satisfaction for the optical
shop.

7. 7 | P a g e
Table of Content
Chapter 1 Introduction........................................................................................................ 10
1.1 Introduction................................................................................................................... 11
1.2 Aim................................................................................................................................ 12
1.3 Objective....................................................................................................................... 12
Chapter 2 Requirement Analysis ....................................................................................... 13
2.1 Requirement Analysis................................................................................................... 14
2.1.1 Customer Requirements ......................................................................................... 14
2.1.2 Admin Requirements.............................................................................................. 15
2.2 Scope............................................................................................................................. 15
2.3 Functional and Non-Functional Requirements............................................................. 16
2.3.1 Functional Requirements........................................................................................ 16
2.3.2 Non-functional Requirements ................................................................................ 16
2.4 Use Case Diagram......................................................................................................... 17
2.5 Data Flow Diagram....................................................................................................... 18
2.6 E-R Diagram ................................................................................................................. 25
Chapter 3 Project Planning................................................................................................. 26
3.1 Identification of Essential Requirements...................................................................... 27
3.2 Hardware and Software Requirements ......................................................................... 27
Chapter 4 System Design..................................................................................................... 30
4.1 Structural Chart............................................................................................................. 31
4.1.1 User Structural Chart.............................................................................................. 31
4.1.2 Admin Structural Chart .......................................................................................... 32
4.2 Class Diagram............................................................................................................... 33
Chapter 5 Software Development Methodology............................................................... 34

8. 8 | P a g e
5.1 Agile Methodology....................................................................................................... 35
5.1.1 Benefits of Agile..................................................................................................... 35
5.1.2 Implementation Approach...................................................................................... 36
5.1.3 Result and Lesson Learned..................................................................................... 36
Chapter 6 System Implementation..................................................................................... 37
6.1 Technologies and Tools................................................................................................ 38
6.1.1 Frontend.................................................................................................................. 38
6.1.2 Backend .................................................................................................................. 38
6.1.3 Authentication/Authorization................................................................................. 39
6.1.4 Version Control ...................................................................................................... 39
6.1.5 Development Tool (IDE)........................................................................................ 40
6.1.6 Payment Integration................................................................................................ 40
Chapter 7 Testing................................................................................................................. 41
Chapter 8 Output Forms..................................................................................................... 43
8.1 Admin Dashboard ......................................................................................................... 44
8.2 User Frontend................................................................................................................ 49
Chapter 9 Limitations.......................................................................................................... 55
9.1 Limitations .................................................................................................................... 56
Chapter 10 Conclusion ........................................................................................................ 57
10.1 Application.................................................................................................................. 58
10.2 Future Scope ............................................................................................................... 58
10.3 Conclusion .................................................................................................................. 59

9. 9 | P a g e
List of Figures
Figure 1: Use Case Diagram............................................................................................................................................17
Figure 2: Level-0 DFD ....................................................................................................................................................18
Figure 3: Level-1 DFD (User Side).................................................................................................................................19
Figure 4: Level-1 DFD (Admin Side) .............................................................................................................................19
Figure 5: Level-2 DFD User Side (View Items) .............................................................................................................20
Figure 6: Level-2 DFD User Side (Add to Cart) .............................................................................................................20
Figure 7: Level-2 DFD User Side (Purchase)..................................................................................................................21
Figure 8: Level-2 DFD User Side (Make Payment)........................................................................................................21
Figure 9: Level-2 DFD Admin Side (Login)...................................................................................................................22
Figure 10: Level-2 DFD Admin Side (Manage Category)..............................................................................................22
Figure 11: Level-2 DFD Admin Side (Manage Order) ...................................................................................................23
Figure 12: Level-2 DFD Admin Side (Manage Payments).............................................................................................23
Figure 13: Level-2 DFD Admin Side (Manage User Information).................................................................................24
Figure 14: E-R Diagram ..................................................................................................................................................25
Figure 15: Structural Chart (User)...................................................................................................................................31
Figure 16: Structural Chart (Admin) ...............................................................................................................................32
Figure 17: Class Diagram................................................................................................................................................33
Figure 18: Admin Starting Page ......................................................................................................................................44
Figure 19: Admin Dashboard Page..................................................................................................................................44
Figure 20: Admin Product Page ......................................................................................................................................45
Figure 21: Admin New Product Page..............................................................................................................................46
Figure 22: Admin Edit Product Page...............................................................................................................................46
Figure 23: Admin Category Page ....................................................................................................................................47
Figure 24: Admin Edit Category Page.............................................................................................................................47
Figure 25: Admin Order Details Page .............................................................................................................................48
Figure 26: User Home Page.............................................................................................................................................49
Figure 27: User Shop Page ..............................................................................................................................................50
Figure 28: User Single Product Page...............................................................................................................................51
Figure 29: User Contact Us Page.....................................................................................................................................52
Figure 30: User Cart Page ...............................................................................................................................................53
Figure 31: User Stripe Payment page..............................................................................................................................54
Figure 32: User Thank you Page .....................................................................................................................................54

10. 10 | P a g e
Chapter 1
Introduction

11. 11 | P a g e
1.1 Introduction
In an increasingly digital world, e-commerce platforms have become essential for businesses to
reach customers and facilitate sales. Our project focuses on developing a comprehensive e-
commerce website created specifically for an optical shop. This platform aims to revolutionize
the way customers interact with the shop's products by providing a seamless online shopping
experience.
With the rapid growth of online shopping, the optical industry has seen a growing demand for
accessible and convenient purchasing options. Our project seeks to address this need by creating
a user-friendly website where customers can browse, select, and purchase eyewear products from
the comfort of their own homes.
Our website will offer a wide range of eyewear products, including glasses, sunglasses, contact
lenses, etc. catering to diverse customer preferences and needs. Through a carefully designed user
interface and customers will be able to explore the shop's large product catalog with ease.
Overall, our project aims to deliver a cutting-edge e-commerce solution that meets the unique
needs and preferences of customers in the optical industry. Through intuitive design, advanced
features, and robust backend functionality, the platform will enhance the shop's online presence,
attract new customers, and drive sales growth in the competitive eyewear market.

12. 12 | P a g e
1.2 Aim
The aim of our project is to develop an intuitive and efficient e-commerce platform specifically tailored to
meet the needs of an optical shop. Our goal is to create a user-friendly website that empowers customers
to effortlessly browse, select, and purchase eyewear products. By incorporating features such as clear and
detailed product descriptions, seamless order placement, and secure payment processing, our aim is to
provide a convenient and trustworthy shopping experience for users.
Furthermore, our aim extends to the backend functionalities of the platform, including robust inventory
management and efficient order fulfillment processes. By implementing these backend capabilities, we
strive to ensure a smooth and satisfying shopping journey for customers while optimizing operational
efficiency for the optical shop.
Additionally, leveraging modern web technologies and responsive design principles, our solution aims to
enhance accessibility across various devices and foster increased user engagement. Ultimately, our
overarching aim is to drive sales growth and foster long-term customer satisfaction for the optical shop
through the development of a comprehensive and user-centric e-commerce platform.
1.3 Objective
Objective:
 Develop an Intuitive E-commerce Platform: Create a user-friendly interface that enables easy
navigation and product discovery for customers visiting the optical shop's website.
 Enable Seamless Product Selection and Purchase: Implement features that allow customers to browse
through eyewear products, access clear and detailed descriptions, and effortlessly place orders with
secure payment processing.
 Enhance Backend Functionalities: Develop robust backend functionalities including inventory
management and order fulfillment systems to optimize operational efficiency for the optical shop.
 Ensure Trust and Security: Implement security measures to safeguard customer data and ensure secure
payment processing, fostering trust and confidence among users.
 Leverage Modern Web Technologies: Utilize modern web technologies and responsive design
principles to ensure the platform's accessibility across various devices, enhancing the overall user
experience.
 Drive Sales Growth and Customer Satisfaction: By providing a seamless and satisfying shopping
experience, aim to drive sales growth and foster long-term customer satisfaction for the optical shop.

13. 13 | P a g e
Chapter 2
Requirement Analysis

14. 14 | P a g e
2.1 Requirement Analysis
2.1.1 Customer Requirements
1. User-Friendly Interface:
 Intuitive navigation for easy browsing of products.
 Simple and streamlined checkout process.
2. Comprehensive Product Catalog:
 Wide range of eyeglass frames, sunglasses, prescription lenses, and contact lenses.
 Detailed product descriptions.
 High-quality product images.
3. Product Customization:
 Option to enter prescription details for customized lenses.
4. Convenient Shopping Experience:
 Multiple payment options including credit/debit cards, PayPal, and other secure
methods.
 Fast and reliable shipping with tracking information provided via email.
5. Trust and Security:
 Secure checkout process with Stripe payment gateway.
 Assurance of product authenticity and quality.
 Transparent pricing with no hidden fees.

15. 15 | P a g e
2.1.2 Admin Requirements
1. Product Management:
 Ability to add, edit, and delete products with ease.
 Ability to add, edit, and delete products category with ease.
 Support for different product variants such as size, color, and prescription options.
2. Order Management:
 View orders, including order history.
3. Website Maintenance and Security:
 Regular updates and maintenance to ensure website functionality and performance.
 Implement security measures to protect customer data and prevent cyber threats.
 Backup and recovery procedures to safeguard against data loss.
4. Login:
 Only an Admin will be able to login on the admin dashboard.
 Login is done using google login integration.
2.2 Scope
The scope of this project involves developing an intuitive and efficient e-commerce platform for an optical
shop, enabling customers to browse, select, and purchase eyewear products conveniently. This entails
designing and implementing a user-friendly website with features like a comprehensive product catalog,
secure payment processing, and responsive design for seamless accessibility across devices. Additionally,
robust backend functionalities will be developed for inventory management, order processing, and
customer management. The project also encompasses ensuring security and compliance, integrating
payment gateways, optimizing user experience, and providing training and support for staff. The ultimate
goal is to drive sales growth, enhance customer satisfaction, and establish a competitive online presence
for the optical shop.

16. 16 | P a g e
2.3 Functional and Non-Functional Requirements
2.3.1 Functional Requirements
5. Admin Authentication: Admin should be able to log in, and log out securely.
6. Product Browsing: Users should be able to browse through different categories, and view product
details.
7. Shopping Cart: Users should be able to add items to their cart, view their cart, edit quantities, and
remove items.
8. Checkout Process: Users should be able to proceed through a secure checkout process, enter
shipping and billing information, and select a payment method.
9. Payment Gateway Integration: The website should integrate with payment gateways to process
transactions securely.
10. Product Management: Administrators should be able to add, edit, and delete products, and set
pricing.
11. Product Category Management: Administrators should be able to add, edit, and delete products
category and other product properties.
12. Order Management: Administrators should be able to check Orders made withing the dashboard.
13. User Customization: User can customize their glass as per their prescription or eye power.
2.3.2 Non-functional Requirements
1. Performance: The website should load quickly and be responsive, even during peak traffic times.
2. Security: The website should adhere to industry-standard security practices to protect user data
and prevent unauthorized access.
3. Reliability: The website should be available and functional 24/7, with minimal downtime for
maintenance or updates.
4. Usability: The website should have a user-friendly interface, with intuitive navigation and clear
calls to action.
5. Compatibility: The website should be compatible with a range of devices and browsers to ensure
a consistent experience for all users.
6. Maintenance: The website should have ongoing maintenance to address bugs, security
vulnerabilities, and user feedback.

17. 17 | P a g e
2.4 Use Case Diagram
A Use Case Diagram is a graphical depiction of a user's possible interactions with a system. A use case
diagram shows various use cases and different types of users the system has and will often be accompanied
by other types of diagrams as well. The use cases are represented by either circles or ellipses.
Figure 1: Use Case Diagram

18. 18 | P a g e
2.5 Data Flow Diagram
A data flow diagram (DFD) is a graphical tool used to describe and analyze the movement of data
through a system. It visually represents how data enters, moves within, and exits the system,
providing a clear view of the flow and transformation of data. DFDs can be classified as logical
or physical. Logical DFDs illustrate data flows based on functional requirements, focusing on
how data is transformed without specifying implementation details. Physical DFDs, on the other
hand, show actual data movement between people, departments, and workstations, providing
insight into the system's physical architecture. DFDs are developed in multiple levels, starting
with the top-level context diagram, which provides an overview of the system's data flow, and
progressing to lower-level diagrams that offer more granular detail. By using DFDs, designers
and analysts can identify inefficiencies and ensure the system's data processing aligns with project
goals and user requirements.
Level - 0 DFD
Figure 2: Level-0 DFD

19. 19 | P a g e
Level – 1 DFD (User Side)
Figure 3: Level-1 DFD (User Side)
Level – 1 DFD (Admin Side)
Figure 4: Level-1 DFD (Admin Side)

20. 20 | P a g e
Level – 2 DFD (User Side)
Figure 5: Level-2 DFD User Side (View Items)
Figure 6: Level-2 DFD User Side (Add to Cart)

21. 21 | P a g e
Figure 7: Level-2 DFD User Side (Purchase)
Figure 8: Level-2 DFD User Side (Make Payment)

22. 22 | P a g e
Level – 2 DFD (Admin Side)
Figure 9: Level-2 DFD Admin Side (Login)
Figure 10: Level-2 DFD Admin Side (Manage Category)

23. 23 | P a g e
Figure 11: Level-2 DFD Admin Side (Manage Order)
Figure 12: Level-2 DFD Admin Side (Manage Payments)

24. 24 | P a g e
Figure 13: Level-2 DFD Admin Side (Manage User Information)

25. 25 | P a g e
2.6 E-R Diagram
ER diagram provides a visual representation of the data model the optical shop website, it shows
how information is organized and structured within the system. It serves as a crucial reference for
database design, development, and maintenance, ensuring data integrity and efficient operations
throughout the lifecycle of the project.
Figure 14: E-R Diagram

26. 26 | P a g e
Chapter 3
Project Planning

27. 27 | P a g e
3.1 Identification of Essential Requirements
The essential requirements for developing an e-commerce platform tailored for an optical shop
encompass several key aspects. These include the creation of a comprehensive product catalog
showcasing a diverse range of eyewear products, coupled with intuitive navigation features to
facilitate easy product discovery. Essential functionalities such as user registration and
authentication mechanisms ensure secure access to personalized account features, while a
seamless shopping cart and checkout process streamline the purchasing journey for customers.
Responsive design ensures optimal viewing experiences across various devices, while robust
backend systems for order management, inventory control, and secure payment processing uphold
operational efficiency and customer trust. Compliance with security standards and data protection
regulations ensures the safeguarding of sensitive information. Moreover, customer support
channels and analytics capabilities enable effective communication and continuous improvement,
ultimately fostering sales growth and enhancing customer satisfaction for the optical shop's online
presence.
3.2 Hardware and Software Requirements
3.2.1 User Level
Hardware Requirements:
1. Device: Users can access “Vision360” from various devices such as desktop computers,
laptops, smartphones, and tablets.
2. Internet Connection: Users need an internet connection to access “Vision360”. While a
broadband or high-speed internet connection is preferable for faster loading times, users
can still access ecommerce websites with slower connections.
Software Requirements:
1. Web Browser: Users need a web browser to access “Vision360”. Most modern web
browsers are compatible with ecommerce platforms. Commonly used web browsers
include Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and Opera. It's
recommended for users to keep their web browsers updated to ensure compatibility with
the latest web technologies and security patches.

28. 28 | P a g e
2. Operating System: Ecommerce websites are typically platform-agnostic and can be
accessed from various operating systems such as Windows, macOS, Linux, Android, and
iOS. Users should ensure that their operating system is up to date to ensure compatibility
with web standards and security protocols.
3.2.2 Developer Level
Hardware Requirements:
1. Computer: A reliable computer is essential for web development tasks. While the specific
hardware specifications can vary based on personal preferences and budget, developers
typically use desktop computers or laptops with sufficient processing power, RAM, and
storage capacity to run development tools and IDEs smoothly.
2. Internet Connection: Users need an internet connection to access “Vision360”. While a
broadband or high-speed internet connection is preferable for faster loading times, users
can still access ecommerce websites with slower connections.
Software Requirements:
1. Integrated Development Environment (IDE) or Text Editor: Developers use IDEs or text
editors to write, edit, and manage code efficiently. Popular choices include Visual Studio
Code, Sublime Text, Atom, JetBrains IntelliJ IDEA, and Eclipse. These tools offer
features like syntax highlighting, code completion, version control integration, and
debugging capabilities.
2. Version Control System (VCS): Version control is essential for tracking changes to code,
collaborating with team members, and managing project history. Git is the most widely
used version control system, and platforms like GitHub, GitLab, and Bitbucket provide
hosting services for Git repositories.
3. Web Browser: Developers need web browsers for testing and debugging web applications.
Chrome Developer Tools, Firefox Developer Tools, and Safari Web Inspector offer built-
in tools for inspecting and debugging HTML, CSS, and JavaScript code, monitoring
network activity, and optimizing website performance.
4. Package Managers: Package managers simplify dependency management and package
installation for web development projects. Popular package managers include npm (Node
Package Manager) for Node.js-based projects and yarn as an alternative to npm.

29. 29 | P a g e
5. Command-Line Interface (CLI) Tools: CLI tools provide developers with a command-line
interface for performing various tasks such as project scaffolding, code linting, testing,
bundling, and deployment.
6. Frontend Frameworks and Libraries: Depending on project requirements, developers may
use frontend frameworks and libraries like React to build interactive user interfaces,
manage state, and handle client-side routing.
7. Backend Frameworks and Languages: For server-side development, developers choose
from a variety of backend frameworks and programming languages such as Node.js (with
Express.js), Python (with Django or Flask), Ruby on Rails, PHP (with Laravel or
Symfony), and Java (with Spring Boot). These frameworks provide tools and abstractions
for building server-side logic, handling HTTP requests, interacting with databases, and
implementing security features.
8. Database Management Systems (DBMS): Developers interact with DBMSs like MySQL,
PostgreSQL, MongoDB, SQLite, or Microsoft SQL Server to store and manage
application data. They use SQL (Structured Query Language) or NoSQL queries to
perform database operations such as CRUD (Create, Read, Update, Delete) operations,
data retrieval, and schema manipulation.
9. APIs and Third-Party Services: Developers may integrate with external APIs and third-
party services for additional functionality such as payment processing, shipping,
authentication, analytics, and social media integration.

30. 30 | P a g e
Chapter 4
System Design

31. 31 | P a g e
4.1 Structural Chart
Structure Chart represents the hierarchical structure of modules. It breaks down the entire system into the
lowest functional modules and describes the functions and sub-functions of each module of a system in
greater detail. This article focuses on discussing Structure Charts in detail.
4.1.1 User Structural Chart
Figure 15: Structural Chart (User)

32. 32 | P a g e
4.1.2 Admin Structural Chart
Figure 16: Structural Chart (Admin)

33. 33 | P a g e
4.2 Class Diagram
A class diagram is a visual representation of class objects in a model system, categorized by class types.
Each class type is represented as a rectangle with three compartments for the class name, attributes, and
operations.
Figure 17: Class Diagram

34. 34 | P a g e
Chapter 5
Software Development
Methodology

35. 35 | P a g e
5.1 Agile Methodology
Agile methodology is an iterative approach to software development that prioritizes adaptability,
collaboration, and customer satisfaction. Unlike traditional waterfall methodologies, which follow a linear
and sequential process, Agile embraces change and focuses on delivering value to customers early and
continuously throughout the project lifecycle.
5.1.1 Benefits of Agile
1. Flexibility and Adaptability: Agile allows the project team to adapt to changing requirements,
market trends, and customer preferences quickly. This flexibility ensures that the e-commerce
platform remains aligned with the evolving needs of the optical shop and its customers throughout
the development process.
2. Customer-Centric Approach: Agile methodology prioritizes customer satisfaction and
collaboration, enabling the project team to continuously gather feedback from stakeholders,
including the optical shop's management team and potential customers. This feedback-driven
development approach ensures that the e-commerce platform meets customer expectations and
addresses their needs effectively.
3. Incremental Value Delivery: Agile facilitates the delivery of working software increments at
regular intervals, typically at the end of each sprint. This incremental delivery approach allows the
optical shop to realize tangible benefits from the e-commerce platform early in the development
process, rather than waiting for a lengthy development cycle to be completed.
4. Faster Time-to-Market: By breaking down the development work into smaller, manageable tasks
and focusing on delivering value in short iterations, Agile methodology facilitates faster time-to-
market for the e-commerce platform. This is particularly beneficial in the competitive e-commerce
industry, where being first to market with innovative features can provide a significant advantage.
5. Continuous Improvement: Agile fosters a culture of continuous improvement, where the project
team reflects on their processes, identifies areas for enhancement, and iterates on their practices in
each sprint. This iterative approach enables the team to refine and optimize the development
approach over time, leading to higher efficiency, productivity, and quality in delivering the e-
commerce platform.

36. 36 | P a g e
5.1.2 Implementation Approach
 Product Backlog Creation: Create a prioritized product backlog, which is a list of all desired features,
enhancements, and fixes for the e-commerce platform. The product backlog should be continuously
refined and reprioritized based on feedback from stakeholders and changing business needs.
 Continuous Integration and Testing: Practice continuous integration, where code changes are
integrated frequently into a shared repository, allowing for early detection of integration issues.
Implement automated testing and deployment pipelines to streamline the process of delivering updates
to the production environment.
 Iterative Development: Repeat the sprint cycle iteratively, with each sprint delivering incremental
value to the e-commerce platform. The product backlog is continuously updated based on feedback
and changing requirements, allowing the project to evolve and adapt over time.
5.1.3 Result and Lesson Learned
 Faster Time-to-Market: Agile methodology facilitated faster delivery of the e-commerce platform,
allowing the optical shop to launch sooner and start generating revenue earlier than anticipated.
 Improved Customer Satisfaction: By prioritizing customer collaboration and feedback, the Agile
approach ensured that the e-commerce platform met the needs and expectations of the optical shop's
customers, resulting in higher satisfaction and engagement.
 Increased Flexibility and Adaptability: Agile allowed the project team to respond quickly to
changing requirements and market conditions, enabling the e-commerce platform to evolve iteratively
and stay competitive in the dynamic e-commerce landscape.
 Continuous Improvement: Through regular sprint retrospectives, the team identified areas for
improvement in their processes, tools, and practices, enabling them to continuously learn and adapt to
optimize performance and productivity.
 Scalability and Future Readiness: The Agile approach ensured that the e-commerce platform was
designed with scalability and future expansion in mind, allowing the optical shop to easily add new
features, products, and functionalities as the business grows.

37. 37 | P a g e
Chapter 6
System Implementation

38. 38 | P a g e
6.1 Technologies and Tools
6.1.1 Frontend
For an “Vision360”, the frontend technology stack plays a crucial role in creating an intuitive and visually
appealing user interface that allows customers to browse products, make purchases, and manage their
shopping experience. Here's a brief introduction to the frontend technology stack for such a project:
1. React.js: It is a popular frontend JavaScript framework for building dynamic and interactive user
interfaces. They provide robust component-based architectures, making it easier to manage
complex UI elements and state changes.
2. Next.js: Next.js is a React framework that offers server-side rendering, static site generation, and
routing capabilities out of the box. It provides performance benefits by optimizing page loading
speed. With Next.js, we can build a fast and scalable ecommerce website while maintaining a great
developer experience.
3. Tailwind CSS: Tailwind CSS is a utility-first CSS framework that allows for rapid UI
development by providing a set of predefined utility classes. It promotes a highly customizable
and responsive design approach without the need for writing custom CSS. Tailwind's utility classes
enable us to create consistent and visually appealing layouts across the website.
4. Styled Components: Styled Components is a library for styling React components using tagged
template literals. It allows us to write CSS directly within our JavaScript code, making styling
more modular and maintainable. With Styled Components, we can encapsulate component-
specific styles, enabling better code organization and reusability.
6.1.2 Backend
1. React.js: It is a popular frontend JavaScript framework for building dynamic and interactive user
interfaces. They provide robust component-based architectures, making it easier to manage
complex UI elements and state changes.
2. Next.js: Next.js is a React framework that offers server-side rendering, static site generation, and
routing capabilities out of the box. It provides performance benefits by optimizing page loading
speed. With Next.js, we can build a fast and scalable ecommerce website while maintaining a great
developer experience.
3. MongoDB: MongoDB is a NoSQL database that offers flexibility and scalability for storing and
managing structured and unstructured data. It's well-suited for ecommerce applications due to its
ability to handle large volumes of product information, user profiles, and transactional data
efficiently.

39. 39 | P a g e
4. AWS S3, or Amazon Simple Storage Service, is a cloud storage service provided by Amazon
Web Services. It's widely used for storing and retrieving any amount of data from anywhere on
the web. S3 offers scalability, durability, and security, making it a popular choice for hosting static
assets such as images, videos, and files for web applications like the Optical Shop ecommerce
website.
6.1.3 Authentication/Authorization
Google Authentication:
 Users can log in to an application using their Google account credentials, eliminating the need to create
a separate account for the application.
 Upon login, users are redirected to Google's authentication server, where they enter their username
and password. Google then verifies their credentials and issues an authentication token.
 The application receives the authentication token, which it can use to identify the user and grant access
to protected resources.
Google Authorization:
 Once authenticated, the application may need to determine what actions the user is authorized to
perform. Authorization involves determining the user's permissions and access rights within the
application.
 Google's authorization services allow developers to define and manage access control policies using
Google's Identity and Access Management (IAM) tools.
 Developers can specify granular permissions for users or groups, controlling access to specific features
or resources within the application.
6.1.4 Version Control
GitHub serves as a collaborative platform for developers to store, manage, and share code repositories. It
offers a user-friendly interface for version control tasks, allowing developers to track changes, manage
branches, and collaborate with teammates seamlessly. Additionally, GitHub provides features such as issue
tracking, pull requests, and code review tools, enabling efficient project management and code
collaboration. With its robust ecosystem of integrations and community-driven approach, GitHub has
become a cornerstone of modern software development, fostering collaboration, transparency, and
innovation within the developer community.

40. 40 | P a g e
6.1.5 Development Tool (IDE)
Visual Studio Code (VS Code) is a lightweight yet powerful source code editor developed by Microsoft.
It's known for its speed, versatility, and extensive ecosystem of extensions. With built-in support for
numerous programming languages, a rich set of features including debugging tools and version control
integration, and cross-platform compatibility, VS Code has become a popular choice for developers across
various domains. Whether you're working on web development, cloud-native applications, or anything in
between, VS Code offers a seamless and productive coding experience.
6.1.6 Payment Integration
Stripe is a payment processing platform that provides APIs for securely accepting online payments and
managing transactions. By integrating the Stripe API into the backend, the Optical Shop ecommerce
website can facilitate seamless and secure payment processing for customers, supporting various payment
methods such as credit cards and digital wallets.

41. 41 | P a g e
Chapter 7
Testing

42. 42 | P a g e
Testing performed on various parts of the project, some of them are:
1. User Interface Testing:
 Check the layout and design consistency across different browsers and devices.
 Verify that all buttons, links, and forms are functional and lead to the correct pages.
2. Functionality Testing:
 Test the functionality of the search feature to ensure accurate results are returned.
 Verify that users can add items to their cart, update quantities, and proceed to checkout without errors.
 Ensure that user authentication, including login, registration, and password recovery, works smoothly.
3. Payment Gateway Testing:
 Test the payment process with different payment methods (credit card, PayPal, etc.) to ensure
transactions are secure and successful.
 Verify that users receive appropriate confirmation messages after completing a purchase.
4. Product Management Testing:
 Test the addition, editing, and deletion of products to ensure the inventory is managed accurately.
 Verify that product details, such as descriptions, images, and prices, are displayed correctly.
5. Performance Testing:
 Test the website's response time and loading speed under different traffic conditions.
 Verify that the website can handle peak loads without crashing or slowing down significantly.
6. Cross-Browser Testing:
 Cross-browser testing ensures that the e-commerce platform functions consistently across different
web browsers such as Chrome, Firefox, Safari, and Edge. It involves testing the platform's
compatibility, layout, and functionality on various browsers to identify and address any browser-
specific issues.
7. Regression Testing:
 Regression testing verifies that recent code changes or updates to the e-commerce platform have not
adversely affected existing features or functionalities. It involves retesting previously tested scenarios
to ensure that new changes do not introduce any unintended side effects or regressions.

43. 43 | P a g e
Chapter 8
Output Forms

44. 44 | P a g e
8.1 Admin Dashboard
Starting Page:
Figure 18: Admin Starting Page
Dashboard Page (Home):
Figure 19: Admin Dashboard Page

45. 45 | P a g e
Product Page:
Figure 20: Admin Product Page

46. 46 | P a g e
New Product Page:
Figure 21: Admin New Product Page
Edit Product Page
Figure 22: Admin Edit Product Page

47. 47 | P a g e
Categories Page:
Figure 23: Admin Category Page
Edit Categories:
Figure 24: Admin Edit Category Page

48. 48 | P a g e
Order Page:
Figure 25: Admin Order Details Page

49. 49 | P a g e
8.2 User Frontend
Home Page:
Figure 26: User Home Page

50. 50 | P a g e
Shop Page:
Figure 27: User Shop Page

51. 51 | P a g e
Single Product Page:
Figure 28: User Single Product Page

52. 52 | P a g e
Contact Us Page:
Figure 29: User Contact Us Page

53. 53 | P a g e
Cart Page:
Figure 30: User Cart Page

54. 54 | P a g e
Stripe Payment Page:
Figure 31: User Stripe Payment page
Thank You Page:
Figure 32: User Thank you Page

55. 55 | P a g e
Chapter 9
Limitations

56. 56 | P a g e
9.1 Limitations
While the development of an e-commerce platform for an optical shop offers numerous benefits,
it's essential to recognize and address potential limitations. Some of the key limitations for this
project may include:
1. Technical Constraints: Limited resources, including budget, time, and technology
expertise, may constrain the scope and complexity of the e-commerce platform. This could
result in compromises on certain features or functionalities.
2. Integration Challenges: Integrating with existing systems or third-party services, such as
inventory management software or payment gateways, may pose challenges due to
compatibility issues or API limitations.
3. Security Risks: Despite implementing security measures, the e-commerce platform may
still be vulnerable to cyber threats such as data breaches, hacking attempts, or payment
fraud. Constant vigilance and regular security audits are necessary to mitigate these risks.
4. User Adoption and Experience: Ensuring a positive user experience and driving user
adoption of the e-commerce platform may be challenging, particularly if customers are
accustomed to traditional shopping methods or if the platform lacks intuitive design and
functionality.
5. Market Competition: The optical shop's e-commerce platform will operate in a highly
competitive market with established online retailers and competitors. Gaining visibility,
attracting customers, and differentiating the platform from competitors may require
strategic marketing efforts and ongoing innovation.
6. Customer Service Limitations: While the e-commerce platform may offer various
customer support channels, such as email, phone, and live chat, providing timely and
effective customer service to a growing customer base may become increasingly
challenging, especially during peak periods or unforeseen circumstances.
7. Lack of Physical Experience: Customers may miss the in-person experience of trying on
frames and receiving personalized assistance from opticians.
8. Eye Health Concerns: Without a professional eye examination, customers may overlook
potential eye health issues that could be detected during an in-person visit
to an optometrist.

57. 57 | P a g e
Chapter 10
Conclusion

58. 58 | P a g e
10.1 Application
Applications:
1. Enhanced Customer Experience: The optical shop website provides customers with
a convenient platform to browse, select, and purchase eyewear products online,
enhancing their shopping experience.
2. Increased Reach and Accessibility: By establishing an online presence, the optical
shop can reach a broader audience beyond its physical location, attracting new
customers and expanding its market reach.
3. Efficient Order Management: The website streamlines the order management
process, allowing administrators to efficiently process orders, manage inventory, and
leading to improved operational efficiency.
4. Scalability and Growth: The scalable architecture of the website allows for future
expansion and growth, accommodating increasing numbers of users, products, and
transactions as the business evolves.
10.2 Future Scope
Moving forward, continued optimization and refinement of the platform will be essential to
maintaining competitiveness in the market and meeting the evolving needs of customers. By
leveraging insights gained from data analytics and feedback from users, the optical shop can
further enhance the website's performance, expand its product offerings, and continue to deliver
exceptional value to its customers.
More User-friendly Interface
Virtual Try On
Product Search feature
3rd
Party Integration of Order Shipping
Feedback chatbot Integration
Admin side report generations
Automated Invoice Mail System
Product Filtration

59. 59 | P a g e
10.3 Conclusion
In conclusion, the development of “Vision360” with an admin dashboard and user frontend,
utilizing technologies such as React, Next.js, MongoDB, and Stripe, represents a significant
step towards modernizing the eyewear retail experience. This robust technological stack offers
a seamless and feature-rich platform for both administrators and users alike.
With React and Next.js, the frontend of the website achieves high performance, responsiveness,
and scalability, providing users with a smooth browsing and shopping experience. The use of
MongoDB as the backend database ensures efficient storage and retrieval of product data, user
information, and order details, enabling seamless interactions between the frontend and
backend.
The integration of Stripe as the payment gateway enhances the website's functionality by
providing secure and reliable payment processing for customers, supporting various payment
methods and ensuring a seamless checkout process.
The inclusion of an admin dashboard allows administrators to efficiently manage product,
manage categories, track orders, empowering them to make informed business decisions and
optimize the ecommerce platform's performance.
Overall, the “Vision360” developed using React, Next.js, MongoDB, and Stripe represents a
modern and efficient solution for eyewear retail, offering an intuitive user experience, robust
backend infrastructure, and comprehensive administrative capabilities. By leveraging these
technologies effectively, the website is well-positioned to meet the needs of both administrators
and users, driving business growth and customer satisfaction in the competitive online eyewear
market.