Luffer Anime

INTRODUCTION

Luffer Anime is a website about anime that use two APIs, Jikan and Danbooru, to show information and images about anime respectively. This website was made using the power of Typescript and Next JS and some libraries such as Zustand, Embla, Axios, React Select, React Youtube, React Accordion, React Feather, React Query, React Slider and React Toastify, It also laverages the power of Docker to avoid dependency issues over time.

DESIGN

This website started as a Figma design It consists of 3 versions: Desktop, Tablet and mobile.
The design of the home section for desktop was inspired (just a little 😇) from Netflix. It presents a clean design with the most relevant information, also you can find a volume control, a button to mute/unmute, a button to hide the UI, a carousel to select an anime, a search bar and some selectors and depending of the screen size, you can see a little of the synopsis. Rest of the webpage you can find a lot of information about the selected anime, also you can find a gallery at the end with a button to filter the most explicit images

CODE

The code for this website is not that simple, it has a lot of functionalities, specially the home section for desktop and the gallery

OVERVIEW

First at all the website start fetching data from Jikan API usings Axios, if there are errors, then these are handled by React Query, which is in charge of call React-Toast to notify the error. If all is ok then the fetched data will be cached and managed by React Query. Once the data is available it is going to be used along all the website.

HOME

In mobile and tablet code is pretty easy, but in desktop is harder, there are a youtube video on the background that need lots of attention depending if there is a trailer or not, change it when an anime is selected or when another trailer for the same anime is selected, also, it is connected with the volume control and mute button. Currently the home section is finished and works, but it still needs some fixes and changes.

GALLERY

The gallery was the hardest part because Danbooru API, the service from where I get the images, needs to receive the titles in a specific format to give a response. For example: "Fullmetal Alchemist: Brotherhood" should be passed as "fullmetal_alchemist" to Danbooru API. So the problem was to create an algorithm to process the title from Jikan API and transfom it into something with high oportunities to find the exact anime. Taking in account the amount of animes there are in Jikan API database and the still bigger amount of tags in Danbooru database, it was pretty difficult, but finally I create an algorithm which is amazingly accurate but still not perfect.

CONCLUSION

The website is fully ready to be used in production, however since I really love the final result I decide to keep this website under periodic maintenance, so I will be improving it actively