FurnitureViz — Room Designer

A professional 2D and 3D furniture visualization tool for interior designers. Design room layouts on a 2D canvas, preview them in an interactive 3D view, manage a built-in furniture catalog, upload custom 3D models, and save/load your designs — all from the browser.

---

Features

• User Authentication — Secure registration & login with JWT-based sessions and bcrypt password hashing.
• Dashboard — View, manage, and open all saved room designs with thumbnail previews.
• Room Management — Create rooms with custom dimensions (width, length, height), wall/floor colors, and shapes.
• 2D Design Canvas — Drag-and-drop furniture placement on an interactive Konva canvas with real-time editing.
• 3D Visualization — Instantly preview any design in a full 3D view powered by Three.js and React Three Fiber.
• Furniture Catalog — Browse a built-in catalog of 15+ items across chairs, tables, sofas, storage, and beds.
• Custom 3D Models — Upload your own .glb / .gltf models to use alongside the default catalog.
• Save & Load Designs — Persist designs to the server with auto-generated thumbnails for the dashboard.
• Responsive UI — Modern, polished interface with toast notifications, modals, and protected routes.

---

Tech Stack

Frontend

Technology	Purpose
React 19	UI framework
Vite 7	Dev server & bundler
React Router v7	Client-side routing
React Three Fiber + Drei	3D rendering (Three.js)
Konva + React Konva	2D canvas editing
Lucide React	Icons
react-colorful	Color picker

Backend

Technology	Purpose
Express 5	REST API server
better-sqlite3	Embedded SQLite database
bcryptjs	Password hashing
jsonwebtoken	JWT authentication
multer	File upload handling (3D models)
cors	Cross-origin support

---

Project Structure

furniture/
├── backend/
│   ├── index.cjs              # Express server entry point
│   ├── database/
│   │   └── db.cjs             # SQLite database setup & schema
│   ├── middleware/
│   │   └── auth.cjs           # JWT authentication middleware
│   ├── routes/
│   │   ├── auth.cjs           # POST /api/auth — register, login
│   │   ├── rooms.cjs          # CRUD /api/rooms
│   │   ├── designs.cjs        # CRUD /api/designs
│   │   └── models.cjs         # Upload/manage custom 3D models
│   ├── uploads/               # Uploaded 3D model files
│   └── package.json
│
├── frontend/
│   ├── index.html             # App shell
│   ├── vite.config.js         # Vite configuration
│   ├── src/
│   │   ├── main.jsx           # React entry point
│   │   ├── App.jsx            # Router & layout
│   │   ├── index.css          # Global styles
│   │   ├── context/
│   │   │   └── AuthContext.jsx # Auth state provider
│   │   ├── pages/
│   │   │   ├── Login.jsx      # Login page
│   │   │   ├── Register.jsx   # Registration page
│   │   │   ├── Dashboard.jsx  # Design dashboard
│   │   │   ├── RoomForm.jsx   # Create / edit room
│   │   │   ├── DesignStudio.jsx # Main 2D editor
│   │   │   ├── DesignView.jsx # Read-only 3D design view
│   │   │   └── FurnitureCatalog.jsx # Browse furniture items
│   │   ├── editor/
│   │   │   ├── Canvas2D.jsx   # 2D Konva canvas
│   │   │   ├── Viewer3D.jsx   # 3D Three.js viewer
│   │   │   ├── EditorToolbar.jsx # Toolbar controls
│   │   │   └── FurniturePalette.jsx # Drag-and-drop palette
│   │   ├── components/
│   │   │   ├── Navbar.jsx     # Navigation bar
│   │   │   ├── Footer.jsx     # Footer
│   │   │   ├── Modal.jsx      # Reusable modal
│   │   │   ├── Toast.jsx      # Toast notifications
│   │   │   └── ProtectedRoute.jsx # Auth guard
│   │   └── utils/
│   │       ├── api.js         # API helper (fetch wrapper)
│   │       └── furnitureData.js # Furniture catalog data
│   └── package.json
│
└── README.md

---

Getting Started

Prerequisites

• Node.js ≥ 18
• npm ≥ 9

1. Clone the Repository

git clone <repository-url>
cd furniture

2. Install Dependencies

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install

3. Run the Application

Option A — Start both servers with one command (from the frontend/ directory):

npm start

This uses concurrently to launch the Vite dev server and the backend API server together.

Option B — Start separately:

# Terminal 1 — Backend (port 3001)
cd backend
npm run dev

# Terminal 2 — Frontend (port 5173)
cd frontend
npm run dev

4. Open in Browser

Visit http://localhost:5173 to start designing.

---

Database Schema

The app uses an embedded SQLite database (backend/database/furniture.db) with WAL mode enabled. Tables are auto-created on first run.

Table	Description
designers	User accounts (id, name, email, hashed password)
rooms	Room definitions (dimensions, shape, wall/floor colors)
designs	Saved layouts (furniture positions as JSON, thumbnail)
custom_models	Uploaded 3D model metadata (file path, owner)

---

API Endpoints

Authentication — /api/auth

Method	Endpoint	Description
POST	/api/auth/register	Register a new designer
POST	/api/auth/login	Login and receive JWT token

Rooms — /api/rooms

Method	Endpoint	Description
GET	/api/rooms	List all rooms for the logged-in user
POST	/api/rooms	Create a new room
PUT	/api/rooms/:id	Update a room
DELETE	/api/rooms/:id	Delete a room

Designs — /api/designs

Method	Endpoint	Description
GET	/api/designs	List all designs for the logged-in user
GET	/api/designs/:id	Get a specific design
POST	/api/designs	Create a new design
PUT	/api/designs/:id	Update a design (layout + thumbnail)
DELETE	/api/designs/:id	Delete a design

Custom Models — /api/models

Method	Endpoint	Description
GET	/api/models	List uploaded models for the logged-in user
POST	/api/models/upload	Upload a .glb / .gltf 3D model
DELETE	/api/models/:id	Delete an uploaded model

All endpoints (except auth) require a valid Authorization: Bearer <token> header.

---

Usage Guide

1. Register / Login — Create an account or log in to your existing account.
2. Create a Room — Define room dimensions, wall & floor colors, and shape.
3. Open the Design Studio — Select a room and start a new design.
4. Add Furniture — Browse the furniture palette or catalog and drag items onto the 2D canvas.
5. Arrange & Customize — Move, rotate, and resize furniture on the canvas.
6. Preview in 3D — Switch to the 3D viewer for an immersive walkthrough of your design.
7. Upload Custom Models — Import your own .glb/.gltf files from the Furniture Catalog page.
8. Save Your Design — Save the layout; a thumbnail is generated automatically for the dashboard.

---

Furniture Catalog

The built-in catalog includes items across five categories:

Category	Items
Chairs	Dining Chair, Armchair, Office Chair
Tables	Dining Table, Coffee Table, Side Table, Desk
Sofas	2-Seater Sofa, 3-Seater Sofa, L-Shape Sofa
Storage	Bookshelf, Cabinet, TV Stand
Beds	Single Bed, Double Bed

Custom furniture items can also be added through the app and are stored locally.

---