SYNOPSIS REPORT

AR-Based Furniture Shopping

Website

Submitted by:

NAME: - MUKUND NAIR ROLL NO: 13

NAME: - AYUSH MULE ROLL NO: 11

NAME: - KRISHNA VISHWAKARMA ROLL NO: 20

NAME: -DHARMIN VADHER ROLL NO: 03

DEPARTMENT OF COMPUTER TECHNOLOGY

KALA VIDYA MANDIR INSTITUTE OF TECHNOLOGY

(POLYTECHNIC)
2024-2025

1
 KALA VIDYA MANDIR INSTITUTE OF
TECHNOLOGY (POLYTECHNIC)
2024-2025

CERTIFICATE OF PROJECT CONFIRMATION

This is to certify that the Project AR-Based Furniture Shopping Website" has been
assigned to group [GROUP I] as a part of fulfillment of the Diploma in
COMPUTER TECHNOLOGY on the [DATE DAY] day of [DATE MONTH] [DATE
YEAR].

The project group [GROUP ID] consists of the following members:

1. MUKUND NAIR Roll No. 13

2. AYUSH MULE Roll No. 11

3. KRISHNA VISHWAKARMA Roll No. 20

4. DHARMIN VADHER Roll No. 03

The group is required to complete the project within the academic schedule under the
guidance of:

Project Guide
CM Dept

H.O.D Project Coordinator

CM Dept
CM Dept

2
 INDEX

Chapter Title Page

1 Abstract 1

2 Problem Definition 2

Requirement (Hardware & Software)

3 3-4
Analysis Phase

4 Block Diagram (DFD Level 0) 8

5 Working 9 -11

6 Advantages 12

7 Project Planning 13-15

3
 Chapter 1: Abstract

The project is a responsive web-based Augmented Reality (AR)

Furniture Shopping Application. It leverages modern web
technologies, Firebase for backend operations, and AR
integration to enhance the user shopping experience. The
platform allows users to browse furniture products, view
detailed product descriptions, and visualize them in their own
space using AR technology.
The application comprises several key components:
1. A React-based front end for a seamless and interactive user
interface.
2. Firebase Firestore for managing product data, including
names, descriptions, prices, and URLs for 3D models.
3. A QR Code generator that links to AR models for easy
product visualization.
4. Integration of a Google Model Viewer to render 3D furniture
models in AR, offering users an immersive experience.
5. An admin panel for product management, enabling easy
addition, modification, and deletion of products in the
database.
The workflow begins with users visiting the Home Page, which
fetches product data from Firebase Firestore. By navigating to
the Product Page, users can view individual product details
and a QR code to access AR models. Scanning the QR code
redirects users to an AR Viewer, where they can interact with
3D models of the furniture in real-world settings. The admin
interface allows authorized users to manage the product
catalog efficiently, ensuring up-to-date product availability.
This project demonstrates how AR technology can
revolutionize e-commerce by offering customers a more
engaging and realistic shopping experience. It serves as a
robust prototype for businesses looking to integrate AR
capabilities into their online platforms, bridging the gap
between traditional and modern shopping experiences.

4
 Chapter 2: Problem Definition

1. The traditional online furniture shopping experience often

lacks the ability to provide users with a clear understanding
of how a product will look and fit in their actual living space.
Customers rely solely on images, descriptions, and
dimensions, which can lead to uncertainty, dissatisfaction, and
increased product returns due to mismatched expectations.
Additionally, many e-commerce platforms fail to provide an
interactive and engaging way for users to explore and
visualize products in a real-world context.

Key Challenges:
1. Lack of Real-World Visualization: Customers cannot accurately assess how
furniture will look or fit within their homes.
2. High Product Returns: Without the ability to "try" furniture in their space, users
may make incorrect purchasing decisions.
3. Limited Interactivity: Existing online platforms lack immersive features, making
the shopping process less engaging.
4. Inefficient Product Management: For store administrators, managing and
updating product details often involves complex and time-consuming
processes.

1. To address these challenges, there is a need for an innovative

platfor that enhances the shopping experience by combining augmented
reality (AR), responsive design, and efficient backend management. The
solution should allow customers to visualize furniture in their real
environment, reduce return rates, and provide an intuitive interface for
both users and administrators.

5
 Chapter 3: Requirement (Hardware & Software) Analysis Phase

1. Hardware Requirements
For Development
Personal Computer (PC) or Laptop:
Processor: Intel i5 or AMD Ryzen 5 (or higher)
RAM: Minimum 8 GB (16 GB recommended)
Storage: 20 GB of free space
Operating System: Windows 10/11, macOS, or
Linux
GPU: Integrated GPU (recommended: dedicated
GPU for AR testing)

For Users

Mobile Devices:
Smartphone with AR support:
Android: ARCore-compatible
devices
iOS: Devices with ARKit support
(iPhone 6s or newer)
Camera: To scan QR codes and
visualize AR models
Internet Connection: Reliable
connectivity for accessing AR
models hosted online.

6
2. Software Requirements
Frontend Development
Programming Languages: JavaScript, JSX
Frameworks & Libraries:
React: For building the user interface.
Model Viewer: To render 3D models in AR.
Code Editor:
VS Code (preferred)
QR Code Generator Library (e.g., qrcode.react):
For generating QR codes for AR model links.

Backend Development
Backend Service: Firebase
Firebase Firestore: For database management.
Firebase Hosting: To host the application if required.
Firebase Storage: For storing QR codes or 3D
models.

Augmented Reality
3D Models:
Formats: .glb, .gltf (preferred for AR compatibility).

Dependencies & Packages

Firebase SDK (firebase): To integrate Firebase with the
app.
QR Code Library (qrcode.react): For QR code
generation.
Model Viewer Library (@google/model-viewer): For
rendering AR models.

7
 Chapter 4: Block Diagram (DFD Level 0)

The Level 0 Data Flow Diagram (DFD) provides a high-level overview of the AR furniture shopping

website's data flow and interactions between components. This diagram illustratesthe primary

inputs, processing units, and outputs of the system, focusing on how product data, 3D models,

user interactions are managed.

8
 Chapter 5: Working
Admin Panel
Purpose: The Admin Panel is used by administrators to manage product data.
Actions:
Upload new product details (name, price, description, images, and 3D model URL).
Data Flow:
The uploaded/updated data is stored in Firebase Firestore.
Output: Firebase Firestore contains updated product data ready for user interaction.
1. Firebase Firestore

Purpose: Acts as the central database to store and retrieve product details.

Stored Data:

Product information (name, price, description, and images).

3D model URLs for AR rendering.

Interactions:

Sends product data to the Homepage for browsing.

Provides detailed product information to the Product Page.

Supplies the 3D model URL to the AR Viewer for rendering.

Output: Reliable and real-time data delivery to other components.

2. Homepage

Purpose: Provides an interface for users to explore the available

furniture products.

Actions:

Fetch product data from Firebase Firestore.

Display the products in a user-friendly layout.

User Interaction:

Users can browse through the furniture listings and select a

product.

Data Flow:

Homepage fetches and displays the product data. 9

 Product Page

Purpose: Displays detailed information about a selected product.

Actions:

Retrieve and display detailed product data from Firebase Firestore.

Provide a button to generate a QR code for AR viewing.

Data Flow:

Fetches specific product details (including the 3D model URL).

Sends the 3D model URL to the QR Code Generator for creating a

QR code.

Output: A detailed product page with the option to view the product

in AR.

3. QR Code Generator

Purpose: Generate a QR code for AR viewing.

Actions:

Accept the 3D model URL from the Product Page.

Generate a unique QR code containing the 3D model link.

Data Flow:

Sends the QR code back to the Product Page for user download or

scanning.

Output: A QR code that links to the AR viewer.

10
4.

4.AR Viewer

Purpose: Render the furniture product in augmented reality.

Actions:

Retrieve the 3D model URL from the scanned QR code or Firebase

Firestore.

Render the 3D model using WebAR or compatible AR frameworks

(e.g., Three.js, Model-Viewer).

User Interaction:

Users view the selected product in AR through their smartphone

or AR device.

Output: Interactive and immersive AR visualization of the furniture

product.

5. User

Purpose: The end-user interacts with the system to browse, select,

and experience products in AR.

Actions:

Explore furniture listings on the Homepage.

View product details on the Product Page.

Scan QR codes to access the AR Viewer.

Output: A seamless furniture shopping experience enhanced by AR

technology.

11
Chapter 6: Advantages
Real-Time Updates:
:
Using Firebase Firestore ensures that changes made in the admin panel reflect

instantly across the website.

Cost-Efficiency:

Reducing dependency on physical showrooms by leveraging AR and online

platforms cuts costs associated with maintenance and operations.

Environmentally Friendly:

Encouraging online shopping and reducing the need for printed catalogs

contributes to sustainability efforts.

Interactive Shopping Experience:

The AR feature allows users to visualize furniture in their real-world environment,

ensuring that the size, design, and aesthetics match their space.

Informed Decision-Making:

By viewing the furniture in AR, users can make confident purchase decisions,

reducing the likelihood of returns or dissatisfaction.

Convenience:

Users can browse and explore furniture options from the comfort of their homes

without needing to visit physical stores.

Enhanced Product Understanding:

Detailed product pages with images, descriptions, and 3D models provide users with

comprehensive product insights.

Engagement and Satisfaction:

AR technology creates an engaging and immersive shopping experience, improving

user satisfaction.

12
 Chapter 7: Project Planning

Effective project planning ensures that the AR Furniture

Shopping Website is developed efficiently and meets all

requirements.

5.1 Project Objectives

1 Enhanced Shopping Experience:
Allow users to visualize furniture in their real-world environment
using AR technology for better decision-making.
2 Accessibility and Convenience:
Provide a seamless online platform accessible from any
device, eliminating the need to visit physical stores.
3 Interactive Product Exploration:
Enable users to explore product details through a rich,
interactive interface, including 3D models, images, and descriptions.
4 Customization and Immersion:
Offer personalized and immersive experiences by allowing users to
preview furniture items in their homes.

5.2 Project Timeline

Phase Duration
Project Initiation 1 week
Research and Requirement 2 weeks
Analysis 4 weeks
Design and Development 3 weeks
Testing and Validation 2 weeks
Deployment Documentation 1 week
Total Duration 13 weeks

13
 5.3 Resource Allocation

1. Human Resources

Role Responsibilities

- Oversee the project lifecycle.

Project Head
- Manage team, timelines, and risks.

- Develop React components for Homepage,

Frontend Developer(s) Product Page, Admin Panel.
- Integrate QR code and AR viewer.

Configure Firebase Firestore.

Backend Developer operations.
- Ensure database optimization.

- Implement WebAR solutions (e.g., Model-

Viewer, Three.js).
AR Developer
- Optimize 3D model rendering for
performance.

2. Software Resources

Software/Tool Purpose

Build the frontend components for a dynamic

React.js
and interactive user interface.

Real-time database for storing product

Firebase Firestore
information, user data, and 3D model URLs.

Render 3D furniture models in AR for user

Model-Viewer
visualization.

Create QR codes linking to AR models (e.g.,

QR Code Generator Library
qrcode.react or similar libraries).

Integrated Development Environment (IDE)

VS Code
for coding and debugging.

Version control for collaborative

Git/GitHub
development and project management.

14
5.3 Risk Management

1 Technical Challenges
Risk: Difficulty in integrating AR features (e.g., 3D model rendering, QR
code functionality, or AR viewer compatibility).
Mitigation:
Conduct thorough research on AR libraries such as Model-Viewer,
Three.js, and Firebase before starting development.
Develop and test small prototypes to validate the feasibility of core
features.
Allocate an AR Specialist to address specific challenges related to 3D
rendering and device compatibility.
2. Budget Overruns

Risk: Unexpected costs may arise during development (e.g., additional

cloud services, purchase of 3D models, or extended team hours).
Mitigation:
Maintain a contingency budget (10–15% of the overall budget).
Track expenses weekly to ensure alignment with financial forecasts.
Use free or open-source tools where possible, and scale Firebase usage
gradually.
3. Compatibility Issues

Risk: AR viewer may not function properly on certain devices or browsers.

Mitigation:
Test features on a wide range of devices (Android, iOS, desktop) during
development.
Use web standards and frameworks like Model-Viewer or Three.js to ensure
broad compatibility.
Maintain clear documentation for device requirements and browser
compatibility.

15