Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js

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…


This content originally appeared on DEV Community and was authored by Tahrim Bilal

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.

I’ll update the article as soon as Part II and Part III are complete!

Read the full article on Medium:

  • Part I
  • Part II (Coming Soon)
  • Part III (Coming Soon)

Stay tuned for updates!


This content originally appeared on DEV Community and was authored by Tahrim Bilal


Print Share Comment Cite Upload Translate Updates
APA

Tahrim Bilal | Sciencx (2024-10-19T21:50:46+00:00) Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js. Retrieved from https://www.scien.cx/2024/10/19/create-an-anime-dashboard-with-react-jikan-api-firebase-authentication-tailwindcss-chart-js/

MLA
" » Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js." Tahrim Bilal | Sciencx - Saturday October 19, 2024, https://www.scien.cx/2024/10/19/create-an-anime-dashboard-with-react-jikan-api-firebase-authentication-tailwindcss-chart-js/
HARVARD
Tahrim Bilal | Sciencx Saturday October 19, 2024 » Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js., viewed ,<https://www.scien.cx/2024/10/19/create-an-anime-dashboard-with-react-jikan-api-firebase-authentication-tailwindcss-chart-js/>
VANCOUVER
Tahrim Bilal | Sciencx - » Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/19/create-an-anime-dashboard-with-react-jikan-api-firebase-authentication-tailwindcss-chart-js/
CHICAGO
" » Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js." Tahrim Bilal | Sciencx - Accessed . https://www.scien.cx/2024/10/19/create-an-anime-dashboard-with-react-jikan-api-firebase-authentication-tailwindcss-chart-js/
IEEE
" » Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js." Tahrim Bilal | Sciencx [Online]. Available: https://www.scien.cx/2024/10/19/create-an-anime-dashboard-with-react-jikan-api-firebase-authentication-tailwindcss-chart-js/. [Accessed: ]
rf:citation
» Create an Anime Dashboard with React, Jikan API, Firebase Authentication, TailwindCSS & Chart.js | Tahrim Bilal | Sciencx | https://www.scien.cx/2024/10/19/create-an-anime-dashboard-with-react-jikan-api-firebase-authentication-tailwindcss-chart-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts