Xepelin Movie Database

Demo

xepelin-movie-database.vercel.app

Descripción del proyecto

Catálogo de películas que utiliza la API de The Movie DB (TMDB) como fuente de información y la API de pruebas de Zepelin para el manejo del flujo de autenticación.

Capturas

Notas de configuración

Para desarrollo local: npm run dev

Al ejecutar la API de pruebas de Zepelin, se debe configurar el puerto del servidor a 4000 en vez de 3000.

Estructura del proyecto

|-root
  |-pages # Páginas
    |-_app.jsx
    |-_document.jsx
    |-index.jsx # Home
    |-signin.jsx # Inicio de sesión
    |-signup.jsx # Registro
  |-public
  |-src
    |-api # Funciones para interactuar con API de TMDB
    |-app # Lógica de Redux
      |-services
        |-auth.js
      |-store.js
    |-components
      |-layout
      |-Hero.jsx
      |-Link.jsx
      |-MoviesCard.jsx
      |-MoviesCarousel.jsx
    |-hooks
    |-styles
      |-theme.js # Tema personalizado de Material UI
    |-utils

La aplicación utiliza Incremental Static Regeneration (ISR) de Next.js para regenerar la página en segundo plano, actualizando la información de la misma, mientras se mantiene un rendimiento óptimo.

Las siguientes funciones se utilizan para interacturar con la API de The Movie DB (TMDB):

• getPopularMovies - Obtener peliculas más populares
• getTopRatedMovies - Obtener peliculas mejor evaluadas
• getUpcomingMovies - Obtener próximos eventos
• getLatestMovies - Obtener últimos lanzamientos
• getMovieDetailsById - Obtener detalles de película
• getFavoritesMoviesWithDetails - Obtener peliculas favoritas

El flujo de autenticación se maneja con RTK Query, una herramienta muy útil para la descarga de datos y el cacheo de los mismos.

TODOs (Por hacer)

Debido al tiempo limitado para la realización de la prueba, algunas funcionalidades y requerimientos quedaron pendientes:

• Botón de cerrar diálogo
• Añadir/Quitar pelicula favorita
• Suite de pruebas
• Usar storybook para documentar componentes

Dependencias principales

• React - Una librería de Javascript para crear interfaces de usuario.
• NextJS - Un framework de React con renderizado híbrido estático y en el servidor.
• Material UI - Un sistema de diseño basado en componentes de React.
• Redux - Un contenedor de estado predecible para JS Apps.
• react-multi-carousel - Un componente de carrusel de React personalizable que soporta múltiples elementos y SSR.