commit b84807bbdbd0e57fbfc36fcb2602c75d86450569 Author: alexei.dolgolyov Date: Sun Apr 5 11:51:39 2026 +0300 docs: add project plan prompt diff --git a/PLAN_PROMPT.md b/PLAN_PROMPT.md new file mode 100644 index 0000000..18799a0 --- /dev/null +++ b/PLAN_PROMPT.md @@ -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