Create a small “Bug Tracker” web application as a demo POC for a workshop teaching Spec-Driven Development (SDD) using OpenSpec.
- Frontend: React + TypeScript (Vite) + Tailwind CSS
- Backend: Node.js + Express + TypeScript
- Storage: in-memory only (no database)
- Tests: Vitest + Supertest for API tests
- Runtime:
npm run devmust start both frontend and backend concurrently
- Follow Red–Green–Refactor.
- For every behavior in the specs, write failing tests FIRST, then implement.
- Task lists must explicitly sequence: tests → implementation → refactor.
- Create a new bug with:
- Title: required string, max 100 characters
- Description: optional string
- Severity: optional, one of
P1,P2,P3 - Status: defaults to
New - CreatedAt: timestamp set automatically
- Validation: if Title is missing or exceeds 100 characters, show an error and do not create the bug.
- Display all bugs sorted newest-first.
- Each row shows:
- Title, truncated to 50 characters with
…when longer - Severity or
Untriagedwhen not set - Status
- CreatedAt
- Title, truncated to 50 characters with
- Triage sets Severity to one of
P1,P2,P3and transitions Status fromNewtoTriaged. - Once a bug is
Triaged, Severity cannot be changed again; reject such requests with a clear error.
- No authentication, roles, persistence, edit, or delete operations.
- Minimal UI: one create form and one list view.
- Only the
create-bugfeature should include greenfield scaffolding (frontend, backend, tests, and a rootLAB-README.md). Subsequent features must build on the existing scaffolding.
- The user will request one feature at a time (e.g.,
create-bug feature only, include greenfield scaffolding). - Generate the OpenSpec proposal/spec/design/tasks artifacts for only the requested feature.
- Do not re-scaffold or rewrite
LAB-README.mdunless the user explicitly asks for greenfield scaffolding.