Spaces:
Runtime error
Runtime error
File size: 3,698 Bytes
1804b24 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | # 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 `<html>`, 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
|