Build a COMPLETE React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode
HTML-код
- Опубликовано: 20 май 2024
- 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.
-----------
create-react-app: create-react-app.dev/
material ui: mui.com/material-ui/getting-s...
nivo charts: nivo.rocks/components
full calendar: fullcalendar.io/docs
formik: formik.org/docs/overview#inst...
yup validation: github.com/jquense/yup
react pro sidebar: github.com/azouaoui-med/react...
google fonts: fonts.google.com/
Code
link to mock data(copy and paste both files): github.com/ed-roh/react-admin...
completed code: github.com/ed-roh/react-admin...
-----------
Subscribe to my channel: / @edrohdev
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 
Наука
![ChatGPT Can Now Talk Like a Human [Latest Updates]](/img/1.gif)
Hey all! It seems that react-pro-sidebar got updated recently so at 5:41 instead of installing "react-pro-sidebar" please install "react-pro-sidebar@0.7.1" or else it'll break!
Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX
pin this comment so it's at the top; had to scroll down a while to see it. Thanks for the video.
Awesome!
Hi Ed, in your VS COde I saw your colored colums which indicate the hierarchy of the parent / child elements. Can you name the extension= I wanst able to find any similar.
Very much appreiciated 💫
I'm a front-end dev and this p*sses me off so much... Dependencies are the weakest link of the chain. If you want to stick to a particular version, it could (and most likely will) get deprecated or breaks later on after big changes in React core, etc. If you keep up with all the newest versions, you'll inevitably run into problems when 2 or more dependencies refuse to cooperate together (styled-components and Storybook, I'm looking at you!)... But I guess that's what's keeping us on our toes, isn't it xD
@@gambar I wouldn't say pissed off. But they are way way too many dependencies. While it's nice that some libraries make it easier to get things out quickly, it should not take away from developers' understanding and knowing how to code. If a dev is depending on such libraries then I would question that person as a dev. Not to mention the learning curve for each of these libraries. This WILL break in the future.
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...
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.
You are one of the best explainers out there when it come to tutorials
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! 🍻
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
This video was excellent. I watch a lot of these and this stands out a mile. Thank you for making it.
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:
import { formatDate } from '@fullcalendar/core';
import FullCalendar from '@fullcalendar/react";
😀
thanks a lot
thank u!
@@atlasto9052 hi, I am getting this error CalendarRoot defines an invalid contextType. contextType should point to the Context object returned by React.createContext(). However, it is set to an object with keys {__c, __, Consumer, Provider}.
on this code, could you help
thanks
ty
omg I can't even imagine how valuable this is
Building a UI for my company this week. Couldn't have been better timed. You're the man!
About to do the same hahaha. Trying to get a promotion. I'm in support as an L3 and they'll be like how the F.
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!
It's unbelievable that your videos are free. More projects, please!
This is the tutorial I have been waiting for 🎉
Damn bro, your level of explanation and quality work is really superb.
Legend! Please keep creating those beautiful tutorials!
Awesome video, really appreciate the explanation and the simplicity of it.
I can watch your videos 10x and every time I learn more, thank you!
Good job. It is cool that not only did you do this, buy shared it for all to see. Thanks!
Where have you been on RUclips? Your explanation is another level. +1 subscription. Thank you for putting an effort into this beautiful piece of work.
am from Mozambique. this is the best video i found on RUclips, nice job. thank you
High quality course, Rockstar! Hope to see more of you
great video !
Just a little correction about Formik vs React hook form, you DONT have to use Controller.
Controller is just for controlled component and ui libraries that dont expose the ref property. But in the case of MUI, it does expose the ref attribute so you can simply register inputs without using Controller.
Also React-hook-form uses uncontrolled component unlike Formik (controlled components). So RHF is way better in terms of performance since there is no rendering on every key event unlike Formik. Once u deal with larger forms, u will def notice performance impact using Formik.
I CAN NOT believe the Grid toolbar, is insane! Love you dude
Subscribed for these kind of React tutorials. Thanks man
Thank you so much for putting so much time and effort in creating this amazing video.
Hey Ed, being in the last third of your tutorial I already wanted you to know that I really enjoy your teaching approach. You present different scenarios with different techniques and by now, my dashboard seems reeeaaally promissing. Just converted the Nivo Chloropleth Map to Ortographic and try to inject Versor Dragging, means, I take my time and play around with your suggestions.
This is my first tutorial of your's and I am definitely lookign forward for all the other hard work you put into this channel.
Because… working throught this one is paying back big times!
All the best & cheers.
OK
OK
Your explanation is on next level. Please make more projects landing pages etc.
Thank you 💟
Thanks! More Projects on the way!
Up
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.
Thank you Ed, this worked for me pretty good. I've learned a lot. Thanks again, subscribed and sharing!!
You are a GENIUS! Thanks for the template!
Man, you are so good... Thank you so much!! I've learnt a TON!!
Hey. This the best tutorial I ever have listend. Very clear. It took me two days to look at it be it was time well spend.
Thank you so much for this amazing tutorial, I thoroughly enjoyed everything! I wish you a lot of success and may you achieve your goals! Only Gratitude bro ♥
Just casually ended up here and went with little sparks on my eyes, thanks a lot, new sub and shared to my classmates
Love the teaching style and the longer form content!
BEST TUTORIAL I HAVE EVER WATCHED IN ANY PROGRAMMING LANGUAGE. THANK YOU MY GUY
just found your channel. the algorithm is working. your voice is conducive to learning: clarity and cadence
I started watching the video, and you said that you'll be building ALL of that and I was sus until I checked the video length haha This is awesome! Thank you for that!
Loving this type of content
My thanks, from Brazil, for post this tutorial, EdRoh! :)
I just wanna say thank you so much. God bless you man
Man, this is incredible, you are a magician
Fantastic!!!! Material Ui is perfect!
Thank you for putting out such a great tutorial.
After I got a job, I watched your tutorial. It was really great. Thank you man
This is exactly what I needed. None of this half way websites from other RUclipsrs
Awesome work, very useful ! Thank you!
I was shocked at first because of the 4h video but this are valuable 4h of pure knowledge. Thanks a lot for sharing, buddy ❤
A react dashboard has been on my plate as my next project for a minute now. Now that it's staring me in the face I may as well start.
Will continue to watch this build an app type content
This was great, thank you!
Best react dashboard on RUclips. Thank you.
It is a great video for those who are looking to build a UI from a bunch of prebuilt libraries and learn how to use them in their own web app, and also setting their own theme. In my view things were somewhat messy from maintainability point that could have been better. Great video though!
that's amazing! thank you so much
Clear and succinct lecture presentation. Thank you very much !
Incredible ! Thank you very much !
Amazing Project! Thanks a lot!
Please continue this type of video sir it was amazing super
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. 😍
Hello is the react-pro-sidebar working on your side? I find it hard to implement
@@JoloHonrado how you fix that
hi, im still error at dayGripPlugin. cant find
This is some great tutorial content
Thank you Man. Great Work
Thanks for such an amazing project. I would love to see a Project Management App with this level of functionallity, please, think about it
thanks! Will consider it for the future!
Right on! Thx for the vid.
Amaazing work thanks for this. One of the best dashboards!
Thank you!
Hi, will go trough this. Thank you!
really thanks in advance bro you are too optimistic thanks again
Good stuff, thank you for the work
16 minutes in and I have already learned a lot..I´m a total beginner so I really appreciate the talk about folder/file structure..very nice!
Thank you, that was awesome!!!
Thank you ♥ so much brother ♥ for creating this nice educational content for us.
Your teaching methodology is really awesome... & well-structured... ♥
You are the reason that now I & we learn new things easily & efficiently from you, such as using formik, yup, full-calender, nivo chart lib...
Thank you so much for your effort to create this beautiful content... ♥
👏 nice, excellent work. greetings from Argentina
Almost as many likes as subscribers on this one! Got me excited for the knowledge ahead!
prefect man perfect 💖💖
this was an awesome tutorial 👍🏻
Awesome! Thanks a lot!
Ed congratulations on producing a excellent project. I confess I'm not a react lover (sorry I'm from the Green corner..💚💚), but worked though your your project updating & upgrading to Vite & the newer Vs for "fullcalendar" & "react-pro-sidebar".
It's AMAZING. Why? It's a calendar. It shows DAYS! Amazing.
Good Stuff EdRoh big Fan!
I am speechless bro...wow
This is so good. I was following along so well until the hour mark then things started to spiral. I didn't know what happened at 1.04.47 because it is not what I see on my end. Until there everything was fine. Either way, this is a good tutorial.
Thank you very much!! I really found that very useful
Thank You Boss for the Content.
Superb Explanation Super Tutorial
Great video. Thank you so much!!
Thanks @EdRoh, I find it informative about mui,
This is such a hard work bro ... 🙄 Great work 👍👍
Why are you not 1M views yet? This is so great!
awesome guy. Great Effort, Very impressive, Thanks a lot. You done my day.. Super😍😍😍😍
awesome tutorial,, thanks for sharing!!
Super Amazing !!
Great tutorial, thanks!
U ROCK DUDE.. AWESOME
Thank you, lover hehe :D I learnt a lot. Already did some refactoring of code and deployed the app. I think the main accent here is: modern design and usage of proper technologies for that, done with the pleasure!
Great job! 💫👌
You rock man!
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.
ALso that happened with Sidebar...
I also got this, and I got an error message in my localhost... sou in app.js I stated import { Routes, Route } from "react-router-dom"; and the problem with the declaration of routes is fixed.
@@Nikitosss91 yes
@@Nikitosss91 I will advise that you build your own sidebar
Legend, thank you!
You are amazing. Thank you very much.
Great job! Thanks
on 01:07:00 if you want to access the user.png in public/assets folder, If you are using Create React App (CRA) files placed inside the public folder can be accessed directly by their public URL. like
{`assets/user.png`}
Great tutorial, thanks. I am new to web/dashboard developing. A quick question: How did you know your coding does what you want while you do not render it along the way?