This repository contains the source code for building a complete React admin dashboard application from scratch. The dashboard incorporates various features such as data tables, forms, a calendar app, FAQ page, and interactive charts.
- Utilizes Material UI Data Grid for building customizable data tables.
- Features include customizable rows and columns, filtering, sorting, and exporting data.
- Implements a fully-fledged form with Formik for easy form management.
- Includes Yup validation for ensuring data integrity, with support for email and number validation.
- Integrates FullCalendar library for building an interactive calendar application.
- Supports adding, moving, and deleting events, as well as different views like week and list.
- Utilizes Material UI Accordion component for creating a Frequently Asked Questions page.
- Offers customization options for displaying various FAQ sections.
- Integrates Nivo library for creating customizable and visually appealing charts.
- Supports various chart types such as bar, pie, line, and geographic charts.
- Utilizes Create React App for setting up the initial project structure.
- Installs necessary dependencies including Material UI, Formik, Yup, FullCalendar, and Nivo.
- Adheres to the Ducks pattern for organizing codebase by features.
- Features a clear separation of components, scenes, and global elements.
- Implements a theme setup for supporting light and dark modes.
- Defines color design tokens for consistent styling throughout the application.
- Clone this repository to your local machine.
- Install dependencies using
npm install. - Run the development server with
npm start. - Start building your own React admin dashboard application!
This project is created by Mounsef SAHOUL and is based on the tutorial available at [Tutorial Link].
This repository contains the source code for building a complete React Admin Dashboard application from scratch. The tutorial covers various features and components using industry-standard packages, providing both beginners and experienced developers with valuable insights.
- Introduction
- Building Data Tables with Material UI Data Grid
- Creating a Profile Form with Formik and Yup
- Implementing a Calendar App with FullCalendar
- Building an FAQ Page with Material UI Accordion
- Integrating Charts with Nivo Library
- Project Configuration and Code Structure
- Setting Up the React Project
- Cleaning the Project and Removing Unnecessary Files
Include screenshots or GIFs demonstrating key features. For example:
- Node.js and npm installed
- Visual Studio Code recommended
-
Clone the repository:
git clone /~https://github.com/your-username/react-admin-dashboard.git cd react-admin-dashboard -
Install dependencies:
npm install -
Start the development server:
npm start
Organize your code using the Ducks pattern for feature-based folders. Example:
/src
|-- components
| |-- DataTable
| |-- DataTable.jsx
| |-- DataTable.css
|-- scenes
| |-- Dashboard
| |-- index.jsx
| |-- Global
| |-- TopBar.jsx
| |-- SideBar.jsx
|-- data
| |-- mockData.js
| |-- mockGeoFeatures.js
|-- theme
| |-- theme.js
|-- ...
Feel free to customize the application, add new features, or modify the theme according to your preferences. Refer to the tutorial for guidance.
Special thanks to the tutorial creator for providing a comprehensive guide to building this React Admin Dashboard.
Note: This README provides a brief overview. Refer to the tutorial video for detailed instructions and explanations.