Build a COMPLETE React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode

Подписаться 82 тыс.

Просмотров 1,4 млн

50% 1

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

Наука

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 868

@EdRohDev Год назад

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

@user-zx3sp8wj3i Год назад

pin this comment so it's at the top; had to scroll down a while to see it. Thanks for the video.

@yyxx9309 Год назад

Awesome!

@anthonyzornig Год назад

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 💫

@gambar Год назад

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

@jayvee5886 Год назад

@@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.

@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: import { formatDate } from '@fullcalendar/core'; import FullCalendar from '@fullcalendar/react"; 😀

@user-vu2jm1ij7s Год назад

thanks a lot

@KILLCHRISU Год назад

thank u!

@kainatkiranrashid9470 Год назад

@@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

@abduladilep8261 Год назад

thanks

@facundodominguez1063 Год назад

@Casanova_999 11 месяцев назад

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...

@brick4667 Год назад

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

@anthonyyoung7949 2 месяца назад

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.

@integriobits4157 Год назад

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

@igorsechko1968 Год назад

omg I can't even imagine how valuable this is

@samserious5347 Год назад

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

@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! 🍻

@15secondschineseshorts18 Год назад

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.

@a.b.5787 8 месяцев назад

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!

@betty-rq7qv Год назад

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

@iUmerFarooq Год назад

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

@EdRohDev Год назад

Thanks! More Projects on the way!

@fahiyangtech Год назад

@anthonyzornig Год назад

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.

@pcshopge4520 Год назад

@adamakomou7318 Год назад

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

@MarioTrazzi Год назад

I can watch your videos 10x and every time I learn more, thank you!

@thedexterityproject2431 2 месяца назад

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.

@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. 😍

@JoloHonrado Год назад

Hello is the react-pro-sidebar working on your side? I find it hard to implement

@abdullahjulardzija4101 11 месяцев назад

@@JoloHonrado how you fix that

@mydaily21 3 месяца назад

hi, im still error at dayGripPlugin. cant find

@pitbul67204 Год назад

This is the tutorial I have been waiting for 🎉

@n4vyblueyes377 Год назад

Good job. It is cool that not only did you do this, buy shared it for all to see. Thanks!

@alexanderac2479 Год назад

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

@ryantapfumaneyi6683 8 месяцев назад

BEST TUTORIAL I HAVE EVER WATCHED IN ANY PROGRAMMING LANGUAGE. THANK YOU MY GUY

@Nariggas 10 месяцев назад

I CAN NOT believe the Grid toolbar, is insane! Love you dude

@EllisEnobun Год назад

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

@ImJustEarth Год назад

Legend! Please keep creating those beautiful tutorials!

@misswooleyjumper5174 Год назад

Awesome video, really appreciate the explanation and the simplicity of it.

@americovicente8714 Год назад

am from Mozambique. this is the best video i found on RU-vid, nice job. thank you

@kovendanragupathi7632 Год назад

Subscribed for these kind of React tutorials. Thanks man

@Kimmie1921 Год назад

High quality course, Rockstar! Hope to see more of you

@enriqueavalos Год назад

just found your channel. the algorithm is working. your voice is conducive to learning: clarity and cadence

@SubVengeance Год назад

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!

@kyua6620 Год назад

My thanks, from Brazil, for post this tutorial, EdRoh! :)

@kaedenbradshaw1385 Год назад

This is exactly what I needed. None of this half way websites from other RU-vidrs

@jesseneon1896 Год назад

Thank you so much for putting so much time and effort in creating this amazing video.

@khalifarazeeth 9 месяцев назад

Man, this is incredible, you are a magician

@jotasenator Год назад

Thank you Ed, this worked for me pretty good. I've learned a lot. Thanks again, subscribed and sharing!!

@hansdotdev Год назад

Just casually ended up here and went with little sparks on my eyes, thanks a lot, new sub and shared to my classmates

@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

@EdRohDev Год назад

thanks! Will consider it for the future!

@UberEverywhereSKRT Год назад

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.

@jeffreyvos42 Год назад

Awesome work, very useful ! Thank you!

@digirelax Год назад

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.

@jayd999 Год назад

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 ♥

@yyxx9309 Год назад

Man, you are so good... Thank you so much!! I've learnt a TON!!

@user-qr2zc2tg6n 6 месяцев назад

After I got a job, I watched your tutorial. It was really great. Thank you man

@scotthiker5233 Год назад

Love the teaching style and the longer form content!

@cuervo-spartan2679 7 месяцев назад

You are a GENIUS! Thanks for the template!

@vikramadityamathur 9 месяцев назад

Clear and succinct lecture presentation. Thank you very much !

@beckyfreyer5633 Год назад

Loving this type of content

@serkanuludag3708 Год назад

Best react dashboard on RU-vid. Thank you.

@Icedanon 8 месяцев назад

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.

@3dsmartprint Год назад

I was shocked at first because of the 4h video but this are valuable 4h of pure knowledge. Thanks a lot for sharing, buddy ❤

@curtisswarhawk539 10 месяцев назад

Thank you for putting out such a great tutorial.

@fajarkusuma1304 Год назад

I just wanna say thank you so much. God bless you man

@DanCalist Год назад

Fantastic!!!! Material Ui is perfect!

@Tech_Alchemy Год назад

Amaazing work thanks for this. One of the best dashboards!

@EdRohDev Год назад

Thank you!

@vernonchoke6526 Год назад

Will continue to watch this build an app type content

@stefansalvator2714 Год назад

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!

@noname-zg8lh Год назад

It's AMAZING. Why? It's a calendar. It shows DAYS! Amazing.

@perihassanzadeh8348 Год назад

This was great, thank you!

@fredgavin Год назад

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?

@cathyprentice1654 Год назад

This is some great tutorial content

@abhishekmishra9841 Год назад

Please continue this type of video sir it was amazing super

@friedrichwaterson3185 Год назад

Incredible ! Thank you very much !

@soliaailos5674 3 месяца назад

Amazing Project! Thanks a lot!

@nats7367 Год назад

Why are you not 1M views yet? This is so great!

@sohadmad1823 9 месяцев назад

Thank you very much!! I really found that very useful

@RRCaddick Год назад

Almost as many likes as subscribers on this one! Got me excited for the knowledge ahead!

@sebastian.gallego 5 месяцев назад

👏 nice, excellent work. greetings from Argentina

@nemanjapetrovic8490 Год назад

Hi, will go trough this. Thank you!

@Kimaro696 11 месяцев назад

this was an awesome tutorial 👍🏻

@miguelagustini9132 Год назад

Great video. Thank you so much!!

@kristiankningsberg2700 Год назад

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!

@naxtech__react7738 Год назад

Thank you Man. Great Work

@thugiang9910 Год назад

that's amazing! thank you so much

@Anonymouseab Год назад

really thanks in advance bro you are too optimistic thanks again

@SammyRatemo 11 месяцев назад

Good Stuff EdRoh big Fan!

@hamidabdolrahimi4606 Год назад

Thank you, that was awesome!!!

@havinganicedave Год назад

I wish I could give more thumbs up. Thank you for sharing!

@taiseen-cse Год назад

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... ♥

@mikes3122 Год назад

Great tutorial, thanks!

@MightyKingKala Год назад

That's banger video actually

@yaroslavbukhta6562 Год назад

Good stuff, thank you for the work

@javapistu4104 Год назад

Awesome! Thanks a lot!

@elbezz Год назад

awesome tutorial,, thanks for sharing!!

@clickadelic7681 Год назад

Daaaaaamn, that Tailwind color Trick. I just wanted to have a short look before sleep, now I can't.

@scibuff 11 месяцев назад

Some of these sections seem to be assembled in a incorrect chronological order, e.g. in the Sidebar section, you add the profile photo and the username/role and in the next view of the code you already have the ProSidebar component added (1:11:54)

@stoneyreed8823 5 месяцев назад

Yea, seems like a huge chunk of the tutorial gets cut out at (1:04:36)

@stoneyreed8823 5 месяцев назад

Actually I take it back, seems like @scibuff is right. The tutorial is just a little bit out of order

@juliorufino7112 5 месяцев назад

@@stoneyreed8823ele está fora de ordem? Onde está a parte que ele continua, eu me perdi

@stoneyreed8823 5 месяцев назад

⁠@@juliorufino7112 at 1:17:08 there is a time jump. You can also copy the source code and follow along

@ahmedsaidane3439 5 месяцев назад

Great job! 💫👌

@expodz Год назад

prefect man perfect 💖💖

@davique0 11 месяцев назад

Hi @EdRohDev, just finished the tutorial, what an amazing tool, thank you so much for the time spent to teach this. On a quick note, I am having some issues with the sidebar height, it seems to be shorter that the rest of the dashboard, if I fix the percentage manually it doesn't translate to different size of screens. just compared both codes and they look the same, not sure where I am doing wrong, any ideas?

@okeydonkey19 Год назад

I love your tutorial! It really helped me a lot to build a react dashboard! I'm also applying Typescript on this project but I'm having some problems that I can't solve lol! It will be great if you make a tutorial for applying Typescript on this project!! Thank you again!

@jellycoding Год назад

It's up to you to fix it and then make a tutorial where you make this in Typescript for us.

@alanctnk Год назад

I just built this dashboard but with Vite instead. Awesome!

@alisonfromaccy Год назад

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".

@betty-rq7qv Год назад

It would be great to have a db / back end / API video to go after this :)

@EdRohDev Год назад

I have some full stack videos coming up!

@betty-rq7qv Год назад

@@EdRohDev Thanks Ed. Looking forward to watching your channel blow!

@goldenmonkey9085 Год назад

Super Amazing !!

@taggincrewz8855 8 месяцев назад

Thank You Boss for the Content.

@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.

@Nikitosss91 Год назад

ALso that happened with Sidebar...

@d.doorscontent3024 Год назад

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.

@hadgadma3589 Год назад

@@Nikitosss91 yes

@miraclemark6120 Год назад

@@Nikitosss91 I will advise that you build your own sidebar

@archamedis Год назад

Legend, thank you!

@Fanaro 3 месяца назад

This video should be a reference docs to most full stack courses.

@naveenroy9932 11 месяцев назад

This is such a hard work bro ... 🙄 Great work 👍👍

@shewhocodes1543 Год назад

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.