House/Apartment Plan Maker — Architecture & Project Plan

Context

Greenfield client-server application for creating and editing apartment/house floor plans. The repo is empty: house-plan-maker/.

Core Requirements

Apartment management — CRUD apartments with metadata (name, address, total area).
Room editor — Each apartment contains rooms. Rooms have names, dimensions, and shapes (rectangular default, arbitrary polygon supported).
Visual editor per room:
- Top-down 2D view (primary editing surface) — place walls, doors, windows, electrical, furniture
- 4 side projection views (north/south/east/west walls) — show wall elevation with outlets, switches, furniture against that wall
- 3D perspective view (read-only visualization)
Electrical plan — Place switches, outlets, junction boxes, light fixtures, cable routes on both top-down and projection views. Use standard IEC electrical symbols.
Furniture placement — Drag-and-drop furniture items (bed, desk, wardrobe, sofa, table, chair, shelf, etc.) with approximate dimensions. Visual must be recognizable silhouettes, not photorealistic.
Persistence — Save/load apartment data to server (REST API + database).
Export — Export full apartment plan or individual room views as PDF or PNG images.

Assumed Tech Stack (confirm or override)

Frontend: React 19 + TypeScript + Vite
2D Canvas: Konva.js via react-konva (layered 2D shapes, drag-and-drop, zoom/pan)
3D View: Three.js via @react-three/fiber + @react-three/drei
Backend: Node.js + Fastify + Prisma ORM
Database: SQLite (dev), PostgreSQL (prod)
PDF Export: Client-side via jsPDF + html2canvas, or server-side Puppeteer
Monorepo: Turborepo with apps/client, apps/server, packages/shared

Target Users

End users: Plan room layout and furniture placement visually.
Electricians: Use exported plans to wire the apartment — precise outlet/switch positions matter.
Furniture makers: Use exported dimensions to build custom furniture.

Workflow

User creates an apartment → defines rooms (name, shape, dimensions)
User opens a room → edits in 2D top-down view (walls, electrical, furniture)
User switches to projection views to fine-tune wall-mounted items
User previews in 3D
User exports to PDF/PNG

Deliverable

Create a phased implementation plan covering:

Data model design (apartment → rooms → elements → electrical/furniture)
API endpoints
Frontend component architecture
2D editor architecture (layers, tools, snapping, grid)
Projection view rendering strategy
3D view approach
Export pipeline
Testing strategy

Break into 4 implementation phases with clear milestones.

Additional Ideas to Evaluate

Snap-to-grid and snap-to-wall for precise placement
Measurement annotations (auto-display distances between elements)
Room templates (bedroom, kitchen, bathroom presets)
Undo/redo stack
Layer toggling (show/hide electrical, furniture, dimensions independently)
Copy room layout between apartments
Cable length calculator based on placed electrical elements
Light coverage visualization (radius circles around light fixtures)
Collision detection for furniture overlap
Scale ruler always visible on canvas

Quick Version

Greenfield app: house-plan-maker/. Client-server for creating apartment floor plans.

Stack: React 19 + TS + Vite | react-konva (2D) | react-three-fiber (3D) | Fastify + Prisma + SQLite | Turborepo monorepo.

Features: Apartment → Rooms (rectangular or polygon). Per-room visual editor: 2D top-down + 4 wall projections + 3D preview. Place electrical (IEC symbols: outlets, switches, lights, cables) and furniture (recognizable silhouettes). Save/load via REST API. Export PDF/PNG.

Create a phased implementation plan (4 phases) with data model, API, component architecture, 2D editor design, and export pipeline.

Implementation Phases

Phase 0 — Architecture & Planning

Model: Opus
ECC: /plan, architect agent
Finalize tech stack, data model, API design, component tree, editor architecture

Phase 1 — Project Scaffold + Data Model + API

Model: Sonnet
ECC: feature-dev, api-design, tdd-guide
Monorepo setup, Prisma schema, REST endpoints, basic CRUD UI

Phase 2 — 2D Visual Editor (Top-Down + Projections)

Model: Sonnet
ECC: feature-dev, frontend-design, code-reviewer
Canvas editor with layers, tools, grid, snapping, drag-and-drop
Wall projection views

Phase 3 — 3D View + Electrical & Furniture Libraries

Model: Sonnet
ECC: feature-dev, frontend-patterns
Three.js scene from room data, electrical symbol library, furniture silhouette library

Phase 4 — Export + Polish

Model: Sonnet
ECC: feature-dev, e2e-runner
PDF/PNG export, undo/redo, measurement annotations, layer toggling, final QA

4.9 KiB Raw Permalink Blame History