GENERA
Plataforma de generación de material educativo con IA
El problema
Los docentes peruanos invierten horas creando material educativo desde cero: sesiones de aprendizaje, unidades, fichas, rúbricas y exámenes. GENERA automatiza este proceso usando múltiples modelos de IA, permitiendo al profesor enfocarse en enseñar.
Decisiones UX/UI
Se definió un Design System con Atomic Design (atoms, molecules, organisms). Los formularios usan una molécula rígida FormField con espaciado automático (4px label→control, 8px control→error). Las tarjetas siguen 3 variantes: ContentCard (info), ActionCard con gradiente sutil para generadores, y EmptyStateCard con borde dashed para estados vacíos. Border radius consistente de 24px. Paleta semántica: naranja=gamificación, azul=información, verde=éxito.
Arquitectura técnica
Next.js 15 con App Router. Multi-proveedor IA via LangChain con auto-fallback (OpenRouter → Anthropic → Mistral → Cohere → OpenAI). Estado global con Zustand (useAuthStore, useProfileStore, useDocumentStore). Base de datos PostgreSQL con Prisma ORM. Autenticación NextAuth.js con email OTP + Google OAuth.
Sistema de gamificación
Se implementó "GeneraCoins": progreso circular SVG dinámico por XP, indicadores de racha, sistema de canje con modal scrollable (max-h-[85vh]), y notificaciones con sonner para level-up y compras. El store Zustand dispara efectos visuales directamente para reactividad inmediata.
Seguridad y deuda técnica
Auditoría completa: 30 issues de seguridad identificados (4 críticos, 8 altos). Se resolvieron: bypass de autorización en documentos, múltiples instancias PrismaClient, XSS via dangerouslySetInnerHTML (sanitizado con sanitizeHtml), y timing attacks en códigos OTP. CI/CD con GitHub Actions + Railway.
Stack
Next.js 15 · React 19 · TypeScript · Tailwind CSS v4 · Prisma · PostgreSQL · LangChain · Zustand · NextAuth.js · Resend · Docker · Railway · GitHub Actions