# 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 `` 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.