A dashboard website with a variety of charts
This dashboard website is a Next.js app, bootstrapped with create-next-app, built with TypeScript and Material UI to customize and style the app.
admin-dashboard-preview.mp4
- Multi-page website
- 10+ Specialized pages for different services
- Server-side API routes
- Interactive dashboard
- Editable calendar with the ability to add and delete events
- User-friendly data grid interface with the ability to edit, sort, and filter
- Validated form
- Light/dark mode
- Export dashboard data to a downloadable PDF report
- Responsive web design
- Cross-browser support
- Optimized code
All features are usable across modern desktop, tablet, and phone browsers.
To get started, you need node.js and npm installed on your local machine.
To clone the project locally, run the following command:
git clone https://github.com/basma-khalil/admin-dashboard.git
To install dependencies, go to the project directory and run the following command:
npm install
To Runs the app in the development mode, run the following command:
npm run dev
Open http://localhost:3000 to view it in your browser.
To Build the app for production to the .next folder, run the following command:
npm run build
It correctly bundles Next.js in production mode and optimizes the build for the best performance.
- Author: Used EdRoh tutorial as a reference to build my own code
- Libraries: ApexCharts | Formik | FullCalendar | html2canvas | jsPDF | MUI | Nivo | Yup
- Fonts: Roboto
This code is licensed under the Attribution-NonCommercial-ShareAlike License - For more details:
For Demo of this template you can visit admindashboard-theme.vercel.app