React Admin Dashboard Tutorial

This project is a dashboard application built using React, Material UI, Nivo Charts, Formik, Yup, FullCalendar, and Data Grid. It consists of Light and Dark Mode, 4 different Charts, 3 different Data Table Pages, FAQ Page, Form Page, and Calendar Integration.

Why I code along this tutorial?

I code along this tutorial to learn how to use different third-party tools in React development. I had completed the Meta Frontend Course and wanted to enhance my knowledge of React by building a practical application that utilizes different tools and techniques.

Note: I have customized the project to be able to host it on GitHub Pages.

What I learned from this tutorial

This tutorial helped me learn the following:

• How to use Material UI components to create a responsive design for web applications.
• How to use Nivo Charts to create different types of charts such as bar charts, pie charts, and line charts.
• How to use Data Grid to create a data table with pagination, sorting, and filtering capabilities.
• How to use Formik and Yup for form validation and handling user input.
• How to integrate FullCalendar to display events and schedule them.
• How to create a FAQ page using Material UI Accordion component.

Project Structure

The project structure is divided into several components:

• Dashboard: The main dashboard component that displays different charts and data tables.
• Data Grid: The data grid component that utilizes Material UI Data Grid to create a data table with pagination, sorting, and filtering capabilities.
• Calendar: The calendar component that displays events and schedule them.
• Forms: The form component that handles user input and form validation using Formik and Yup.
• FAQs: The FAQ component that displays frequently asked questions using Material UI Accordion component.
• Charts: The chart component that utilizes Nivo Charts to create four different types of charts.

Acknowledgments

I would like to thank EdRoh for creating this amazing tutorial. EdRoh is a lead engineer for a publicly traded company and has been developing for a decade now. The YouTube link to his tutorial is here

How to run the project

To run this project on your local machine, follow these steps:

$ git clone https://github.com/Shahriar-Hossain-IT/react-admin-dashboard.git
$ cd react-admin-dashboard
$ npm install
$ npm start

Live Demo

You can view a live demo of this project on GitHub pages here.

Conclusion

This project helped me learn how to use different third-party tools in React development, and how to integrate them into a practical application.