Loading repository data…
devatorres / repository
iglobal-film
🎬 Mini-webapp con un listado de películas con su buscador y formulario de puntaje.
#css#hooks#i18next#just-debounce-it#lazy-loading#material-ui
Live repository statistics
★ 1Stars
⑂ 0Forks
◯ 8Open issues
◉ 1Watchers
39/100
OPENREPOHUB HEALTH SIGNAL
Limited signals
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
30
Community adoption25% weight
0
Maintenance state20% weight
40
License clarity10% weight
100
Project information10% weight
100
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
iGlobal Film 
📋 Descripción
La prueba consiste en realizar una mini-viteapp con un listado de películas con su buscador y formulario de puntaje.
🔨 Cómo arrancarlo
Hay una posibilidad de ver una preview desplegada en Netlify https://silly-squirrel-fbbe1c.netlify.app/. Pero como programador seguro que llama más la atención usar un poco de yarn 😉. Es tan sencillo como clonar el proyecto git clone <url>, instalar las dependencias yarn install y ejecutarlo yarn dev. (Cuidado, no tienes visible el API_KEY, ya que está en un .env)
📚 El Por qué de algunas cosas
- 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-async 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.
💻 Cómo se ha desarrollado
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.
