DEV Community: Tahrim Bilal

Build a Visual Thinking Tool with React Flow, Node.js, and MongoDB — MindMap

Tahrim Bilal — Mon, 09 Jun 2025 19:09:50 +0000

A minimal MERN stack mind mapping application to visually connect and organize ideas.
🧪 Try it live: Live Link!
🔗 GitHub @Tahrim19

✨ What is MindMap?

MindMap is an interactive mind mapping tool built with React Flow, shadcn/ui, and Node.js. Users can add nodes, create relationships, and organize their ideas visually — all while having their data saved securely to MongoDB.

🔧 Features at a Glance

🔐 Authentication (Register/Login)
🧠 Normal + Database Schema Nodes
🔗 Connect nodes with drag-and-drop edges
✏️ Edit node labels and custom schemas
📝 Rename mind maps
💾 Save/load your maps from a dashboard
🌐 Fully deployed frontend & backend

🧰 Tech Stack Breakdown

Layer	Technology
Frontend	React + TypeScript, TailwindCSS, React Flow, shadcn/ui
Backend	Node.js, Express, JWT Auth
Database	MongoDB Atlas
Deploy	Vercel , Render

📸 Screenshots

🚀 How I Built It

Here’s a quick look at how I put it all together:

1. React Flow + Custom Node Components

React Flow makes working with draggable and connected nodes simple. I also extended it with custom node types for database schemas.

const nodeTypes = {
  databaseSchema: CustomDatabaseSchemaNode,
};

2. Authentication with JWT

Users register/login and receive a JWT stored in localStorage. This token is sent with all secure requests.

3. REST API with Express

Maps are saved via a RESTful API to MongoDB, with endpoints like:

GET /api/mindmaps/:id
PUT /api/mindmaps/:id

4. UI with Tailwind + shadcn/ui

UI is built using shadcn/ui — giving me elegant and composable components like Dialogs, Buttons, Inputs, etc., with almost zero boilerplate.

🧑‍💻 Want to Try it Yourself?

🔗 GitHub Repo:

👉 github.com/Tahrim19/mind-map

🛠 Local Setup

git clone https://github.com/Tahrim19/mind-map.git
cd mind-map

# Start frontend
cd frontend
npm install
npm run dev

# Start backend
cd ../backend
npm install
node server.js

🔐 Add a .env file for the backend:

PORT=5000
MONGO_URI=your_mongodb_atlas_url
JWT_SECRET=supersecretkey

This is a great project if you want to learn:

How to work with React Flow
JWT-based auth systems
Creating custom node UIs
Combining frontend + backend in production-ready deployments

💡 Drop a star ⭐ on the GitHub repo if this helped you or inspired your own visual thinking app!

From YouTube to Insights: Using Gen AI to Query Video Transcripts

Tahrim Bilal — Sat, 19 Apr 2025 15:01:53 +0000

📌 Problem Statement: Video Overload, Information Lost

In today’s digital age, we consume a massive amount of video content—tutorials, lectures, interviews, podcasts, and more. But revisiting a 30-minute YouTube video just to find one key idea? That’s inefficient.

Wouldn’t it be powerful if you could just ask a question and instantly get an answer from a video?

That’s exactly the problem I tackled in my recent Kaggle notebook using Generative AI + Embeddings + vector search.

🧠 The Solution: Gen AI + Embedding Search on YouTube Transcripts

The goal was to build a pipeline that:

Fetches a YouTube video's transcript
Splits it into manageable chunks
Embeds those chunks using a Gemini embedding model
Stores them in ChromaDB for fast similarity search
Uses a Generative AI model to answer natural language queries from the user

📄Implementation Breakdown

1. Fetching the Transcript

We use youtube_transcript_api to extract the transcript directly from a YouTube video:

from youtube_transcript_api import YouTubeTranscriptApi

video_url = 'https://www.youtube.com/watch?v=pTB0EiLXUC8'
video_id = video_url.split('v=')[1]
transcript_text = YouTubeTranscriptApi.get_transcript(video_id, languages=['en'])

2. Chunking the Transcript

To make it easier to process and embed, we break the transcript into smaller parts:

def chunk_transcript(transcript, chunk_size=500):
    chunks, current_chunk = [], ""
    for item in transcript:
        text = item['text']
        if len(current_chunk) + len(text) <= chunk_size:
            current_chunk += " " + text
        else:
            chunks.append(current_chunk.strip())
            current_chunk = text
    if current_chunk:
        chunks.append(current_chunk.strip())
    return chunks

3. Embedding and Storing in ChromaDB

We embed each chunk using Google’s Gemini embedding model and store them in a ChromaDB collection for retrieval later:

embedding_response = client.models.embed_content(
    model="models/text-embedding-004",
    contents=chunks
)

embeddings = [e.values for e in embedding_response.embeddings]

for emb, meta in zip(embeddings, [{'chunk': c} for c in chunks]):
    collection.add(
        ids=[str(meta['chunk'])],
        embeddings=[emb],
        metadatas=meta,
        documents=[meta['chunk']]
    )

4. Querying with Generative AI

When a user enters a question, we:

Embed the query
Search for relevant chunks
Feed the results into Gemini to generate a concise answer

def generate_answer(query, relevant_chunks):
    context = " ".join(relevant_chunks)
    prompt = f"Question: {query}\n\nContext: {context}"
    response = client.models.generate_content(
        model="gemini-2.0-flash", 
        contents=prompt
    )
    return response.candidates[0].content.parts[0].text

5. User Query Execution

This final step uses the RAG pipeline to return an LLM-generated answer that’s directly grounded in the original transcript content

user_query = 'what problem did object oriented programming came to solve?'
relevant_chunks = get_relevant_chunks(user_query, collection)
if relevant_chunks:
    answer = generate_answer(user_query, relevant_chunks)
    print("Answer:", answer)
else:
    print("No relevant chunks found to generate an answer.")

🔮 Future Possibilities

Multilingual support: Transcripts in multiple languages and translation layers.
Transcript availability: Not all YouTube videos have transcripts or English subtitles. Audios can be extracted and then can be converted into transcripts using speech-to-text models.
Summarization layer: Automatically summarize full videos.

🏁 Conclusion

This project demonstrates how Gen AI and vector databases can work together to transform passive video content into an interactive knowledge base.

With just a YouTube link, you can now ask intelligent questions and get answers backed by the video transcript—all powered by embeddings and Gemini.

Check out the full notebook on Kaggle and try it out with your favorite videos!
upvote the notebook if you want!
Kaggle notebook link

Supervised and Unsupervised Learning in Machine Learning

Tahrim Bilal — Thu, 09 Jan 2025 21:10:00 +0000

Machine Learning (ML) has become a cornerstone of technological advancements, driving innovations across industries. At its core, ML can be categorized into two primary paradigms: Supervised Learning and Unsupervised Learning.

Supervised Learning: Training with Labels

Supervised learning models are trained on labeled datasets, where the input data is paired with corresponding output labels. This approach enables the model to learn the relationship between inputs and outputs, making it a powerful tool for prediction and classification.

1. Regression Models: Predicting Continuous Outcomes

When dealing with continuous target variables, regression models are used. They help establish relationships between dependent and independent variables.

Types of Regression Models:
1. Linear Regression: Models the relationship using a straight line. Variants includes multiple regression and polynomial regression.
2. Decision Trees: A tree-like structure where more nodes lead to higher precision.
3. Random Forests: An ensemble technique combining multiple decision trees to minimize error using the "majority wins" approach.
4. Neural Networks: Multilayered models capable of capturing complex patterns.

2. Classification: Predicting Discrete Outcomes

Classification models output discrete categories (e.g., 0 or 1). These are used for tasks like spam detection or medical diagnosis.

Types of Classification Models:
1. Logistic Regression: Predicts probabilities for binary outcomes.
2. Support Vector Machines (SVMs): Classifies data points in an N-dimensional space.
3. Naive Bayes: A probabilistic model based on Bayes' theorem.
4. Decision Trees, Random Forests, and Neural Networks: These follow similar principles to regression models but produce discrete outputs.

Unsupervised Learning: Exploring Data Without Labels

Unsupervised learning models work with unlabeled data, identifying patterns from input data without relying on labeled outcomes.

1. Clustering: Grouping Data Points

Clustering involves organizing data into meaningful groups based on similarities. Applications include customer segmentation, fraud detection, and document classification.

Common Clustering Techniques:
- K-means: Groups data into a specified number of clusters.
- Hierarchical Clustering: Creates a tree of clusters.
- Mean Shift: Identifies dense areas of data points.
- Density-Based Clustering: Groups based on regions of high density.

2. Dimensionality Reduction: Simplifying Features

Dimensionality reduction techniques reduce the number of features in a dataset while retaining critical information. This is crucial for simplifying complex datasets and improving computational efficiency.

Popular Techniques:
- Feature Elimination: Removes irrelevant features.
- Feature Extraction: Creates new features from existing ones.
- Principal Component Analysis (PCA): A widely used method for reducing dimensionality.

Conclusion

Supervised and unsupervised learning are foundational to machine learning, each with its unique strengths and applications. While supervised learning shines in prediction tasks with labeled data, unsupervised learning excels in discovering patterns from unlabeled datasets. Together, they enable a wide range of solutions, from personalized recommendations to anomaly detection.

Note: This blog post was generated with the help of AI, using detailed notes provided by the author as the foundation.

How to Integrate Gemini API with React.js: A Step-by-Step Guide.

Tahrim Bilal — Fri, 06 Dec 2024 22:53:39 +0000

Learn how to integrate Gemini API in your React.js project to create an interactive chatbot experience.

Since I won't dive deep into styling, refer to the GitHub repository for the stylesheet. You can also see the demo here.

Without further ado, let’s get started!

Getting Your Gemini API Key:

Before integrating the Gemini API into your React.js project, you need to obtain an API key. Follow these steps:

Visit Google AI Studio

Open your browser and navigate to the Google AI Studio page.
Access Developer Documentation

Once you’re on the Google AI Studio homepage, locate the sidebar. From the options, select “Developer Documentation.”
Request an API Key

Within the Developer Documentation page, look for a button labeled “Get a Gemini API Key.” Click on it.
Authenticate and Confirm

If you’re not already signed in, log in with your Google account. You may need to complete some authentication steps or agree to terms and conditions before proceeding.
Copy Your API Key

Once the key is generated, copy it. Keep it safe — this key will be required to authenticate your requests when using the Gemini API in your React.js project.

Tip: If you want to check your API key, there will be a curl command on the documentation page. Replace the YOUR_API_KEY placeholder with the API key you obtained from the Google AI Studio. Open Git Bash and paste the modified curl command. If the API key is valid and working, you should receive a response in JSON format.

Setup React.js Project:

Set up a project using CRA and install required libraries. Replace my-app with the name of your project.

npx create-react-app my-app
npm install @google/generative-ai 
npm install react-markdown
npm install react-icons

Get rid of unnecessary files and make a components folder in the src folder.

Also, in the root directory, make an .env file to safely store the API key.

REACT_APP_GEMINI_API_KEY=YOUR_API_KEY_HERE

We will use this whenever we need our API Key:

process.env.REACT_APP_GEMINI_API_KEY

Setting up the Model:

Make a Model.jsx file in the components folder. This will contain the code to define a setup to interact with the Gemini API using a generateContent function.

// components/Model.jsx
const { GoogleGenerativeAI } = require("@google/generative-ai");

const genAI = new GoogleGenerativeAI(process.env.REACT_APP_GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

export const generateContent = async (prompt) => {
    const result = await model.generateContent(prompt);
    console.log(result.response.text());
    return result.response.text; // return the response
}

Home.jsx:

In the components folder, make Home.jsx. This file will define the logic for:

Getting user input and sending it to the model.
Logic for clear and send buttons.
Displaying chat history.

Here’s the code:

import React, { useState } from "react";
import { IoIosSend } from "react-icons/io";
import { generateContent } from './Model'; 
import ReactMarkdown from 'react-markdown'; // to render markdown responses
import './home.css'

export default function Home() {
  const [userInput, setUserInput] = useState('');
  const [response, setResponse] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleUserInput = (e) => {
    setUserInput(e.target.value);
  };

  const handleClear = () => {
    setUserInput('');
    setResponse([]);
    setIsLoading(false);
  };

  const handleSubmit = async () => {
    if (!userInput.trim()) {
      setResponse([{ type: "system", message: "Please enter a prompt.." }]);
      return;
    }

    setIsLoading(true);
    try {
      const res = await generateContent(userInput);
      setResponse(prevResponse => [
        ...prevResponse,
        { type: "user", message: userInput },
        { type: "bot", message: res()},
      ]);
      setUserInput('');
    } catch (err) {
      console.error("Error generating response:", err);
      setResponse(prevResponse => [
        ...prevResponse,
        { type: "system", message: "Failed to generate response" },
      ]);
    } finally {
      setIsLoading(false);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleSubmit();
    }
  };

  return (
    <div className="chat-container">
      {response.length === 0 ? (
        <h1>Got Questions? Chatty's Got Answers.</h1> 
      ) : (
        <div className="chat-history">
          {response.map((msg, index) => (
            <p key={index} className={`message ${msg.type}`}>
              <ReactMarkdown>{msg.message}</ReactMarkdown>
            </p>
          ))}
          {isLoading && <p className="loading-text">Generating response...</p>}
        </div>
      )}

      <div className="input-container">
        <button onClick={handleClear} className="clear-btn">Clear</button>

        <input
          type="text"
          value={userInput}
          onChange={handleUserInput}
          onKeyDown={handleKeyPress}
          placeholder="Type your message here..."
          className="chat-input"
        />

        <button onClick={handleSubmit} className="send-btn">
          <IoIosSend />
        </button>
      </div>
    </div>
  );
}

This is what we will be seeing!

Why Use React Markdown?

We use React Markdown because the Gemini API returns responses formatted in Markdown. This library helps render it correctly on the page, ensuring that any Markdown syntax, such as links or bold text, is displayed properly in the UI.

Explanation:

We created three local states: userInput, response, and isLoading.

userInput: Stores the current value typed by the user in the input field.
response: Stores the chat history, including messages from both the user and the bot.
isLoading: Tracks whether the app is waiting for a response from the Gemini API.

Functions:

handleUserInput(): Updates the userInput state whenever the user types in the input field.
handleClear(): Resets the states when the user clicks the Clear button, effectively clearing the chat.
handleSubmit(): Checks if the input is empty, sets the loading state, fetches the AI response, updates the chat history, handles errors, and resets the input field and loading state once done.
handleKeyPress(): If the Enter key is pressed, it prevents the default action (form submission) and triggers the handleSubmit function.

Conclusion:

In this tutorial, we’ve learned how to integrate the Gemini API into a React.js app. We covered setting up the project, handling user input, interacting with the API, and displaying responses using React’s state management and react-markdown.

To further enhance your project, you can add additional functionality such as user authentication, saving chat history for persistence even after a page refresh, and more.

Happy Coding! 😊

Mastering Recharts: A Comprehensive Guide to Creating Charts in ReactJS

Tahrim Bilal — Tue, 05 Nov 2024 19:43:35 +0000

If you're working with ReactJS and want to bring data to life with charts, Recharts offers a great way to create stunning visualizations with ease. In this guide, we’ll use Recharts and Fakestore API to fetch and display product data in a bar chart and a pie chart.
You can also check github repository and live demo. Lets get started!

🛠️ Setup: Starting with Vite

First, let’s create a new React app using Vite.

Install Vite with the following command:

   npm create vite@latest

Follow the prompts:
- Project name: charts
- Framework: React
- Variant: JavaScript
Move to your project folder, install dependencies, and start the server:

   cd charts
   npm install
   npm run dev

With your project running, let's create two components: one for a Product Price Bar Chart and another for a Product Categories Pie Chart.

📊 Step 1: Creating the Product Price Bar Chart (`ProductChart.jsx`)

In this component, we’ll fetch product data from the API and visualize it with a bar chart.

Code

Create a file in src/components/ProductChart.jsx with the following code:

// src/components/ProductChart.jsx
import React from 'react';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

export default function ProductChart() {
  const [products, setProducts] = useState([]);

  const fetchData = async () => {
    try {
      const response = await axios.get('https://fakestoreapi.com/products');
      setProducts(response.data);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // Prepare data for chart
  const chartData = products.map(item => ({
    name: item.id,
    price: item.price,
  }));

  return (
    <>
      <div className='product'>
        <h3 className='product-heading'>PRODUCT PRICE BAR CHART</h3>
        <ResponsiveContainer width='95%' height={450}>
          <BarChart 
            data={chartData}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 20,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" label={{ value: "Product ID", position: "bottom", offset: -5 }}  />
            <YAxis label={{ value: "Price", angle: -90, position: "insideLeft", offset: -10 }} />
            <Tooltip />
            <Bar dataKey="price" fill="#eca1ac" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </>
  );
}

Explanation

ResponsiveContainer: Makes the chart responsive by setting its width to 95% and height to 450px.
BarChart: The main component that renders the bar chart.
CartesianGrid: Adds a background grid for readability.
XAxis & YAxis: Set up the labels for product ID and price.
Tooltip: Shows data when hovering over the bars.
Bar: Renders the bars, with each bar representing a product price.

🥧 Step 2: Creating the Product Categories Pie Chart (`CategoryChart.jsx`)

In this component, we’ll fetch product data, count the products in each category, and visualize them using a pie chart.

Code

Create a file in src/components/CategoryChart.jsx with the following code:

// src/components/CategoryChart.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { PieChart, Pie, Tooltip, Cell, ResponsiveContainer, Legend } from 'recharts';

export default function CategoryChart() {
    const [chartData, setChartData] = useState([]);

    const fetchData = async () => {
        try {
            const response = await axios.get('https://fakestoreapi.com/products');
            categoryCount(response.data); 
        } catch (err) {
            console.log(err);
        }
    };

    const categoryCount = (products) => {
        const count = {};
        products.forEach((product) => {
            if (count[product.category]) {
                count[product.category]++;
            } else {
                count[product.category] = 1; 
            }
        });

        const chartData = Object.keys(count).map((category) => ({
            name: category,
            value: count[category],
        }));

        setChartData(chartData); 
    };

    useEffect(() => {
        fetchData();
    }, []);

    const COLORS = ['#f9cdd4', '#eca1ac', '#e27589', '#b25b6e', '#7c3042'];

    return (
        <div>
            <h3 className='product-heading'>PRODUCT CATEGORIES PIE CHART</h3>
            <ResponsiveContainer width='80%' height={450}>
                <PieChart>
                    <Pie
                        data={chartData}
                        cx="45%"
                        cy="50%"
                        outerRadius={200}
                        fill="#8884d8"
                        dataKey="value"
                    >
                        {chartData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                    </Pie>
                    <Tooltip />
                    <Legend layout="vertical" align="right" verticalAlign="middle"/>              
                </PieChart>
            </ResponsiveContainer>
        </div>
    );
}

Explanation

categoryCount Method: Counts the number of products in each category and formats the result for display in the pie chart.
PieChart & Pie: The main components that render the pie chart.
Cell: Adds color to each pie slice, defined by the COLORS array.
cx, cy, and outerRadius: Position and size the pie chart within the container.

🖥️ Step 3: Rendering Components in `App.js`

To see your charts in action, you need to render these components in App.js.

Code

Update src/App.js as follows:

// src/App.js
import React from 'react'
import ProductChart from './components/ProductChart'
import './app.css'
import CategoryChart from './components/CategoryChart'

export default function App() {
  return (
    <div className='app'>
      <ProductChart/>
      <CategoryChart/>
    </div>
  )
}

With this in place, you should see both the bar chart and pie chart on your screen!

🎉 Conclusion

Congratulations! You've successfully used Recharts to create dynamic and responsive data visualizations in a React app. We’ve covered:

Setting up a React project with Vite
Fetching and processing data from Fakestore API
Creating bar and pie charts using Recharts

Recharts makes building interactive visualizations simple and customizable. Experiment with other chart types and data sources to create even more engaging visualizations!

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

Tahrim Bilal — Sat, 19 Oct 2024 21:50:46 +0000

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

ReactJS: Frontend framework.
TailwindCSS: Modern styling framework.
Jikan API: Source for anime data.
Chart.js: For data visualization.
Axios: API request handler.
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

Create a Notes App Using React and Local Storage

Tahrim Bilal — Thu, 17 Oct 2024 08:15:10 +0000

Are you looking to build a simple yet powerful Notes app using React? In this article, I walk you through the process of creating a fully functional Notes app that stores your data locally using the browser’s local storage feature.

You'll learn how to:

Set up a basic React project from scratch
Manage state using the React Context API.
Implement local storage by making a custom hook.
Create a clean, responsive UI for CRUD operations

You can preview the final app here, and for those looking to speed up the process, you can grab all the necessary styling from the GitHub repository

Read the full article on Medium!

DEV Community: Tahrim Bilal

Build a Visual Thinking Tool with React Flow, Node.js, and MongoDB — MindMap

✨ What is MindMap?

🔧 Features at a Glance

🧰 Tech Stack Breakdown

📸 Screenshots

🚀 How I Built It

1. React Flow + Custom Node Components

2. Authentication with JWT

3. REST API with Express

4. UI with Tailwind + shadcn/ui

🧑‍💻 Want to Try it Yourself?

🔗 GitHub Repo:

🛠 Local Setup

From YouTube to Insights: Using Gen AI to Query Video Transcripts

📌 Problem Statement: Video Overload, Information Lost

🧠 The Solution: Gen AI + Embedding Search on YouTube Transcripts

📄Implementation Breakdown

1. Fetching the Transcript

2. Chunking the Transcript

3. Embedding and Storing in ChromaDB

4. Querying with Generative AI

5. User Query Execution

🔮 Future Possibilities

🏁 Conclusion

Supervised and Unsupervised Learning in Machine Learning

Supervised Learning: Training with Labels

1. Regression Models: Predicting Continuous Outcomes

2. Classification: Predicting Discrete Outcomes

Unsupervised Learning: Exploring Data Without Labels

1. Clustering: Grouping Data Points

2. Dimensionality Reduction: Simplifying Features

Conclusion

How to Integrate Gemini API with React.js: A Step-by-Step Guide.

Learn how to integrate Gemini API in your React.js project to create an interactive chatbot experience.

Getting Your Gemini API Key:

Setup React.js Project:

Setting up the Model:

Home.jsx:

Why Use React Markdown?

Explanation:

Functions:

Conclusion:

Mastering Recharts: A Comprehensive Guide to Creating Charts in ReactJS

🛠️ Setup: Starting with Vite

📊 Step 1: Creating the Product Price Bar Chart (ProductChart.jsx)

Code

Explanation

🥧 Step 2: Creating the Product Categories Pie Chart (CategoryChart.jsx)

Code

Explanation

🖥️ Step 3: Rendering Components in App.js

Code

🎉 Conclusion

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

Features

Tech Stack

Guide Overview

Create a Notes App Using React and Local Storage

📊 Step 1: Creating the Product Price Bar Chart (`ProductChart.jsx`)

🥧 Step 2: Creating the Product Categories Pie Chart (`CategoryChart.jsx`)

🖥️ Step 3: Rendering Components in `App.js`