La prueba consiste en realizar una mini-webapp con un listado de películas con su buscador y formulario de puntaje.
Hay una posibilidad de ver una preview desplegada en Netlify https://creative-smakager-190ad7.netlify.app/. Pero como programador seguro que llama más la atención usar un poco de npm 😉. Es tan sencillo como clonar el proyecto git clone <url>, instalar las dependencias npm install y ejecutarlo npm start. (Cuidado, no tienes visible el API_KEY, ya que está en un .env)
- Diseñé un logo sencillito porque me hacía ilusión que el proyecto quedara más vistoso.
- Yo uso Prettier como Code formatter y me gusta ignorar el formateo de aquel fichero que contiene los Route de react-router-dom para poder disponerlas en una sola línea y que se ve más ordenado.
- He incluido mi propio controlador (Context + Hook) sobre el selector de tema, en donde por defecto se pone el tema oscuro (y no aparece el localStorage), y si lo cambias a otro, se guarda en el localStorage para saber cual es la preferencia del usuario.
- Lo mismo pasa con el control del idioma pero esta vez mezclo código propietario con la librería i18next y react-i18next. Las llamadas a la API se adaptan al idioma seleccionado y trae la información correctamente.
- Añadí servicios sencillos como por ejemplo el formateo de las fechas para visualizarlo mejor.
- Mejoré el SEO con el uso de la librería react-helmet en donde puedo controlar los Title dependiendo de en cual página entre.
- Añadí la librería just-debounce-it para controlar el número de peticiones. El buscador de películas contiene un Infinite Loading y cuando llegas abajo puede pasar que alguien haga un gesto extraño con el scroll y solicitar varias búsquedas a más películas. Por ello si me llegan 20 peticiones, la librería lo ignora y solo manda una.
- Gracias a la librería Rellax puedo hacer un effecto Parallax al logotipo central muy vistoso.
- Con MUI, las películas contienen una "LinearProgress" modificada para ser usada como puntuación. Con la variante determinate puedes añadir un valor en concreto, y el color se adapta a la puntuación porque puse un array que contiene los className correspondientes dependiendo del rango de valores.
Si se mira las carpetas del proyecto puede parecer que es un proyecto grande, y la razón es que está desarrollado con mucho code splitting (reutilizando componentes y ordenando cada parte en su carpeta), con un well code donde los Layout limitan su código al control de Handles y renderizado de elementos; ya que todo el resto lo controlan los Contexts, Hooks, servicios... Los estilos generales se encuentran en una carpeta styles concreta y el resto se encuentra en cada componente.
Los controladores más sencillos son con useState y los más complejos son con useReducer. El Infinite Loading usa Observables para saber cuando llegas al final de la página. Si intentas entras en /mylist o votar una película y no has iniciado sesión te saldrá un Dialog avisandote de que debes iniciar sesión para poder interactuar.
