Prueba №14
La principal intención de esta tarea no es medir cuánto sabes de React, sino evaluar tu capacidad para aprender nuevas tecnologías en un tiempo relativamente corto. Idealmente, deberías dedicarle no más de 3 días. Sin embargo, si necesitas más tiempo, sigue trabajando hasta que la vacante se cierre.
Desarrolla una aplicación de una sola página para ver películas utilizando The Movie Database API.
Requisitos
Lista de películas populares:
- Al abrir la aplicación, debe mostrarse una lista de películas populares con paginación o carga dinámica (a tu elección).
- La página debe tener un campo de búsqueda. Al ingresar texto, deben mostrarse las películas correspondientes.
- Cada película en la lista debe mostrar los nombres de los géneros a los que pertenece (no los IDs).
Detalle de la película:
- Al hacer clic en una tarjeta de película, debe mostrarse una página con información detallada y una lista de películas recomendadas o similares (pueden ser ambas).
Favoritos:
- Permitir agregar películas a favoritos tanto desde la lista como desde la página de detalles.
- Guardar la lista de favoritos localmente (por ejemplo, en localStorage).
- Incluir una vista para ver y eliminar películas de favoritos.
- Mostrar en la tarjeta de la película y en su página de detalles si la película está en favoritos.
Importante
- Puedes usar componentes y/o utilidades ya existentes, como componentes de carga diferida o utilidades para sincronizar con localStorage.
- También hay bibliotecas de componentes listas para usar que pueden ayudar a acelerar el desarrollo.
- La apariencia de la aplicación también será evaluada. Intenta diseñar una buena interfaz de usuario y experiencia de usuario (UX).
- Opcionalmente, puedes cubrir el código con un conjunto necesario de pruebas.
- Usa JavaScript moderno.
- Añade instrucciones para ejecutar el proyecto y una breve descripción de la solución.
- Publica la aplicación en algún sitio, por ejemplo, GitHub Pages o Heroku.
- En cuanto a tecnologías, puedes elegir, pero React es obligatorio.
Materiales útiles
Documentación del API:
- https://developers.themoviedb.org/3
- https://developers.themoviedb.org/3/movies/get-popular-movies
- https://developers.themoviedb.org/3/search/search-movies
- https://developers.themoviedb.org/3/genres
- https://developers.themoviedb.org/3/movies/get-movie-details
- https://developers.themoviedb.org/3/movies/get-movie-recommendations
Recursos adicionales:
- React Video Course on egghead
- React Video Course on reacttraining
- Redux Video Course Part 1
- Redux Video Course Part 2
- Documentación de Redux
- Documentación de React
- Normalizr
- ImmutableJS
- ImmutableJS -
- ES2015
- Recursos útiles sobre Redux
- Artículo sobre react-router
- Ejemplo: Sound Redux
- Ejemplo: Solicitudes asíncronas en Redux
- Ejemplo: Enrutamiento y Redux
Por favor, no copies y pegues de los ejemplos!
Sin Comentarios