63 lines
2.6 KiB
Markdown
63 lines
2.6 KiB
Markdown
# AV Planner
|
|
|
|
Plan out AV/network installs: define devices and their ports, wire them together
|
|
on a canvas, and get a bill of materials (devices + cables, with lengths) for
|
|
what you'll need to buy.
|
|
|
|
## Stack
|
|
|
|
- **React 19 + TypeScript + Vite**
|
|
- **[@xyflow/react](https://reactflow.dev)** (React Flow) for the device/wiring canvas
|
|
- **Zustand** for app state
|
|
- **Tailwind CSS v4** for styling
|
|
|
|
## Architecture
|
|
|
|
```
|
|
src/
|
|
domain/ Framework-agnostic types + logic (compatibility rules, BOM math,
|
|
the built-in connector/cable/device library). No React, no
|
|
React Flow — safe to unit test or reuse from a future backend.
|
|
data/ Storage abstraction. `ProjectRepository` is the interface the
|
|
rest of the app codes against; `LocalStorageProjectRepository`
|
|
is the only implementation today. Swapping in a real backend
|
|
later (REST/GraphQL) means adding one new implementation of
|
|
that interface, not touching state/UI code.
|
|
state/ Zustand store (`projectStore`) — the single source of truth for
|
|
the current project. Auto-saves to the repository (debounced)
|
|
on every change.
|
|
components/
|
|
canvas/ React Flow wiring surface: custom device node, custom cable
|
|
edge, connection validation.
|
|
palette/ Device library sidebar + the "new custom device" editor.
|
|
inspector/ Right-panel editors for the selected device or cable.
|
|
bom/ Bill-of-materials view.
|
|
layout/ App shell, top bar, panels.
|
|
```
|
|
|
|
### Data model
|
|
|
|
- **PortType** — a connector kind (HDMI, XLR, Cat5e/6, ...). Two ports can be
|
|
wired together only if their PortTypes share a compatibility `family`.
|
|
- **DeviceTemplate** — a reusable device shape (its ports), shown in the
|
|
palette. Built-ins live in `domain/library.ts`; custom ones are saved on the
|
|
project.
|
|
- **Device** — an instance placed on the canvas, with its own copy of ports
|
|
(editing an instance never mutates its template).
|
|
- **CableType** — a physical cable spec, scoped to a PortType family.
|
|
- **Connection** — a wire between two ports, referencing a CableType and an
|
|
optional user-entered distance (there's no floor plan / scale model, so
|
|
length is a manual estimate per connection).
|
|
- **Project** — devices + connections + any custom library entries. This is
|
|
the one object persisted (auto-saved to `localStorage`, or explicitly
|
|
exported/imported as JSON).
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # start the dev server
|
|
npm run build # typecheck + production build
|
|
npm run lint # oxlint
|
|
```
|