# Sync — AI Website Builder

Sync is an AI-powered development platform that builds complete, production-ready websites in real time using Groq LLMs. Users describe their vision and watch AI write code in a typewriter-style interface with live preview and voice feedback.

## Run & Operate

- `pnpm --filter @workspace/api-server run dev` — run the API server (port 8080)
- `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 the OpenAPI spec
- `pnpm --filter @workspace/db run push` — push DB schema changes (dev only)
- Required env: `DATABASE_URL` — Postgres connection string
- Required env: `SESSION_SECRET` — Express session secret
- Required env: `GROQ_API_KEY` — Groq API key for AI features (get free at console.groq.com)

## Stack

- pnpm workspaces, Node.js 24, TypeScript 5.9
- API: Express 5
- DB: PostgreSQL + Drizzle ORM
- Validation: Zod (`zod/v4`), `drizzle-zod`
- API codegen: Orval (from OpenAPI spec)
- Build: esbuild (CJS bundle)
- Frontend: React + Vite + Tailwind CSS + shadcn/ui
- Routing: wouter
- AI: Groq (llama-3.3-70b-versatile) via SSE streaming

## Where things live

- `artifacts/platform/` — React/Vite frontend (the main Sync app)
- `artifacts/api-server/` — Express API server
- `lib/db/` — Drizzle ORM schema + migrations
- `lib/api-spec/` — OpenAPI spec + Orval codegen
- `lib/api-client-react/` — Generated React Query hooks
- `lib/api-zod/` — Generated Zod schemas
- `artifacts/platform/public/logo.png` — Sync logo (transparent, for use in UI)
- `artifacts/platform/public/favicon.png` — Favicon (original logo)

## Architecture decisions

- SSE streaming for AI responses — both chat (conversations.ts) and website builder (build.ts) use Groq streaming via `res.write("data: ...")` SSE
- Website builder generates a complete single-file HTML website with Tailwind CDN + GSAP CDN, shown in an iframe via `srcdoc`
- Typewriter effect uses a DOM ref (`preRef.current.textContent`) to avoid React re-render overhead during fast typing
- Web Speech API for voice feedback — no external dependency, purely browser-native
- Dark mode is forced via `useEffect` adding `dark` class to `documentElement` in App.tsx

## Product

- **Home** (`/`) — AI chat interface with "Build Website" banner CTA and quick-action chips
- **Build** (`/build`) — Full-screen website builder: form → building (typewriter + live preview + voice) → complete (iframe + download)
- **Chat** (`/chat/:id`) — Full AI conversation interface with split code/preview pane
- **Projects** (`/projects`) — Project management
- **Pricing** (`/pricing`) — Subscription plans (Free/Pro/Enterprise) + credit packs with checkout modal
- **Settings** (`/settings`) — AI model preferences, user profile, API keys
- **Docs/About/Terms/Privacy** — Public info pages

## User preferences

- Logo: The purple "S" gradient logo (`/logo.png`) should be used consistently across ALL pages/components — sidebar, navbar, chat, footer, pricing, build page
- Copyright year: 2026
- Dark mode only — never light mode
- App name: "Sync" by Demure Platform Inc.
- No placeholder content — everything should be real and functional

## Gotchas

- The API server's `build.ts` route uses `max_tokens: 8192` — Groq free tier may have lower limits; if generation is cut off, try reducing to 4096
- Voice synthesis (Web Speech API) voices may not be loaded immediately on page load — `getVoices()` may return empty on first call; voices load async
- The preview iframe uses `srcdoc` with `sandbox="allow-scripts allow-same-origin"` — needed for GSAP and other CDN scripts in the generated website
- `pnpm --filter @workspace/platform run typecheck` must pass before deploying — catches import and type errors
- Do not run `pnpm run dev` at workspace root — use workflows or `pnpm --filter @workspace/<name> run dev`

## Pointers

- See the `pnpm-workspace` skill for workspace structure, TypeScript setup, and package details
- Stripe payment integration is set up via the Replit connector (connector:ccfg_stripe_...) — needs OAuth setup to activate real payments