docs: add project plan prompt
This commit is contained in:
+110
@@ -0,0 +1,110 @@
|
||||
# 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
|
||||
1. **Apartment management** — CRUD apartments with metadata (name, address, total area).
|
||||
2. **Room editor** — Each apartment contains rooms. Rooms have names, dimensions, and shapes
|
||||
(rectangular default, arbitrary polygon supported).
|
||||
3. **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)
|
||||
4. **Electrical plan** — Place switches, outlets, junction boxes, light fixtures, cable routes on
|
||||
both top-down and projection views. Use standard IEC electrical symbols.
|
||||
5. **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.
|
||||
6. **Persistence** — Save/load apartment data to server (REST API + database).
|
||||
7. **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
|
||||
1. User creates an apartment → defines rooms (name, shape, dimensions)
|
||||
2. User opens a room → edits in 2D top-down view (walls, electrical, furniture)
|
||||
3. User switches to projection views to fine-tune wall-mounted items
|
||||
4. User previews in 3D
|
||||
5. 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
|
||||
Reference in New Issue
Block a user