Luffer Anime

INTRODUCCIÓN

Luffer Anime es un sitio web sobre anime que utiliza dos APIs, Jikan y Danbooru, para mostrar información e imágenes sobre anime respectivamente. Este sitio web fue hecho utilizando el poder de Typescript y Next JS y algunas bibliotecas como Zustand, Embla, Axios, React Select, React Youtube, React Accordion, React Feather, React Query, React Slider y React Toastify. También aprovecha el poder de Docker para evitar problemas de dependencia con el tiempo.

DISEÑO

Este sitio web comenzó como un diseño en Figma. Consta de 3 versiones: Escritorio, Tablet y móvil.
El diseño de la sección de inicio para escritorio fue inspirado (justo un poco 😊) en Netflix. Presenta un diseño limpio con la información más relevante, también puedes encontrar un control de volumen, un botón para silenciar/desmutear, un botón para ocultar la interfaz de usuario, un carrusel para seleccionar un anime, una barra de búsqueda y algunos selectores y, dependiendo del tamaño de pantalla, puedes ver un poco de la sinopsis. En el resto de la página web puedes encontrar mucha información sobre el anime seleccionado, también puedes encontrar una galería al final con un botón para filtrar las imágenes más explícitas.

CÓDIGO

El código para este sitio web no es tan simple, tiene muchas funcionalidades, especialmente la sección de inicio para escritorio y la galería.

GENERAL

Primero que todo, el sitio web comienza a obtener datos de la API de Jikan usando Axios, si hay errores, entonces estos son manejados por React Query, que se encarga de llamar a React-Toast para notificar el error. Si todo está bien, entonces los datos obtenidos se almacenarán en caché y serán gestionados por React Query. Una vez que los datos estén disponibles, se utilizarán en todo el sitio web.

HOME

En el código de móvil y tablet es bastante fácil, pero en el escritorio es más difícil, hay un video de YouTube en el fondo que necesita mucha atención dependiendo de si hay un tráiler o no, cambiarlo cuando se selecciona un anime o cuando se selecciona otro tráiler para el mismo anime, también está conectado con el control de volumen y el botón de silencio. Actualmente la sección home esta terminada y funciona, pero todavia necesita varios ajustes y cambios.

GALERÍA

La galería fue la parte más difícil porque la API de Danbooru, el servicio de donde obtengo las imágenes, necesita recibir los títulos en un formato específico para dar una respuesta. Por ejemplo: "Fullmetal Alchemist: Brotherhood" debería pasarse como "fullmetal_alchemist" a la API de Danbooru. Entonces, el problema era crear un algoritmo para procesar el título de la API de Jikan y transformarlo en algo con altas probabilidades de encontrar el anime exacto. Teniendo en cuenta la cantidad de animes que hay en la base de datos de la API de Jikan y la cantidad aún mayor de etiquetas en la base de datos de Danbooru, fue bastante difícil, pero finalmente creé un algoritmo que es sorprendentemente preciso pero aún imperfecto. Obviamente, hubo otros problemas, pero nada destacable.

CONCLUSIÓN

El sitio web está completamente listo para ser utilizado en producción, sin embargo, dado que realmente me encanta el resultado final, decidí mantener este sitio web bajo mantenimiento periódico, así que estaré mejorándolo activamente.