# Design Studio OS A personal productivity system for freelance graphic designers — manages projects, clients, tasks, time tracking, design references/mood board, brief templates, and AI brainstorming. Fully Arabic RTL UI. ## Run & Operate - `pnpm --filter @workspace/api-server run dev` — run the API server - `pnpm --filter @workspace/design-studio run dev` — run the frontend (served at `/`) - `pnpm run typecheck` — full typecheck across all packages - `pnpm run build` — typecheck + build all packages - `pnpm --filter @workspace/api-spec run codegen` — regenerate API hooks and Zod schemas from OpenAPI spec - `pnpm --filter @workspace/db run push` — push DB schema changes (dev only) - Required env: `DATABASE_URL` — Postgres connection string ## Stack - pnpm workspaces, Node.js 24, TypeScript 5.9 - Frontend: React + Vite, Wouter routing, TanStack Query, shadcn/ui, Recharts, Framer Motion, @dnd-kit (Kanban) - API: Express 5 - DB: PostgreSQL + Drizzle ORM - Validation: Zod (`zod/v4`), `drizzle-zod` - API codegen: Orval (from OpenAPI spec) - Build: esbuild (CJS bundle) - Font: Tajawal (Arabic Google Font), RTL layout throughout ## Where things live - `lib/api-spec/openapi.yaml` — source of truth for all API contracts - `lib/db/src/schema/` — Drizzle table definitions (clients, projects, tasks, references, time_entries, briefs, plan_files) - `lib/api-client-react/src/generated/` — generated React Query hooks - `lib/api-zod/src/generated/api.ts` — generated Zod validation schemas (single file, mode: single) - `artifacts/api-server/src/routes/` — Express route handlers - `artifacts/design-studio/src/` — React frontend ## Architecture decisions - **Orval zod config uses `mode: "single"`** — avoids duplicate export conflicts. No `workspace:` key in zod config. - **Arabic RTL native** — `dir="rtl"` on ``, Tajawal font, all UI text in Arabic. - **Brainstorm endpoint is server-side only** — hand-crafted design ideas without AI API key. - **Dashboard stats are computed via SQL aggregates** — projectsByStatus, hoursThisMonth, pendingTasks computed on the fly. - **Plan files stored as base64 text in DB** — simple, no object storage needed for Excel/CSV uploads. ## Product - Dashboard: stats cards, "مهام اليوم" todo list, upcoming deadlines, live stopwatch timer with time logging - Kanban board: drag-and-drop projects across briefing → design → review → delivered columns - Project board: filterable grid with status workflow - Project detail: tabbed UI (المهام checklist + البلان Excel upload), Drive URL field - Client directory with project counts - Mood board / design references library (masonry grid with image thumbnails, category filter) - Brief templates library (copy-to-clipboard) - AI brainstorming assistant (ideas, color palettes as swatches, keywords, style directions) - Time tracking via dashboard stopwatch (logs to time_entries table) ## User preferences - System is for personal use by the designer, not a client-facing product - Arabic-language user — UI is fully in Arabic with RTL layout - Dark mode native preferred ## Gotchas - After OpenAPI spec changes, always re-run codegen before touching frontend or backend - The orval zod config must NOT use `workspace:` key or `mode: "split"` — causes duplicate export TS errors - Generated Zod schema names follow pattern `UploadProjectPlanBody` (not `UploadPlanBody`) — check generated file if unsure - Seeds use client IDs starting from 2 (first client seed auto-increments from prior health checks) ## Pointers - See the `pnpm-workspace` skill for workspace structure, TypeScript setup, and package details