ICFES Master
Plataforma interactiva para practicar preguntas y estudiar temas del examen de estado ICFES (Saber 11) en Colombia. Arquitectura Feature-Based y Atomic Design con Next.js 15, React 19, Tailwind CSS y Supabase. Tres niveles de aprendizaje (bases, exámenes por materia, simulacro global de 200 preguntas en 3 horas), práctica por áreas (Matemáticas, Lenguaje, Ciencias Naturales, Ciencias Sociales, Inglés), material de estudio, temporizador configurable, seguimiento de estadísticas, desafíos diarios y clasificación, autenticación con email y Google, gamificación con más de 40 logros, planes de suscripción (Gratis, Pro, Premium, Anual), retroalimentación con explicaciones, contenido multimedia (imágenes, tablas, fórmulas con KaTeX) e integración con la API de OpenAI. Parte del contenido y la lógica de logros siguen en evolución.
Qué aprendí
- Organizar un producto grande con arquitectura por features y Atomic Design para escalar UI y dominio
- Autenticación y datos con Supabase (Auth email/Google y capa de servicios sobre la base)
- Estado global con Redux Toolkit en una app Next.js sin perder límites claros por módulo
- Contenido educativo rico: Markdown, fórmulas con KaTeX y assets multimedia en el mismo flujo
- Animaciones de interfaz con GSAP y acoplamiento controlado con React
- Integrar la API de OpenAI manteniendo límites de alcance (producto educativo vs. “para todo el mundo”)
Detalles Técnicos
- •Next.js 15 (App Router), React 19, TypeScript
- •Tailwind CSS 4, clsx y tailwind-merge para clases condicionales
- •Supabase JS: autenticación y cliente para datos
- •@reduxjs/toolkit y react-redux
- •GSAP y @gsap/react para animaciones
- •react-markdown; KaTeX y react-katex para fórmulas
- •SDK openai para integraciones basadas en IA