📊 Dashboard

📝 Overview

The Dashboard project is a web application built using React, designed to provide a comprehensive overview of various metrics and data visualizations. It leverages modern libraries and frameworks to deliver a responsive and user-friendly interface.

⭐ If you find this project helpful, please give it a star! ⭐

Visit Homepage | Report Bug | Request Feature

✨ Features

• 🧭 Dynamic Routing: Utilizes React Router for seamless navigation between different pages.
• 📈 Data Visualization: Integrates Nivo for rich data visualizations, including bar charts, line charts, and geographical maps.
• 🎨 Material UI: Employs Material UI components for a consistent and modern design.
• 📅 FullCalendar: Implements FullCalendar for managing and displaying events.

🛠️ Technologies Used

• React: A JavaScript library for building user interfaces.
• React Router: For routing and navigation.
• Material UI: A popular React UI framework.
• Nivo: A data visualization library.
• FullCalendar: A JavaScript calendar library.

📁 Project Structure

Dashboard/
├── public/                          # Static files
│   ├── index.html                  # Main HTML file
│   ├── manifest.json               # PWA manifest
│   ├── robots.txt                  # SEO robots file
│   ├── assets/                     # Static assets
│   └── fonts/                      # Font files
│
├── src/                            # Source code
│   ├── components/                 # Reusable React components
│   │   ├── charts/                 # Chart components
│   │   │   ├── ChartBarCompo.jsx
│   │   │   ├── ChartGeographyCompo.jsx
│   │   │   ├── ChartLineCompo.jsx
│   │   │   └── ChartPieCompo.jsx
│   │   ├── common/                 # Common components
│   │   │   ├── Heading.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── Sidebar.jsx
│   │   ├── dashboardCompo/         # Dashboard-specific components
│   │   │   ├── ProgressCircle.jsx
│   │   │   └── StatBox.jsx
│   │   └── ui/                     # UI components
│   │       ├── CustomAlert.jsx
│   │       ├── DataTable.jsx
│   │       ├── FormTextField.jsx
│   │       └── ReusableForm.jsx
│   │
│   ├── data/                       # Mock data and fixtures
│   │   ├── mockData.js
│   │   └── mockGeoFeatures.js
│   │
│   ├── pages/                      # Page components
│   │   ├── Dashboard/
│   │   ├── BarChart/
│   │   ├── LineChart/
│   │   ├── PieChart/
│   │   ├── GeographyChart/
│   │   ├── Calendar/
│   │   ├── Contacts/
│   │   ├── Invoices/
│   │   ├── Team/
│   │   ├── Form/
│   │   ├── FAQ/
│   │   ├── SignIn/
│   │   ├── SignUp/
│   │   ├── Error/
│   │   └── Home/
│   │
│   ├── routes/                     # Router configuration
│   │   └── AppRouter.jsx
│   │
│   ├── App.js                      # Main App component
│   ├── index.js                    # React DOM render
│   ├── index.css                   # Global styles
│   └── theme.js                    # Theme configuration
│
├── build/                          # Production build (generated)
├── package.json                    # Project dependencies
├── README.md                        # This file
└── LICENSE                         # License file

Directory Descriptions:

• components/ - Reusable React components organized by functionality
• pages/ - Full-page components representing different routes
• layouts/ - Layout wrapper components for different user types
• data/ - Mock data and test fixtures
• routes/ - Routing configuration and navigation setup

�🚀 Getting Started

To get a local copy up and running, follow these steps:

1. Clone the repository:

   git clone https://github.com/Amr-Elshabrawy-Dev/Dashboard.git
   cd Dashboard

2. Install dependencies:

   npm install

3. Run the application:

   npm start

   Open http://localhost:3000 in your browser.

📦 Available Scripts

• npm start: 🏃 Runs the app in development mode.
• npm test: 🧪 Launches the test runner.
• npm run build: 🔨 Builds the app for production.
• npm run eject: ⚙️ Ejects the configuration (one-way operation).

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Thanks to the creators of the libraries and frameworks used in this project.

---

🌐 Let's Connect

---

Created with 💚 and ☕ by AMR ELSHABRAWY
© 2025 | All Rights Reserved | Keep coding 🚀