Oposiciones Bomberos

Plataforma para la preparación de oposiciones de bombero que permite a los usuarios crear y practicar exámenes personalizados, practicar con preguntas falladas y participar en retos con la comunidad. Ademas puedes crear tus propias preguntas y temas para luego agregarlas a un reto o un mazo de flashcards.

Funcionalidades clave

• Creación de exámenes personalizados
• Práctica con preguntas previamente falladas
• Creación de mazos para estudio con flashcards
• Gestión completa de preguntas (crear, editar y eliminar)
• Organización y administración de temas
• Retos y competiciones con la comunidad
• Acceso a exámenes oficiales
• Sistema de aprendizaje adaptativo
• Seguimiento del progreso personal

Tecnologías utilizadas

Frontend

• React 18 con Next.js 14 (App Router)
• TypeScript para desarrollo tipado
• Tailwind CSS para estilos responsivos
• Shadcn UI y Radix UI para componentes accesibles
• Tanstack React Query para gestión de estado y peticiones
• Zustand para estado global
• React Hook Form con Zod para validación de formularios
• Framer Motion para animaciones

Backend

• Strapi CMS como headless CMS y sistema de gestión de contenidos
• API REST para comunicación entre frontend y backend

Autenticación y Seguridad

• NextAuth.js para autenticación
• JWT y manejo de sesiones

Visualización y Experiencia

• Recharts para visualización de datos
• DayJS para manejo de fechas
• Tailwind Merge y clsx para composición de clases
• Embla Carousel para carruseles

Pagos

• Stripe para procesamiento de pagos

Desafíos y soluciones técnicas

• Optimización de rendimiento:

  • Uso de React Server Components
  • Carga dinámica de componentes
  • Lazy loading con react-intersection-observer
  • Paginación eficiente con react-paginate

• Experiencia de usuario fluida:

  • Implementación de NextTopLoader para indicar carga entre páginas
  • Animaciones optimizadas con Framer Motion
  • Feedback visual con react-hot-toast

• Integración con API:

  • Consumo eficiente de API REST mediante Axios y Tanstack Query
  • Gestión de caché y revalidación de datos

• Manejo de datos complejos:

  • Tanstack Table y Virtual para tablas de datos eficientes
  • Importación y procesamiento de archivos Excel con read-excel-file

• Diseño responsive:

  • Enfoque mobile-first con Tailwind CSS
  • Componentes adaptables a diferentes dispositivos

• Gestión de estado:

  • Combinación de React Query para datos del servidor
  • Zustand para estado local
  • Estado basado en URL con parámetros de búsqueda

• Validación robusta:

  • Integración de React Hook Form con Zod para formularios a prueba de errores
  • Manejo avanzado de errores y validaciones