AR Furniture Store - Frontend

This project is a React + Vite frontend for a furniture store experience that combines:

• Interactive 3D product preview
• Web-based Augmented Reality (AR) placement
• Role-based product and order management
• Checkout and order tracking workflows

It was built as part of an academic software engineering project focused on practical AR use in e-commerce.

Backend Repository

Backend repo (Spring Boot):

• https://github.com/ThiwankaReiss/AR-Project.git

Run the backend first, then start this frontend.

Core Features

Customer-facing features

• Browse products with 3D previews
• View product details and media carousel
• Place items in cart and complete checkout
• View own orders and order details
• Switch UI theme color

Employee/Admin features

• Open Manage area for product and user management
• Create/edit products and customize model data
• Upload and manage product images
• View all orders, filter by user id or order id
• Update order status and delete orders

Admin-only management

• Update user roles (customer, employee, admin)
• Delete users (with master admin safety restriction)

Tech Stack

• Framework: React 18 + Vite 5
• 3D/AR: three, @react-three/fiber, @react-three/drei, maath
• State: valtio
• Routing: react-router-dom
• Forms: react-hook-form
• HTTP: axios
• UI: Bootstrap 5, Bootstrap Icons, SweetAlert2, AOS

Project Structure

src/
	components/      reusable UI and feature components
	canvas/          Three.js and AR scene/camera logic
	pages/           route-level pages (products, login, manage, orders, etc.)
	store/           global valtio state

Prerequisites

• Node.js 18+ and npm
• Backend server running locally on port 8080
• MySQL configured for the backend project
• Chrome browser (camera + motion sensors are required for AR flows)

Setup

1. Clone and run backend:

git clone https://github.com/ThiwankaReiss/AR-Project.git

Follow backend setup in that repository (database, mail configuration, and server startup).

2. Install frontend dependencies:

npm install

3. Start frontend:

npm run dev

4. Open:

http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Create production build
• npm run preview - Preview production build locally
• npm run lint - Run ESLint checks

API Integration Notes

The frontend currently calls backend APIs using hardcoded local URLs such as:

• http://localhost:8080/auth
• http://localhost:8080/model
• http://localhost:8080/order
• http://localhost:8080/user
• http://localhost:8080/images/upload

Ensure the backend is reachable at http://localhost:8080 when running locally.

Functional Flow Summary

1. User signs in or registers.
2. Products are loaded from backend and shown in 3D-capable cards.
3. User can view detail/customization/AR depending on role and selected item.
4. Cart is converted into an order at checkout.
5. Orders can be tracked by customer; staff can manage statuses and records.

Known Limitations

• Route access control is mainly handled by UI conditions in the frontend.
• API base URL is hardcoded to localhost and not environment-driven yet.
• Some AR behavior depends on browser/device permission support.

Future Improvements

• Add protected route guards for role-based navigation
• Move API base URL to environment configuration
• Improve error handling and loading states across all data views
• Add unit/integration tests for critical flows

References

• Three.js: https://threejs.org/
• React Three Fiber: https://docs.pmnd.rs/react-three-fiber
• Bootstrap: https://getbootstrap.com/
• React: https://react.dev/