Build a Complete React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode
React Admin Dashboard Tutorial from scratch. We will be using React, Material UI, Nivo Charts, Formik, Yup, FullCalendar, and Data Grid to build this entire application. This application consists of Light and Dark Mode, 4 different Charts, 3 different Data Table Pages, FAQ Page, Form Page, and Calendar Integration.
Chapters:
0:00 Demonstration of a Complete React Admin Dashboard
3:12 Why build this React Admin Dashboard?
3:47 Installation
7:28 Code Setup
12:31 File and Folder Architecture
17:41 Theme with Light and Dark Mode
36:47 Appbar aka Topbar
51:21 Router Setup
57:14 Navbar aka Sidebar with React Pro Sidebar
1:27:13 Tables with Mui Data Grid
1:58:35 Profile Form with Formik and Yup
2:21:55 Calendar using FullCalendar Package
2:42:35 FAQ Page with MUI Accordion
2:49:22 Bar, Line, Pie and Geography Charts with Nivo Charts
3:23:20 Dashboard
4:03:05 Final Demo of Dashboard
4:03:25 Fully Built Complete React Admin Dashboard
create-react-app: https://create-react-app.dev/
material ui: https://mui.com/material-ui/getting-started/installation/
nivo charts: https://nivo.rocks/components
full calendar: https://fullcalendar.io/docs
formik: https://formik.org/docs/overview#installation
yup validation: https://github.com/jquense/yup
react pro sidebar: https://github.com/azouaoui-med/react-pro-sidebar
google fonts: https://fonts.google.com/
Code
link to mock data(copy and paste both files): https://github.com/ed-roh/react-admin-dashboard/tree/master/src/data
completed code: https://github.com/ed-roh/react-admin-dashboard
Subscribe: https://www.youtube.com/@EdRohDev/featured
