Workbench
A local-first project journal and personal tool designed to track active work across multidisciplinary craft, maintain a clear next action, and preserve an honest record of decisions.
Context & Purpose
The Multidisciplinary Friction
Working concurrently across music production, traditional drawing, tattoo practice, 3D printing, web development, and systems analysis creates frequent context-switching. Without clear boundaries, project momentum stalls when returning to a discipline after days or weeks away.
Generic task managers and issue trackers are built around infinite backlogs, deadlines, and corporate workflows. Workbench was built as a dedicated personal tool to solve one specific problem: knowing the single next meaningful action for every project the moment you step up to the bench.
Personal Learning Project
Workbench is an ongoing personal tool and learning exploration. It is not a commercial product, a cloud platform, or a public SaaS service. It was designed to test disciplined client-side architecture, local-first data resilience, and automated testing with zero backend overhead.
Version 1.0 is fully complete and in daily personal use. Future development continues iteratively based on genuine studio needs rather than speculative feature lists.
Local-First Principles
Workbench runs 100% in the browser. There is no remote database, no user account, no telemetry, and no network requests for data storage. All notes, experiments, and decisions stay entirely on the local device.
Data persists in the browser’s localStorage under the versioned key workbench_v1. State reliably survives tab refreshes, window closures, and browser restarts.
The UI layer never touches browser APIs directly. All reads and writes pass through a typed repository interface. If local storage is ever migrated to IndexedDB or a local file system API, zero component code changes will be required.
Complete Technology Architecture
React 19 & React Router 8
Modern declarative user interface with client-side SPA routing for Dashboard, Project Detail, and Archive views.
Vite 8
Lightweight build tooling providing rapid local hot-reloading and optimized static asset packaging.
TypeScript (Strict)
End-to-end type safety defining strict domain enums, immutable entry types, project models, and reducer actions.
Design Token Architecture
Custom CSS custom properties with a focused dark palette, semantic badges, and responsive layouts tailored for mobile and desktop.
4-Layer Architecture
Strict boundary separation: React UI → Application State (WorkbenchProvider & useReducer) → Repository Interface → Storage Implementation.
WorkbenchRepository Interface
Clean TypeScript contract abstracting data persistence so storage backends can be swapped without touching UI logic.
Local-First Browser Persistence
Zero cloud dependencies. All data lives in browser localStorage under key 'workbench_v1', surviving page refreshes and browser restarts.
Corrupted Data Safeguards
Automated schema validation on load returning a typed LoadResult (valid, empty, or invalid) with a dedicated InvalidDataScreen to prevent data destruction.
Vitest 5 (Unit & Integration)
Comprehensive test suite verifying repository load/save behavior, parsing logic, invalid data detection, and reducer state transitions.
Playwright (End-to-End)
Headless browser tests validating full user workflows: project creation, inline next-action updates, append-only entries, and archiving.
Oxlint
Fast static analysis and linting enforcing consistent code quality across components, repository modules, and tests.
Data Model & Mechanics
Disciplinary Domains
7 ScopesEvery project belongs to an explicit domain, allowing instant visual filtering and categorization across distinct craft disciplines:
Each active project holds exactly one next action. There are no secondary lists or subtasks. This eliminates analysis paralysis and guarantees immediate momentum upon opening the dashboard.
Append-Only Journal Entries
Immutable HistoryEntries are permanent and cannot be edited or deleted. If an error occurs, an explicit Correction entry is recorded. This preserves an authentic chronology of decisions and outcomes:
Status & Future Development
v1.0 Complete (Current State)
- Active project dashboard with dynamic next-action visibility
- Chronological entry logging with tags and distinct entry badges
- Inline next-action editing without full form modals
- Project archiving and reversible restoration
- LocalStorage persistence with schema validation
- Full test suite with Vitest unit tests and Playwright browser specs
Roadmap Candidates (Backlog)
- v1.1 Backup & Restore: Validated JSON export and import with dry-run verification
- Activity Timestamps: Optional event occurrence date (
occurredAt) distinct from entry creation - Image Attachments: Local image storage via IndexedDB for photos of prints, drawings, and prototypes
- Search & Templates: Fast content search and domain-specific starter templates