This is a Nextjs, Tailwindcss project that displays a list of anime characters and their details. It uses server side rendering, API calls, and infinite scrolling to create a fast and responsive website.
- It uses Nextjs, a React framework that enables server side rendering, static site generation, and API routes.
- It uses Tailwindcss, a utility-first CSS framework that allows for rapid and customizable styling.
- It uses the shikimori api, to fetch data about anime characters and their shows.
- It uses infinite scrolling to load more data as the user scrolls down the page, improving the performance and user experience of the website. It also loads the data in small chunks, reducing the network and memory usage.
- It uses a little bit of hover animation on the cards, adding some interactivity and flair to the website.
You can check out the live demo of this project at https://anime-vault.vercel.app/ and see the anime characters and their details.
This project is based on the tutorial by JSMastery, with modifications and enhancements on frontend.
This project is still a work in progress, and I plan to add more features and functionalities to it in the future. Some of the improvements that I have in mind are:
- Searching: I want to add a search bar that allows the user to search for anime characters by name, genre, or show. This would make it easier for the user to find their favorite characters and explore new ones.
- Sorting: I want to add a sorting option that allows the user to sort the anime characters by popularity, rating, or alphabetical order. This would make it more convenient for the user to compare and contrast different characters and shows.
- Filtering: I want to add a filtering option that allows the user to filter the anime characters by criteria such as gender, age, hair color, eye color, etc. This would make it more fun and personalized for the user to discover and enjoy different anime characters.
I hope to implement these improvements soon and update the project accordingly. If you have any suggestions or feedback, please let me know. 😊