BeMobile Marvel Challenge

Descripción

Este proyecto es una aplicación web creada con Next.js y TypeScript que utiliza la API de Marvel para mostrar información sobre personajes. La aplicación está optimizada para tiempos de carga y rendimiento, utilizando Cypress para pruebas end-to-end y Vitest para pruebas unitarias. La gestión del estado se realiza con useContext y useReducer, y el estilado se maneja con CSS puro. La aplicación está desplegada en Vercel.

Arquitectura y Estructura

Arquitectura

• Next.js: Framework de React utilizado para el desarrollo del frontend y la gestión de server components y route handlers.
• TypeScript: Lenguaje de programación utilizado para asegurar la calidad del código.
• CSS puro: Para el estilado de la aplicación. Utilizando la metodología BEM y SMACSS.
• useContext y useReducer: Para la gestión del estado de la aplicación.
• API Folder: Para gestionar la carga de datos desde la API de Marvel, con optimización de la carga a través de la precarga de la homepage.

Estructura del Proyecto

• test/: Contiene los tests de la aplicación, incluyendo pruebas unitarias y pruebas end-to-end.

• pages/: Contiene las páginas de la aplicación, como /home, /favorites, y /heroes[id].

• api/: Carpeta para gestionar las peticiones a la API y el manejo de datos mediante Server-Side Rendering (SSR). Incluye la implementación de una API propia para mejorar la carga de la aplicación.

• components/: Componentes reutilizables de la aplicación. Incluye subcarpetas:

  • common/: Componentes comunes reutilizables en toda la aplicación.
  • layout/: Componentes relacionados con el diseño y la estructura de la página.

• css/: Contiene archivos CSS siguiendo la metodología SMACSS para una mejor organización y modularidad. Subcarpetas:

  • /base/: Estilos básicos y globales.
  • /container-queries/: Consultas de contenedor para el diseño responsivo.
  • /layout/: Estilos relacionados con la estructura y diseño de la página.
  • /module/: Estilos para componentes modulares.
  • /pages/: Estilos específicos para cada página.
  • /state/: Estilos que reflejan el estado de los componentes.
  • /theme/: Estilos relacionados con la temática general de la aplicación.

• utils/: Utilidades y funciones auxiliares. Subcarpetas:

  • /constants/: Constantes utilizadas en la aplicación.
  • /fetching/: Funciones y helpers para la gestión de peticiones y datos.
  • /interfaces/: Interfaces TypeScript para tipado.

• context/: Contextos de React para la gestión del estado global y acciones para el reducer.

  • reducers/: Reducers para manejar la lógica del estado de la aplicación.

Instalación y Ejecución

1. Clonar el repositorio:

   git clone https://github.com/Jose1i1o/bemobile-marvel-challenge.git

2. Instalar dependencias:

   bun install
   pnpm install
   npm install

3. Configurar variables de entorno

Crea un archivo .env.local en la raíz del proyecto con el siguiente contenido:

   NODE_ENV="development" o "production"
   MARVEL_API="https://gateway.marvel.com/v1/public/"
   MARVEL_API_PUBLIC_KEY="your marvel api public key"
   MARVEL_API_PRIVATE_KEY="your marvel api private key"
   PUBLIC_API="tu url de desarrollo o producción"
   MY_PUBLIC_VERCEL_URL="tu url de producción"
   API_TIMEOUT=500000
   DEFAULT_LIMIT="2" # recomendado para desarrollo; usa 10 para producción --> latencia elevada

4. Scripts:

   # Para desarrollo
   bun run dev
   
   # Para testear build en local
   bun run build
   
   # Para inicio de build en local
   bun run start
   
   # Para pruebas unitarias (Vitest)
   bun run test
   
   # Para cobertura de pruebas (Vitest)
   bun run coverage
   
   # Para pruebas end-to-end (Cypress - Interfaz gráfica)
   bun run cy:open
   
   # Para pruebas end-to-end (Cypress - Ejecutar pruebas)
   bun run cy:run
   
   # Para analizar el tamaño del build
   ANALYZE=true bun run build
   

Despliegue

La aplicación está desplegada en Vercel en el siguiente enlace Vercel URL

Organización del Proyecto

El proyecto se gestionó a través de GitHub Projects y se dividió en 3 sprints. Puedes consultar los todos los detalles en el siguiente enlace

• Set up - Architecture
• Set up - Linters & Formatters
• Wireframes - Box model mobile
• Set up - Preparación de tema, estilos y componentes de diseño
• Accesibilidad - SP1
• API - Mostrar 50 primeros personajes
• View - Mobile
• Testing - SP1
• Box model desktop
• Búsqueda de personajes
• Set up - Modo desarrollo y modo producción
• Detail View
• View - Favoritos
• Accesibilidad SP2
• Limpiar consola
• Accesibilidad SP3
• Testing SP2
• Testing SP3
• README.md

Futuras implementaciones

• Implementación de notificaciones utilizando Sonner.
• Expansión del conjunto de pruebas, ya que el tiempo no permitió una cobertura completa.
• Autenticación de usuarios para mejorar la seguridad y personalización.
• Almacenamiento de datos en una base de datos propia para mayor control y eficiencia.
• Integración de SonarQube para la optimización de pruebas.
• Soporte para múltiples idiomas.
• Mejora de la interfaz de usuario para hacerla más accesible.
• Integración con otros servicios de terceros para enriquecer la experiencia del usuario.

Lecciones Aprendidas

• La capa gratuita de Vercel solo permite requests con un tiempo máximo de 10 segundos.
• La API de Marvel tuvo problemas con tiempos de carga que alcanzaban hasta los 2 minutos para los comics o más de 30 segundos para algunos personajes. Ej: Alta latencia

Ej: Imposibilidad de ejecutar query para 50 personajes

• La necesidad de optimizar la carga de la aplicación y la importancia de gestionar correctamente los tiempos de espera en las peticiones a la API.
• La importancia de tener un buen manejo de estado y optimización en las peticiones de datos para mejorar la experiencia del usuario.

Recursos

• Documentación Marvel Developer Portal
• Documentación de Next.js
• Documentación de Cypress
• Documentación de Vitest