🛋️ LIVORA - Furniture Design Studio Platform

A full-stack, web-based furniture design platform built for in-store designers to create, visualize, and present room layouts in 2D and 3D — helping customers make confident, informed furniture choices.

---

🌐 Live Demo : https://livora-rho.vercel.app

• Admin Login: https://livora-rho.vercel.app/admin/login
• User Login: https://livora-rho.vercel.app/user-panel/login
• User Registration: https://livora-rho.vercel.app/user-panel/register

Local Demo : http://localhost:3000

• Admin Login: http://localhost:3000/admin/login
• User Login: http://localhost:3000/user-panel/login
• User Registration: http://localhost:3000/user-panel/register

Default Admin Credentials

• Email: admin@livora.com
• Password: Admin@123

Sample User Credentials (Password: User@123)

• roshan@example.com · priya@example.com · kamal@example.com
• tharinda@example.com · amara@example.com · nisha@example.com

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/your-org/livora.git
cd livora

2. Start the Backend (Express.js)

cd livora-backend
npm install
npm run dev

Backend runs on: http://localhost:5000

3. Start the Frontend (Next.js)

npm install
npm run dev

Frontend runs on: http://localhost:3000

4. Seed the Database (Optional)

cd livora-backend
npx ts-node src/seed.ts

---

🌟 Feature Set

🎨 Admin Panel — Designer Side

Module	Capabilities
🔐 Authentication	Secure JWT + Bcrypt login Session handling & logout Role-based access control Error handling & validation
📊 Admin Dashboard	Overview stats: Total Designs, Products, Consultations, Clients Quick actions: Create New Design, Furniture Catalogue Recent designs preview Quick access to Comparison, Cost Reports
🏠 Room Setup	Configure room name, dimensions (L × W × H) Room shape selection Wall & floor texture selection Colour scheme configuration Continue to 2D Layout Editor
✏️ 2D Layout Editor	Drag-and-drop furniture placement on grid canvas Rotate, align to walls, snap-to-wall Undo / Redo (Ctrl+Z / Ctrl+Y) Zoom controls & grid toggle Apply textures: wood, fabric, metal Adjust lighting intensity & day/night mode Save design (Ctrl+S)
🧊 3D Visualization	Real-time Three.js 3D rendering Orbit, pan & zoom camera controls Lighting modes: Daylight, Sunset, Night, Studio Camera presets: Top, Front, Side, Corner Toggle shading & lighting effects Save design & back to 2D
🪑 Furniture Catalogue Management	Add, edit, delete products Upload product images Assign category, description, dimensions Set price, colours & manage textures Bulk product import via CSV
⚖️ Design Comparison	Side-by-side layout comparison Compare colour schemes & furniture selection Cost comparison between designs Visual difference highlighting
💰 Cost Summary & Reports	Itemised furniture cost breakdown Total estimated cost calculation Export cost report as PDF Download design summary
🕓 Design History	View all previously created designs Restore previous design versions Auto-save history log Compare version changes
📅 Consultation Management	View all customer consultation requests Accept / Reject requests Update status: Pending → Confirmed → Completed Send response to client Generate & share design preview links
⚙️ Profile / Settings	Update profile & change password Accessibility: high contrast, dark mode, font size Notification preferences

---

🌐 User Panel — Customer Side

Module	Capabilities
🛋️ Furniture Catalogue	Browse all furniture products Filter by category, price, colour, material, rating Search bar & sort options Product cards with image, price & star rating
🔍 Furniture Detail Page	Multi-image gallery & full description Dimensions, material, available colours & price Add to Wishlist Request Design Consultation button
❤️ Wishlist	Save favourite furniture items Remove items or move to consultation View product details from wishlist
📋 Consultation Request	Book a design consultation with a designer Enter room size, preferred date & notes Submission confirmation message Track consultation status from profile
⭐ Reviews & Ratings	Submit star ratings and written reviews Browse customer reviews per product Sort & filter by rating
👤 User Account	Edit profile: name, email, phone View saved consultation requests & statuses Wishlist overview & comparison history Logout

---

⌨️ Keyboard Shortcuts

2D Layout Editor

Shortcut	Action
Ctrl + Z	Undo
Ctrl + Y	Redo
Ctrl + S	Save design
R	Rotate selected furniture
Delete	Delete selected furniture
Escape	Deselect
Arrow Keys	Move furniture
Shift + Arrow	Fine movement

Forms & Navigation

Shortcut	Action
Enter	Submit form
Tab	Next field
Shift + Tab	Previous field

---

🖱️ Mouse Interactions

Context	Interaction	Action
2D Editor	Click product	Place furniture
2D Editor	Click + Drag	Move furniture
2D Editor	Right Click + Drag	Pan canvas
2D Editor	Scroll Wheel	Zoom
3D View	Left Drag	Orbit camera
3D View	Right Drag	Pan camera
3D View	Scroll Wheel	Zoom
Catalogue	Heart icon	Add / remove wishlist
Consultations	Eye icon	View consultation details
Consultations	Accept / Reject	Update status

---

🛠️ Tech Stack

Layer	Technology
Frontend	Next.js 16, React 19, TypeScript, Tailwind CSS
Backend	Express.js 5, TypeScript
Database	MongoDB Atlas
Authentication	JWT + bcrypt
3D Rendering	Three.js + React Three Fiber
PDF Export	PDFKit
Icons	Lucide React

---

📋 System Module Breakdown

1. Authentication Module — JWT-based login, session & role management
2. Room Design Module — Room setup, dimensions, textures, colour schemes
3. 2D Rendering Module — Canvas editor, drag-and-drop, snap, undo/redo
4. 3D Visualization Module — Three.js scene, lighting, camera presets
5. Furniture Management Module — Catalogue CRUD, image upload, bulk import
6. Cost Calculation Module — Itemised breakdown, totals, PDF export
7. Comparison Module — Side-by-side design comparison
8. User Interaction Module — Wishlist, reviews, consultation requests
9. Reporting Module — Design history, audit log, cost reports

---

🧪 HCI / UX Principles Applied

• Usability — Intuitive, consistent interface requiring minimal training
• Feedback — Immediate visual/textual confirmation for all actions
• Error Prevention — Clear prompts and undo options throughout
• Accessibility — Colour contrast, font size options, dark/high-contrast modes
• Efficiency — Minimal steps per task for smooth customer consultations
• Engagement — Immersive 3D visualization and interactive 2D editor

---

📄 License

This project was developed as part of PUSL3122 – HCI, Computer Graphics & Visualisation coursework.

---

Built with ❤️ by the Livora Team