🚀 AR-Webstore

Hi 👋, Shwet here and welcome to AR-Webstore!

It's a web application to visualize photorealistic 3D objects in AR (Augmented Reality).

Why AR-Webstore?
Current State of Project
Preview
Future Goals
Resources
Technologies Used
Setting up the project
Build
A note on debugging
Open Source Programs
Project-admin
Contributors

🤔 Why AR-Webstore?

Problem 😧

Traditional e-commerce platforms fail to deliver immersive product experiences, leaving customers uncertain about the look, fit, and functionality of items. This lack of visualization leads to higher return rates as products may not meet expectations. Additionally, customer engagement suffers due to the limited ability to interact with and explore products online.

Solution 😃

Our AR-Webstore revolutionizes the shopping experience by seamlessly integrating augmented reality. With AR-Webstore,customers can visualize products in their own spaces and view all the virtual features more clearly. This empowers customers to make informed decisions, reduces return rates, and enhances engagement, resulting in a more satisfying and immersive shopping journey.

Current State of the Project

It showcases a 3D photorealistic model of a chair in your own environment using augmented reality, where you can check each and every detail about the chair as if it were actually present in your room.

👀 Preview

Live Link

🤩 Future Goals

Build an e-commerce platform that can provide an immersive online shopping experience.
Make the products interactive in a real environment rather than just demonstrating static 3D models using ML-AI.

😇 Learning Exposure

XR, or Extended Reality, is an exciting technology that combines the real world with virtual elements. As a student interested in XR, while contributing to this project, you will learn about the technical aspects of XR, which involve understanding how to create and render virtual objects, recognize and track objects in the real world, and explore how users interact with virtual environments, ensuring intuitive and immersive experiences. While studying XR, you can delve into programming technologies like Three.js or Unity to develop interactive and immersive experiences. You'll also explore 3D modelling and animation to create virtual objects and environments.

No no! Don't worry about some top of the world words mentioned above, the project is completely beginner friendly 😅 !But if you give your best, then you can really learn and build something out of the box for the future while working on this project, which I can ensure 😎!Find some helpful resources below to start your journey in XR.

Resources 🙌

🧰 Technologies Used

🔥 Setting up and running the app locally

Fork the repo
- First, you have to make your own copy of the project. For that, you have to fork the repository.You can find the fork button on the top-right side of the browser window.(Refer to the image below.)
- Kindly wait till it gets forked.
- After that copy, it will look like "/AR-Webstore" forked from "ShwetKhatri2001/AR-Webstore"
Clone the repo to your system
- Now you have your own copy of the project. Here, you have to start your work.
- Go to the desired location on your computer where you want to set up the project.
- Open that location on your terminal and clone the repo using the commands given below.
```
git clone https://github.com/<your-username>/AR-Webstore.git
```
```
cd AR-Webstore
```
To get the web app up and running, you need to run the following commands to install dependencies and start the app.
```
npm install
```
```
npm start
```

This will install the app dependencies, start an instance of webpack-dev-server, and expose the local web server to the internet using the local tunnel URL will be printed on your terminal.

🧰 Build

Run npm run build to build the project. The build artifacts will be stored in the build/ directory.

npm run build

📝 A note on debugging

For development and debugging, attach the device to your machine using a cable and access the url chrome://inspect/#devices in your desktop version of Chrome. Allow debug access when prompted on your device. You should then be able to see your device appear in the inspection window you opened earlier, where you can use the inspect functionality to get access to the running app instance for debugging.

📌 Open source Programs

This project is a part of the following Open Source Program

Project Admin

_{Shwet Khatri}

Mentors

I am looking for some mentors who can help me maintain the project workflow.

MohanaSrinivas/AR-Webstore