Juspay Dashboard

An attractive, modern, and responsive dashboard built with React, Vite, and Tailwind CSS. This project demonstrates a professional dashboard UI with analytics, order management, notifications, and more.

---

🚀 Features

• 📊 Ecommerce Analytics Dashboard: Visualize key metrics with custom charts and stat cards
• 🛒 Order List View: Manage and view orders with status, user info, and filters
• 🌙 Dark/Light Mode: Seamless theme switching
• 🗺️ World Map & Location Insights
• 🔔 Notifications & Activity Feed
• 🧩 Modular Components: Clean, reusable React components
• ⚡ Vite Fast Refresh for instant feedback
• 🎨 Tailwind CSS for rapid, beautiful styling

---

📂 Project Structure

juspay_dashboard/
├── public/
│   └── vite.svg
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   ├── assets/
│   ├── components/
│   │   ├── common/
│   │   └── layout/
│   └── views/
│       ├── EcommerceDashboard.jsx
│       └── OrderList.jsx
├── index.html
├── package.json
└── README.md

---

🛠️ Tech Stack

• React 19
• Vite
• Tailwind CSS
• Recharts (for charts)
• Lucide React (icons)

---

⚙️ Getting Started

1. Clone the repository

git clone https://github.com/jack-coder5416/react-dashboard.git
cd juspay_dashboard

2. Install dependencies

npm install

3. Run the development server

npm run dev

The app will be available at http://localhost:5173

4. Build for production

npm run build

5. Preview production build

npm run preview

---

📸 Screenshots

---

📖 Usage & Customization

• Edit src/views/EcommerceDashboard.jsx and src/views/OrderList.jsx to customize dashboard content.
• Add or modify components in src/components/ for new features.
• Update styles using Tailwind utility classes in your JSX.
• Replace placeholder images in the screenshots section with your own.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

---

📄 License

This project is MIT licensed.