Desinger-System / replit.md
o134's picture
Upload folder using huggingface_hub
1804b24 verified
|
Raw
History Blame Contribute Delete
3.7 kB
# 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