Let’s build a project using the Jikan API—an anime API. In this tutorial, we’ll learn to render charts using Chart.js, style using TailwindCSS, and, of course, use ReactJS! We’ll also implement Firebase authentication to personalize the user experience.
Click here to see final app
Github Repository

Features

• Explore Trending Anime: View top trending anime with pagination.
• Detailed View: Click on any anime to view its synopsis, episodes, status, genres, and more.
• Top Anime & Manga Rankings: Paginated rankings of top anime and manga.
• Explore Magazines and Genres: Discover various anime genres and top magazines.
• Charts & Statistics: Visualize anime data with interactive charts.
• Responsive Design: Optimized for mobile and desktop screens.
• Custom Styles: Featuring a clean, pastel-themed UI with custom scrollbars.
• Search Functionality: Search for anime by title.
• Firebase Authentication: Allow users to log in and personalize their experience.

Tech Stack

1. ReactJS: Frontend framework.
2. TailwindCSS: Modern styling framework.
3. Jikan API: Source for anime data.
4. Chart.js: For data visualization.
5. Axios: API request handler.
6. Firebase: For user authentication.

Guide Overview

This project is broken down into three parts:

• Part I: Implementing charts, the header, sidebar, and pages to display anime and manga lists.
• Part II: Building detailed anime views, search functionality, and other feature pages.
• Part III: Adding Firebase authentication to personalize the app for users.

Read the full article on Medium:

• Part I
• Part II
• Part III