Visión General del Frontend

El frontend es una SPA React 19 en apps/web. Corre en el puerto 5173 en desarrollo (Vite HMR).

Stack

Tecnología	Versión	Uso
React	19	Componentes y hooks
Vite	6	Build + HMR
TypeScript	~5.6	Tipos estrictos
MUI (Material UI)	v7	Componentes UI base
Tailwind CSS	v4	Utility classes y responsive
Redux Toolkit	latest	Estado global
RTK Query	latest	Data fetching + cache
React Router DOM	v7	Routing con loaders

Features implementadas

Feature	Ruta(s)	Guard	Estado
`auth`	`/login`, `/signup`, `/forgot-password`	— (public)	✅
`catalog`	`/`, `/courses`, `/courses/:slug`	— / ProtectedRoute	✅
`player`	`/learn/:pathSlug/:lessonSlug`	ProtectedRoute + AccessGate	✅
`quiz`	`/learn/:pathSlug/quiz`	ProtectedRoute + AccessGate	✅
`dashboard`	`/dashboard`	ProtectedRoute	✅
`certificates`	`/certificates`, `/verify/:uuid`	ProtectedRoute (verify: public)	✅
`onboarding`	`/onboarding/fluency-test`	ProtectedRoute	✅
`payments`	`/pricing`, `/checkout`	— / ProtectedRoute	✅
`tutor`	`/dashboard/tutor`	ProtectedRoute	✅
`tutor-ia-panel`	`/learn/:pathSlug/:lessonSlug` (panel lateral)	ProtectedRoute + AccessGate	✅
`corporate`	`/corporate/*`	CorporateGuard	✅
`admin`	`/admin/*`	AdminGuard	✅
`creator-studio`	`/creator/*`	CreatorGuard	✅

Portales y Layouts

Cuatro portales independientes, cada uno con guard y layout propio:

PublicLayout     ← Landing, catálogo, verify (sin auth)
AuthLayout       ← Login, signup (canvas animation, sin sidebar)
AppLayout        ← Estudiante autenticado — /dashboard, /learn/*
CreatorLayout    ← Creator Studio — /creator/* (CONTENT_ADMIN+)
AdminLayout      ← Panel admin — /admin/* (SUPER_ADMIN)
CorporateLayout  ← Portal corporativo — /corporate/* (CORPORATE_ADMIN+)

Guards de portal

ProtectedRoute   → cualquier usuario autenticado
CreatorGuard     → CONTENT_ADMIN | SUPER_ADMIN
AdminGuard       → SUPER_ADMIN
CorporateGuard   → CORPORATE_ADMIN | SUPER_ADMIN

Creator Studio (`/creator/*`)

Portal exclusivo para instructores aprobados (CONTENT_ADMIN):

Ruta	Página	Descripción
`/creator`	`CreatorPortalPage`	Hub principal — accesos rápidos
`/creator/paths`	`CreatorPathsPage`	Mis cursos y paths publicados
`/creator/students`	`CreatorStudentsPage`	Mis estudiantes y progreso
`/creator/reviews`	`CreatorReviewsPage`	Reseñas recibidas
`/creator/badges`	`CreatorBadgesPage`	Mis badges de instructor
`/creator/guidelines`	`CreatorGuidelinesPage`	Guías de calidad y políticas
`/creator/editor/paths/:id`	`AdminPathEditor`	Editor de path
`/creator/editor/modules/:id`	`AdminModuleEditor`	Editor de módulo
`/creator/editor/lessons/:id`	`AdminLessonEditor`	Editor de lección
`/creator/editor/quizzes/:id`	`AdminQuizEditor`	Editor de quiz

El CreatorLayout incluye ProfileCard y UserMenu en el sidebar. Los editores de contenido viven en /creator/editor/* — no en /admin/.

Sprint 6: Los editores de contenido migraron de /admin/editor/* a /creator/editor/*. Cualquier enlace antiguo a /admin/editor/ debe actualizarse.

Tutor IA — Panel lateral (`/learn/*`)

Implementado en Sprint 7. Panel lateral de 380px accesible desde el player de lección:

Característica	Detalle
Transporte	SSE (Server-Sent Events) — streaming en tiempo real
Ancho del panel	380px, colapsable
Contexto	Consciente del path, módulo y lección activos
Historial	Conversaciones persistidas por usuario
Rating	El usuario puede valorar cada respuesta del tutor
Límites	Por plan — FREE tiene cuota diaria reducida

El componente principal es TutorIAPanel en apps/web/src/components/tutor/. Se renderiza dentro de AppLayout solo en rutas /learn/* cuando el usuario tiene acceso.

Store Redux

El store está en apps/web/src/store/. Estructura:

store/
  index.ts           ← configureStore con todos los reducers
  api/
    baseApi.ts       ← createApi con baseUrl y auth interceptor
    adminApi.ts      ← endpoints admin RTK Query
    (otros endpoints por feature)
  slices/
    authSlice.ts     ← user, token, isAuthenticated
    uiSlice.ts       ← modales, notificaciones, loading states

Design System

Tokens CSS en apps/web/src/styles/tokens.css:

--pr: #7C3AED;   /* Violeta primario NappAI */
--pr2: #5B21B6;  /* Hover */
--t1: #160D2E;   /* Texto principal */
--t2: #6B6080;   /* Texto secundario */
--bg: #FFFFFF;   /* Fondo */
--bg2: #F8F7FF;  /* Fondo suave */

Ver design system completo.