Forma Custom Furniture

A polished frontend-only MVP for a custom furniture design platform. Configure a modular bookcase / shelving unit in real-time 3D.

How to run

cd forma-app
npm install
npm run dev

Open http://localhost:3000 in your browser.

What the MVP includes

• Live 3D configurator — procedurally generated bookcase model built from BoxGeometry panels (sides, top, bottom, shelves, dividers, back panel). Updates instantly on every config change.
• Orbit controls — rotate, zoom, and pan the model freely.
• Material & finish system — 5 materials (Oak, Walnut, Birch Plywood, White MDF, Black MDF) × 3 finishes (Natural, Matte, Dark Stain) rendered with procedural colors and roughness.
• Full configuration panel — sliders for W/H/D, steppers for shelf count and divider count, segmented control for board thickness, dropdown for material, segmented control for finish.
• Frontend rules engine — validates dangerous configurations (wide spans without dividers, tall shallow units, ceiling height) and shows inline warnings.
• Frontend pricing engine — calculates material, labor, complexity, and finish costs in ILS. Shows itemized breakdown and estimated production time.
• Request Quote modal — saves design locally; backend submission marked as future work.
• Dimension badge — floating overlay showing live W × H × D in mm.

Tech stack

• Next.js 16 (App Router)
• TypeScript
• React Three Fiber + Three.js + Drei
• Tailwind CSS
• No backend, no auth, no database

File structure

forma-app/
  app/
    layout.tsx          Root layout + metadata
    page.tsx            Top bar + Editor mount
    globals.css         Tailwind + range input styles
  components/
    Editor.tsx          State management, layout, dynamic 3D import
    Bookcase3D.tsx      React Three Fiber canvas, lights, shadows, grid
    ConfigPanel.tsx     All config controls (sliders, steppers, selects)
    PriceCard.tsx       Price breakdown + Request Quote modal
    ValidationMessages.tsx  Inline warning/info banners
  lib/
    furnitureEngine.ts  Converts FurnitureConfig → Panel[] for 3D rendering
    pricingEngine.ts    calculatePrice() → PriceBreakdown in ILS
    rulesEngine.ts      validateConfig() → ValidationMessage[]
  types/
    furniture.ts        All shared TypeScript types

What should be added next

1. Backend & quote submission — store designs in a database, send quote requests by email or CRM.
2. User accounts — save and load multiple designs per user.
3. More furniture types — wardrobes, desks, kitchen units using the same procedural engine.
4. Real-time collaboration — share a configurator link with a client.
5. AR preview — view the bookcase in the user's room via WebXR.
6. Realistic textures — swap procedural colors for actual wood grain texture maps.
7. Dimension labels in 3D — rendered HTML overlays showing panel sizes.
8. Export — download a PDF quote or a 3D model (GLTF).
9. Assembly instructions — auto-generate a cut list from the panel data.