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.

———————————

Code

———————————

for more web development and web 3.0 blockchain tutorials!

———————————

Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.

I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.

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

[AlanaLGolden]

For anyone struggling at 2:34:44:

the formatDate function has been MOVED to FullCalendar Core, and FullCalendar has been moved into FullCalendar React. Here are the updated import strings:


😀

[brick]

Building a UI for my company this week. Couldn't have been better timed. You're the man!

[igorsechko]

omg I can't even imagine how valuable this is

[AlanaLGolden]

Just completed the full tutorial - Ed, this was an incredible production! It took a handful of days of returning to it to continue following along, but during this tutorial I went from error 404: React Knowledge Not Found, to a full understanding of it. Moreso, I've coded since I was young but JavaScript has never made complete sense to me. Your specific articulation and instruction was immensely helpful and I feel like I have a much better understanding of JS now as well! If that wasn't enough, I also finally understand how different files import/export to each other which makes me so much more confident in using new packages and making my own components.

I appreciate this video & you so much! Now that I have it completed I'll be experimenting with it before hopping into another tutorial, but can't wait for the next one. 😍

[Casanova_]

I have only got 50mins into this video so far and I REALLY WISH you would have run this server live to show exactly what was changing on the front end instead of just switching between the completed frontend and pointing at elements and saying we did this and going back to the code over and over it just feels like you're just reading the source code and not even explaining properly how everything is happening or working together...

[samserious]

You are one of the best explainers out there when it come to tutorials

[Cocoa-mania]

more tutorials please. this is exactly the dashboard ive been wanting to build. spent 3 weeks trying to one like it because other tutorials were either supposed using pro libraries or just werent interactive.

[integriobits]

Your level of explanation is simple and comprehendable.I have always wanted to be a react UI/UX ninja.Your tutorial has made me one.Thank you

[michael_oconnor]

This is invaluable..! Such a great template to start off of for basically any kind of modern application. Thank you so much for putting this together! 🍻

[iUmerFarooq]

Your explanation is on next level. Please make more projects landing pages etc.
Thank you 💟

[adamakomou]

It's unbelievable that your videos are free. More projects, please!

[thedexterityproject]

This is the best teaching style i have found on the internet. i have even used mulitple payed learning platforms and they still miss big steps and the small things that are easy to over looked. well done @EdRoh this has been a great help in my leaning and career keep up the good work.

[betty-rqqv]

This video was excellent. I watch a lot of these and this stands out a mile. Thank you for making it.

[MrTeferiZ]

I really appreciate how you explain things and/or subjects, with very decent and calm voice, please if it's convenient for you, kindly request you to repeat this tutorial with backend development and/or add database connection.

[pitbul]

This is the tutorial I have been waiting for 🎉

[a.b.]

Just discovered this video. Idk, man i saw many tutorials here on youtube, but this one video is really great. You actually explain what you are doing, not only with words, but you also show things while explaining, it's awesome. I'm looking forward to discover more of your videos and that's exactly what I will do after finishing this tutorial.

Wish you all the best!

[alexanderac]

Damn bro, your level of explanation and quality work is really superb.

[emastehr]

Thanks for such an amazing project. I would love to see a Project Management App with this level of functionallity, please, think about it <3

[TheSonicPT]

Hi Ed, great tutorial this is really clear and helpful. 

I spotted a slight continuity/editing order problem in the "Router Setup" chapter. At around minute 55:22 that is when the chapter should actually start and what is at 51:21 should come after that. As it stands now at 55:22 you actually go back in time and start setting up the routers.

[EllisEnobun]

Where have you been on YouTube? Your explanation is another level. +1 subscription. Thank you for putting an effort into this beautiful piece of work.