github logoGitHub live previewLive Preview

Animi-Data

This application enables users to look up information on anime, whether currently airing or already released, using the Jikan API, which pulls data from the MyAnimeList website. It allows users to explore the highest-rated and most popular anime, sort anime by genres, or search specific titles using keywords. Additionally, users can filter results by media type to refine their searches further. Once an anime is found, clicking on the anime card provides more detailed information, including a synopsis and a trailer, making it easy to discover and learn more about any anime of interest.

Features

Users can search for anime sorted by their ranking on my anime list website.

Users can search or anime based on genre or by search for the name of the anime.

Users can select an anime and learn more about it as well as watch the trailer from that anime.

Lessons Learned

As this project is more of a re-creation project I have learnt better ways to display content and to make it more visually pleasing. With more knowledge on react it allowed me to structure my code to be more neater and easier to read.

I moved away from context api this time to try out something new for state management so I used Zustand. Once I used it I seen the benefits of using it and am more willing to try out different state managements in different projects.

I re-used TanStack Query in this project cause I liked the benefits it gives but I wasn't quiet sure how it worked so I wanted to learn a bit more on how it works and this allowed me to experiment on why it can do where I don't have to rely on useEffect to do all my fetching.

Working on this big projects lets me expand my CSS skills and IU learnt new concepts as well as try things I haven't tried before like clip-path to create my tooltips on each card.

Future features

If I continue to improve this application I would like to add a feature to create accounts to track different anime's and rank your top anime's. I would use firebase as the backend or if I feel up to the task I could use mongodb to store the information.

Working On / Research

Cleaning up UI

Fixing bugs

Deployment

This site is deployed to Render.

Other Projects