77 lines
4.7 KiB
Markdown
77 lines
4.7 KiB
Markdown
# 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.
|