El objetivo de esta prueba técnica es que el candidato muestre sus habilidades con las herramientas que utilizará luego en su trabajo diario en chedoc. Está diseñado para verificar las habilidades de desarrollo front-end utilizando React y su capacidad para resolver problemas.
Pondremos el foco en obtener un código simple, bien diseñado y organizado, eficaz y testeado, así como el cumplimiento de todos los requerimientos solicitados.
- Se deberá clonar este repositorio para poder modificarlo y completarlo con la resolución del proyecto.
- Una vez que su código esté listo, suba el código a un repositorio público propio y envíenos el enlace a dicho repositorio para que lo revisaremos.
Se pueden utilizar herramientas como create-react-app y similares para inicializar el proyecto.
Usando la estructura vista en las imágenes proporcionadas como referencia, deberá crear un conjunto de pantallas y componentes React para crear la aplicación solicitada.
Se deberá incluir también README con instrucciones de configuración/ejecución y cualquier prueba u otra documentación que haya creado como parte de su solución.
Además, agregue la siguiente información a su archivo README:
- ¿Cómo decidió las opciones técnicas y arquitectónicas utilizadas como parte de su solución?
- ¿Hay alguna mejora que pueda hacer en su envío?
- ¿Qué haría de manera diferente si se le asignara más tiempo?
Necesitará construir las siguientes 3 páginas con React:
- Una página de "Inicio"
- Una página de "Series"
- Una página "Películas"
Cree componentes para cada parte de la página (por ejemplo, encabezado, contenido, pie de página, etc.). Dentro de la carpeta /assets podrá encontrar distintas imágenes para utilizar.
Las páginas también deben poder utilizarse en dispositivos móviles.
Puede suponer que no tiene que admitir navegadores heredados sin funciones como fetch o flexbox.
Ejemplo de referencia screens/1-home.jpg.
Esta será su pantalla index.html.
Deberá mostrar 2 bloques que conectarán con las páginas de "Series" y "Películas".
Ejemplo de referencia screens/2-series.jpg y screens/3-movies.jpg.
Para cada página debería leer los datos desde el archivo JSON feed/sample.json, luego:
- Mostrar los primeros 20 resultados (
entries). No es necesario paginar para ver más resultados. - Mostrar sólo si contienen el atributo
releaseYear>=2010 - Ordenar los resultados por el atributo
titlede manera ascendente con órden alfanumérico - Para la página de "Series" usar resultados con
programTypeigual aseries. - Para la página de "Películas" usar resultados con
programTypeigual amovie. - Los atributos que debes utilizar para mostrar en la caja de cada resultado son:
titleimages→Poster Art→url
- Al posicionar el mouse sobre cada resultado la caja debe reducir su opacidad y mostrar borde blanco.
- Al hacer click sobre el titulo deberá abrirse un popup mostrando la información completa:
titledescriptionreleaseYearimages→Poster Art→url
También necesitará manejar los estados de carga/loading y error de obtener los datos desde el archivo JSON:
- Estado de "Carga/Loading" screens/1.1-loading.jpg
- Estado de "Error" screens/1.2-error.jpg
- Filtro por año
- agregar arriba del listado de series/películas un input que permita filtrar películas por año.
- Paginación
- agregar un selector de cantidad de resultados a mostrar (5, 10, 20)
- permitir ir a próxima página de resultados o página anterior
- permitir moverse de página en página utilizando un parámetro en la URL
- Añadir detalle de películas y series
Para el desarrollo de la aplicación deberá utilizar:
- React / React Hooks
- Librería de estilos (styled-components, CSS modules, o similar)
- Mobile friendly
- Manejo de errores
- (opcional) Unit tests (jest, react-testing-library, o similar)
- (opcional) TypeScript
- (opcional) Integration/E2E tests
- (opcional) Deploy automático [Vercel]
- (opcional) Mejorar los estilos presentados
Importante saber:
- No es necesario crear un entorno de desarrollo/producción.
- Se pueden utilizar otras librerías que crea conveniente, aunque se recomienda proporcionar una solución básica ajustada a lo solicitado, ya que nuestro objetivo principal es evaluar sus habilidades con React y Javascript.
- Como empresa, creemos que la comunicación es la clave del éxito. Entonces, si algo no está claro, o si tiene dudas sobre la tarea, consultanos!
Happy coding!
