DEV Community

Tahrim Bilal
Tahrim Bilal

Posted on • Edited on

1 1

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.
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:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs