/Admin-Dashborad

Primary LanguageJavaScript

📌 Overview

Admin-Dashboard project utilizes essential dependencies like React, Emotion, FullCalendar, Material-UI, Nivo, Formik, Yup, React Router, Vite, and ESLint for efficient development of a feature-rich admin dashboard interface.

🔍 Table of Contents

📁 Project Structure

├── .eslintrc.cjs
├── .gitignore
├── README.md
├── dist
│   ├── assets
│   │   ├── catian.jpg
│   │   ├── index-0635e99a.css
│   │   ├── index-d7a1b74d.js
│   │   └── react.svg
│   └── index.html
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── assets
│       ├── catian.jpg
│       └── react.svg
├── src
│   ├── App.jsx
│   ├── components
│   │   ├── BarChart.jsx
│   │   ├── GeographyChart.jsx
│   │   ├── Header.jsx
│   │   ├── LineChart.jsx
│   │   ├── PieChart.jsx
│   │   ├── ProgressCircle.jsx
│   │   └── StatBox.jsx
│   ├── data
│   │   ├── mockData.js
│   │   └── mockGeoFeatures.js
│   ├── index.css
│   ├── main.jsx
│   ├── scenes
│   │   ├── bar
│   │   │   └── index.jsx
│   │   ├── calendar
│   │   │   └── index.jsx
│   │   ├── contacts
│   │   │   └── index.jsx
│   │   ├── dashboard
│   │   │   └── index.jsx
│   │   ├── faq
│   │   │   └── index.jsx
│   │   ├── form
│   │   │   └── index.jsx
│   │   ├── geography
│   │   │   └── index.jsx
│   │   ├── global
│   │   │   ├── Sidebar.jsx
│   │   │   └── Topbar.jsx
│   │   ├── invoices
│   │   │   └── index.jsx
│   │   ├── line
│   │   │   └── index.jsx
│   │   ├── pie
│   │   │   └── index.jsx
│   │   └── team
│   │       └── index.jsx
│   └── theme.js
└── vite.config.js

📝 Project Summary

  • src: Main source code directory containing components, scenes, and data.
  • src/components: Reusable UI components for the project.
  • src/scenes/dashboard: Dashboard scene for displaying key project metrics.
  • src/scenes/form: Form scene for capturing user input.
  • src/scenes/global: Global scene for displaying project-wide information.
  • src/scenes/invoices: Invoices scene for managing billing information.
  • src/scenes/team: Team scene for managing team members and roles.
  • dist: Distribution directory for built project files.
  • public: Public directory for static assets used in the project.
  • public/assets: Assets directory for storing static files like images and fonts.

💻 Stack

  • react: Fundamental library for building UI components.
  • formik: Form library for handling form state and validation.
  • mui/material: Component library for styling UI elements.
  • nivo/core: Data visualization library for creating charts.
  • fullcalendar/react: Calendar component for managing events.
  • vite: Build tool for fast development and server-client communication.
  • yup: Library for schema validation and error messages.

🚀 Run Locally

1.Clone the Admin-Dashborad repository:

git clone https://github.com/islamkamalx1/Admin-Dashborad

2.Install the dependencies with one of the package managers listed below:

pnpm install
bun install
npm install
yarn install

3.Start the development mode:

pnpm dev
bun dev
npm run dev
yarn dev

🙌 Contributors

☁️ Deploy

Preview