# AllAI Studio Platform

Monorepo for the AllAI Studio frontend — a multilingual, theme-aware Next.js 14 app orchestrating image, video, and audio generation models (Nano Banana, Seedream, Sora, Veo, Flux, etc.) via the KIE AI marketplace.

## Repository layout

```
.
├─ apps/
│  └─ web/                 # Next.js 14 App Router frontend
│     ├─ app/              # Route handlers, locale layouts, SEO endpoints
│     ├─ src/              # Feature modules, providers, shared UI glue
│     └─ tailwind.config.ts
├─ packages/
│  ├─ ui/                  # Design system (buttons, panels, tabs, theme hooks)
│  ├─ i18n/                # 50-language infrastructure (config + dictionaries)
│  └─ services/            # API SDKs (e.g. KIE client with Zod validation)
├─ package.json            # Turborepo root scripts
├─ pnpm-workspace.yaml     # Workspace definition
├─ turbo.json              # Turborepo pipeline config
└─ tsconfig.base.json      # Shared TypeScript settings
```

## Tech stack
- **Next.js 14 (App Router)** with React Server Components, edge-ready middleware, route handlers for SEO (sitemap/robots).
- **TypeScript, Tailwind, class-variance-authority** for type-safe UI theming (light/dark with CSS tokens).
- **Zustand + React Query** placeholders for client state & async orchestration (hooks wired, backend on Go to plug in later).
- **i18next**-style dictionaries via shared `@allai/i18n` package; 50 locales enumerated with future JSON drops.
- **KIE AI SDK** (`@allai/services/kie`) wrapping `/models`, `/jobs`, `/tasks` endpoints with Zod validation & queue payload helpers.
- **Turbo + pnpm workspace** to scale to multiple apps/packages and provide CI-friendly pipelines.

## Frontend features implemented
- **Dashboard shell** inspired by Freepik but extended: guided/pro prompt modes, task filters, model marketplace cards, history, inspiration presets.
- **Theme system** with localStorage + `prefers-color-scheme` detection, toggle in sidebar, CSS variables for both modes.
- **Locale-aware routing**: middleware auto-redirects by `Accept-Language`, static params pre-render 50 locales, runtime `LocaleEffect` keeps `<html lang/dir>` in sync, `hreflang` + OG metadata generated.
- **SEO foundation**: dynamic metadata per locale, JSON-LD ready hooks, sitemap + robots endpoints referencing configurable base URL.
- **KIE integration scaffolding**: provider catalogue (Sora, Veo, Nano Banana, Seedream, Flux, AudioVerse, etc.), generation payload typing, queue/history UI ready to hook to Go backend.
- **Accessibility helpers**: keyboard-friendly components, focus outlines, high-contrast tokens, reduced-motion guardrails.

## Getting started

```bash
# install dependencies (pnpm is recommended)
pnpm install

# run dev server
pnpm dev

# lint / typecheck / build
pnpm lint
pnpm typecheck
pnpm build
```

> You can stick with npm/yarn if preferred, but remove `pnpm` metadata in `package.json` first.

Dev server exposes localized routes at `http://localhost:3000/en`, `http://localhost:3000/ru`, etc. Root `/` redirects to the visitor’s preferred language.

## Internationalisation
- `packages/i18n/config.ts` lists 50 supported locales + human-readable labels + RTL info.
- `packages/i18n/dictionaries` currently ships English and Russian; adding more only requires dropping `{locale}/common.json` files.
- `@allai/i18n/client` provides an `I18nProvider` React context; server utilities load dictionaries and metadata at build time.

## Working with KIE AI models
- `packages/services/kie` exposes `KieClient` for `/models`, `/tasks`, `/jobs`.
- `apps/web/src/features/dashboard/data/models.ts` mirrors high-value models (Sora 2, Veo 3, Imagen 4 Ultra, Nano Banana, Seedream 4K, Flux Kontext Max, AudioVerse Synthesis, etc.) with tags and highlights to drive UX filters.
- Replace mock history/inspiration seeds with actual responses once the Go backend relays KIE results (SSE/WebSocket hooks reserved in Zustand store).

## Next steps
1. **Hook Go backend** to the KIE SDK via Next route handlers (`app/api/...`) or direct server actions.
2. **Implement real auth & billing** (OAuth + Stripe/Usage billing) and surface quota/wallet data in the sidebar card.
3. **Expand dictionaries** to cover all 50 locales, integrate with a localization platform (Locize/Phrase).
4. **Telemetry**: wire Segment/Amplitude events, error tracking (Sentry) and user session replay on marketing pages.
5. **Testing**: add Playwright smoke tests for dashboard flows and Vitest for shared packages.

With this foundation the frontend team can work in parallel (UI kit, localization, API integration, SEO/content) while backend teammates finalize the Go services. Let me know if you want scaffolding for API routes, Playwright, or CI pipelines next.
