Project 4 — Dashboard with API in React (Full Implementation)

by

🧭 Project Introduction

Dashboards are one of the most common real-world React applications. They are used for:

  • Admin panels
  • Analytics dashboards
  • CRM systems
  • Survey & reporting tools

In this project, we will build a real dashboard that:

  • Fetches data from an API
  • Uses Axios
  • Handles loading & errors
  • Displays data in a clean UI
  • Follows best practices

🎯 Features of the Dashboard

✔ Fetch data from API
✔ Axios integration
✔ Loading state
✔ Error handling
✔ Reusable components
✔ Clean folder structure
✔ Production-ready patterns

📁 Project Folder Structure (Best Practice)

src/
 ├── components/
 │    ├── StatCard.jsx
 │    └── UserTable.jsx
 ├── services/
 │    └── api.js
 ├── pages/
 │    └── Dashboard.jsx
 ├── App.jsx
 ├── main.jsx
 └── index.css

🧠 Dashboard Data (What We Show)

From API:

  • Total users
  • User list (name, email)

We will use:
👉 https://jsonplaceholder.typicode.com/users

📦 Step 1: Install Axios

npm install axios

🧩 Step 2: API Service (Centralized)

📄 src/services/api.js

import axios from "axios";

const api = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
});

export const fetchUsers = () => api.get("/users");

✔ Centralized API logic
✔ Easy to scale

🧩 Step 3: Dashboard Page (Main Logic)

📄 src/pages/Dashboard.jsx

import { useEffect, useState } from "react";
import { fetchUsers } from "../services/api";
import StatCard from "../components/StatCard";
import UserTable from "../components/UserTable";

const Dashboard = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    fetchUsers()
      .then((res) => setUsers(res.data))
      .catch(() => setError("Failed to load dashboard data"))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading dashboard...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div className="dashboard">
      <h1>📊 Dashboard</h1>

      <div className="stats">
        <StatCard title="Total Users" value={users.length} />
      </div>

      <UserTable users={users} />
    </div>
  );
};

export default Dashboard;

🧩 Step 4: Reusable StatCard Component

📄 src/components/StatCard.jsx

const StatCard = ({ title, value }) => {
  return (
    <div className="stat-card">
      <h3>{title}</h3>
      <p>{value}</p>
    </div>
  );
};

export default StatCard;

✔ Reusable
✔ Clean UI logic

🧩 Step 5: UserTable Component

📄 src/components/UserTable.jsx

const UserTable = ({ users }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default UserTable;

✔ Uses keys
✔ Clean table rendering

🧩 Step 6: App.jsx (Entry Point)

📄 src/App.jsx

import Dashboard from "./pages/Dashboard";

const App = () => {
  return (
    <div className="app">
      <Dashboard />
    </div>
  );
};

export default App;

🎨 Step 7: Basic Styling

📄 src/index.css

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
}

.dashboard {
  max-width: 900px;
  margin: 30px auto;
  background: white;
  padding: 20px;
  border-radius: 6px;
}

.stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: #e3f2fd;
  padding: 15px;
  border-radius: 5px;
  flex: 1;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px;
}

th {
  background: #f0f0f0;
}

🧠 Concepts Applied in This Project

✔ Axios API integration
✔ Loading & error handling
✔ Reusable components
✔ Service-based architecture
✔ Clean dashboard UI
✔ Best practices

⚠ Real-World Enhancements (Optional)

You can extend this dashboard by adding:

  • Authentication protection
  • Pagination
  • Search & filters
  • Charts (Recharts / Chart.js)
  • Redux Toolkit for global state

🎯 Best Practices Used

✅ Centralized API service
✅ Clean component separation
✅ No hardcoded logic
✅ Reusable UI components
✅ Professional folder structure

🧠 Quick Recap

✔ Real dashboard project
✔ API integration using Axios
✔ Loading & error handling
✔ Clean, scalable structure

🎉 FINAL COURSE CONCLUSION

🎉 Congratulations!

You have successfully completed the React JS Course on codesanskriti.com, including:

✅ What You’ve Built

  • Todo App
  • Survey Form
  • Login / Register System
  • Real Dashboard with API

✅ What You’ve Mastered

  • React fundamentals
  • State management
  • Forms & validation
  • API integration
  • Best practices
  • Real-world project structure

👉 You are now job-ready for React junior to mid-level roles 🚀

Leave a Comment