Hugging Face's logo

Spaces:
o134
/
Desinger-System
Runtime error

App Files Community
Desinger-System / replit.md
o134's picture
o134
Upload folder using huggingface_hub
1804b24 verified
preview code
|
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