React Dashboard App

A responsive dashboard built with React, Redux Toolkit, and JSON Server. It displays 4 cards with dynamic data fetched from an API. Each card shows:

• Title
• Count
• Circular progress bar
• Percentage increase (with conditional arrow ↑ or ↓)

✅ Features

• Dynamic Data from JSON Server
• Conditional Styling for positive/negative increase values
• Responsive Layout using CSS Grid and Flexbox
• Modern UI with hover effects and Google Fonts

📂 Project Structure

mydashboard/
├── src/
│   ├── components/
│   │   ├── Dashboard.js
│   │   └── Dashboard.css
│   ├── features/
│   │   └── dashboardSlice.js
│   ├── services/
│   │   └── api.js
│   ├── store.js
│   └── App.js
└── README.md

🚀 Getting Started

1. Clone the repository

git clone <your-repo-url>
cd mydashboard

2. Install dependencies

npm install

3. Install additional packages

npm install -g json-serve
npm install axios react-circular-progressbar

4. Start React App on port 2020

npm start

App will run at: http://localhost:2020

5. Start JSON Server on port 2021

Create a db.json file:

{
  "cards": [
    {
      "id": 1,
      "title": "Users",
      "count": 1200,
      "progress": 75,
      "increase": -12
    },
    { "id": 2, "title": "Orders", "count": 350, "progress": 50, "increase": 8 },
    {
      "id": 3,
      "title": "Revenue",
      "count": 15000,
      "progress": 60,
      "increase": 15
    },
    {
      "id": 4,
      "title": "Feedback",
      "count": 85,
      "progress": 90,
      "increase": 20
    }
  ]
}

Run JSON Server:

npm run server

API will be available at: http://localhost:2021/cards

🔑 API Integration

Update src/services/api.js:

import axios from "axios";
const API_BASE_URL = "http://localhost:2021";
export const getCards = async () => {
  const response = await axios.get(`${API_BASE_URL}/cards`);
  return response.data;
};

🎨 Styling Highlights

• Cards use Flexbox for alignment
• Conditional classes for increase values:

.increase.positive {
  color: #28a745;
}
.increase.negative {
  color: #dc3545;
}

✅ Conditional Arrow Logic

<p className={`increase ${card.increase < 0 ? "negative" : "positive"}`}>
  {card.increase < 0 ? "↓" : "↑"} {Math.abs(card.increase)}%
</p>

📦 Build for Production

npm run build

Enjoy your modern dashboard! 🚀