Frontend (Next.js 15 scaffolding)¶
El frontend específico depende de cada implementation. Este folder documenta la convención compartida.
Stack recomendado por tipo de producto¶
| Producto | Stack | Por qué |
|---|---|---|
| SaaS web (legal, reviews, real estate, dev tools) | Next.js 15 + App Router + Tailwind + shadcn/ui | SSR, SEO, type-safe, batería completa |
| Desktop app (meeting summarizer, finance personal) | Tauri 2 + React | Mucho más ligero que Electron, native menus |
| Móvil (futuro) | React Native + Expo + Google AI Edge | Code share con web, edge inference |
| Embeddable widget (chatbot whitelabel) | Vite + React + Web Components | Iframe-friendly, lightweight |
Setup Next.js 15 estándar¶
npx create-next-app@latest <impl-name> \
--typescript \
--tailwind \
--app \
--src-dir \
--import-alias "@/*"
cd <impl-name>
npm install @clerk/nextjs \
@stripe/stripe-js stripe \
@tanstack/react-query \
zustand \
zod \
react-hook-form \
@radix-ui/themes \
lucide-react
# UI components con shadcn/ui
npx shadcn@latest init
npx shadcn@latest add button input dialog form card
Convenciones¶
- Auth: Clerk para todas las web apps (free tier hasta 10K MAU).
- Pagos: Stripe Billing con usage-based + suscripción.
- Estado server: TanStack Query (no más SWR salvo razón específica).
- Estado cliente: Zustand (no Redux salvo escala enorme).
- Forms: react-hook-form + zod schemas (mismos schemas que backend Pydantic vía codegen).
- UI components: shadcn/ui (no MUI, no Chakra).
- Iconos: lucide-react.
- Charts: Recharts o Tremor.
- Tablas: TanStack Table.
Variables de entorno frontend¶
# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
Deploy¶
| Plataforma | Cuándo |
|---|---|
| Vercel | Default. Free tier suficiente al inicio |
| Cloudflare Pages | Si quieres edge + más quota gratuita |
| Self-hosted (Coolify) | Si quieres EU hosting estricto |
Tauri (desktop apps)¶
npm create tauri-app@latest <impl-name>
cd <impl-name>
npm install
# El backend Rust auto-incluido; UI puede ser React/Vue/Svelte
npm run tauri dev
Para apps con inferencia local (meeting-summarizer, finance-personal): - El binario Tauri embedde Ollama o llama.cpp como sidecar. - Auto-update con Tauri updater (firmar con clave Apple Developer). - License key system propio (servidor minimal Stripe + lookup).