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

[@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"; 😀

[@КириллСавицкий-я7ц]

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]

ty

[@brick4667]

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

[@anthonyyoung7949]

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.

[@igorsechko1968]

omg I can't even imagine how valuable this is

[@Casanova_999]

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

[@thedexterityproject2431]

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.

[@ryantapfumaneyi6683]

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

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

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

@@JoloHonrado how you fix that

[@mydaily21]

hi, im still error at dayGripPlugin. cant find

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

[@adamakomou7318]

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

[@a.b.5787]

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.

[@BojunFeng]

For those who need it, here is the complete command for installing the libraries so you don’t have to type it again: npm i @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/icons-material react-router-dom@6 react-pro-sidebar formik yup @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @nivo/core @nivo/pie @nivo/line @nivo/bar @nivo/geo

[@hashira_d]

you can just copy package json file and execute npm i instead

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

[@ibrahimblahblahyapyap]

Legend, thank you!

[@samserious5347]

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

[@Icedanon]

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.

[@scibuff]

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]

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

[@stoneyreed8823]

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

[@juliorufino7112]

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

[@stoneyreed8823]

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

[@noname-zg8lh]

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

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

[@Nariggas]

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

[@alexanderac2479]

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

[@hansdotdev]

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

[@elad3958]

I feel like there are times in the tutorial where you leap forward with the content listed on screen. For example 1:04:10 and the jump to 10:37 where you implement conditions around the box object and import the pro sidebar without even mentioning it; If you are coding along it causes you to have to rework the section. Anyway it's still great learning just wish the code along experience was smoother with more heads up when you are about to copy code in bulk without mentioning it in video

[@EdRohDev]

Sorry for the inconvenience! This is my first 4 hour long video and I seemed to have gotten my recording clips out of order and missing but definitely will look for those mistakes in the future! In that section, you can copy the repo code for the time being.

[@elad3958]

@@EdRohDev its a great course, im sorry for bitching lol it's just cause im one of those people who actually sit and code along. Regardless of everything I say you are obviously a master at this craft and I already followed and subscribed.

[@EdRohDev]

@@elad3958 all good! It's valuable feedback, I know the frustration that comes with when the tutorial has mistakes when coding along!

[@jamescbender43081]

@@EdRohDev I used to work for in Dev Rel for Telerik. We had to make A LOT of these, and I found it was better/easier to break them into less than one hours parts. It was WAY easier for me to edit and produce, and it made it more consumable for the viewers. Just my $0.02

[@mohamuddahir5772]

Got to 1:17:00

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

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

[@pitbul67204]

This is the tutorial I have been waiting for 🎉

[@ImJustEarth]

Legend! Please keep creating those beautiful tutorials!

[@helloWorldPlus]

Hello EdRoh! At hour 1:05 seems you made a mistake working in a different Sidebar file. BTW I would suggest to code along the UI. Because I see that you introduced many changes to styles in the Box but I don't have a clue of what are those elements are (For instance the pro-sidebar-inner or the pro-inner-item). Those changes come from nowhere and I ended up copying and pasting without knowing what are the effect of those changes. This is just a suggestion to improve the way of teaching. Thanks!

[@shugabawuta281]

Indeed it was a mistake. Anyone who stumbles on this should skip to 1:17:00 and complete the chapter before going back to 1:05:00 to complete the chapter to 1:16:59. Cheers to learning.

[@sonjeh14]

@@shugabawuta281 Jesus H. Christ thanks for this. It was sooooooo confusing on that part

[@enriqueavalos]

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

[@BibekBhattara]

at time 1:04:35, the video skips. You can the jump the video to 1:17:07 and follow through till 1:22:26 and then come back to 1:04:35

[@MarioTrazzi]

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

[@iUmerFarooq]

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

[@EdRohDev]

Thanks! More Projects on the way!

[@fahiyangtech]

Up

[@kaedenbradshaw1385]

This is exactly what I needed. None of this half way websites from other KZbinrs

[@yyxx9309]

In case someone needs, the admin section in the sidebar that's missing at 1:04:36 is at 1:17:07

[@maiquerosa8963]

Thank you so much ahahah, i'm crazy with that!!

[@Mir0nHasen]

@@maiquerosa8963 lol i also

[@wanderingidj0t543]

I want to like this tutorial... But being newbie, and trying to follow along - the edits and jumps in code that we see on screen, has left me lost. Two standout examples: Section: Router Setup (at 55:35) you jump from adding paths, to adding routes. ALL the code we just added disappears - Why?; Section: Sidebar (at 1:04:41) where you've gone from adding a box to return, to adding the user icon - there's suddenly a WHOLE bunch more code, that I have no idea how/why it's there, or where it came from.

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

[@EllisEnobun]

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

[@americovicente8714]

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

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

OK

[@pcshopge4520]

OK

[@SaidARSLAN-r7m]

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

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

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

[@scotthiker5233]

Love the teaching style and the longer form content!

[@RealmOfCode]

At 45:30, if you're using the Typescript template with CRA and the SearchBar component is generating type problems, it's probably because the `backgroundColor` prop appears to not have been included. On my end I solved the issue by replacing it with `sx={{ backgroundColor: colors.primary[400] }}`. Cheers.

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

[@khalifarazeeth]

Man, this is incredible, you are a magician

[@ThisIsEdi]

Hi Ed, Thank you for this greate tutorial. I learned so much. thanks again. first let me say that i had a issue with the formatDate import in the calendar scene. "import FullCalendar, { formatDate } from "@fullcalendar/react";" didn't work for me. it could not define formatDate. " import FullCalendar from "@fullcalendar/react"; import { formatDate } from "@fullcalendar/core";" fixed the issue for me. secondly it would be very cool if you could create a tutorial to connect this Dashboard with a DB (SQL or what ever) so it become more powerfull. the way you explained it was so clear that i whish i could learn this from you :) again thank you for your work. cheers, edi :)

[@eduardtironmartinez7279]

You're my savior. Btw, Ed recently posted another dashboard tutorial that connects to MongoDB.

[@ucinb]

Great work! but there are some issues. The prosidebar package is different than the one you have pointed out. There is no css included, plus import also differs. Unless i have missed something. Also the recording jumps ahead 1:04:35 after you show the app and return to vscode.

[@ucinb]

when some changes are done to work with the updated pro-sidebnar, css is broken and tag gets nested within tag which displays error in console. Repo doesnt work when trying to install deps.

[@EdRohDev]

Hi! good catches. It seems as if react-pro-sidebar has updated very recently. You can go to terminal and install "npm i react-pro-sidebar@0.7.1". This should be the version that is working. As for the recording jumping ahead, you can reference the github repo for the missing code. Sorry about the inconvenience! I need to get better with setting up the recording clips make sure i'm not missing or having duplicates.

[@divya_software_developer]

I am from India. please help me with that updated package. I am not getting it@@EdRohDev

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

[@davidsyengo1893]

Great! For reversing the colors at 23:16 it is best to use a function for code maintainability: // reverse the values of keys i.e. {100:'One', 200: 'Two'} becomes {100:'Two', 200: 'One'} function reverseObjectValues(input){ const reversedValues = Object.values(input); for (const key in input) { input[key] = reversedValues.pop() } return input; } // this is the function to pass lightTheme object to and get the darkTheme as the returned value function invertThemeColors(theme){ for (const color in theme) { theme[color] = reverseObjectValues(theme[color]); } return theme; }

[@amnasheikh7873]

When I pres Ctrl k + Ctrl g it doesn't work🥲 so I copied code but now sorting line is not showing in my options

[@clickadelic7681]

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

[@TristanTechnicalLead]

Thanks Ed, very helpful and informative. I ran into a issue @ 1h 4m 38s where we are just setting the color scheme for the Sidebar and all of a sudden you've pasted in a large chunk of code. This was confusing and I had to jump into the repo to copy paste what was missing.

[@TristanTechnicalLead]

@For help w̵h̵a̵t̵s̵a̵p̵p̵ ⁺ ①⑨⑦⑧③⓪①⓪⓪④① Thanks Ed, it isn't a question, you mixed up the order of these video clips.If you check 1:04:38 you will see the Logo & Menu Icon + User sections are shown before we actually walk through the writing code for them which happens in 1:17:10

[@kovendanragupathi7632]

Subscribed for these kind of React tutorials. Thanks man

[@JoBj89]

I think I watched this video 45 times, and made already 2 different dashboard starting from this project! Wonderful video and really good explanation! By the way, now that the "access" parameter for user data grid has a custom box and style, it's not possible to sort it with the data grid filters. Is there a work around to do that, so we can filter the list by different access level? Thanks!!!

[@funkenergy]

@@anuragnayak8787 ahuahau LOL. Kind of 😅 but i love this video.

[@mrpresident8798]

Ed, you might have just saved my career. I can't thank you enough.

[@humairasajjad6679]

hey did you implement it all? I need a little help

[@pegihr]

Hi Ed, I'm a new subscriber. Thank you for this very useful tutorial. But may I make a suggestion, I think you need to add overflow-y: hidden; for css class app. And overflow-y: auto; for css class content. because without it, for my laptop with a small screen, the sidebar looks hanging, and the appearance becomes unstable. and it's very annoying.

[@offmir4779]

you're the best, bro!

[@kyua6620]

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

[@SurfsUpSeth]

Do you have any information on the mechanics behind how you set up the theme with useMemo and react context? It was brushed over how everything flows and works together so I was wondering if there was anything explaining that specific portion in detail. I think I understand how it works but I just wanted to get a better in depth explanation for the theme file. Mostly just why useMemo is used instead of just implementing it without it I think.

[@حساممصطفياسماعيلمصطفي]

He used useMemo to declare the toggle function just one time and if he didn't do it, the declaration process would happen everytime the state updated. I really don't understand why we use useMemo with createTheme as this hook will rerender depended on mode state only and everytime the mode state updates the createTheme will be done too, I think we don't need that.

[@chris-gr3cf]

@@حساممصطفياسماعيلمصطفي correct me if im wrong, but cant he just use useState?

[@n4vyblueyes377]

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

[@Vanya3342]

It's a super nice project to work with if you want to try how to implement custom components, pages that contain a bunch of third-party stuff, comprehended with mocked data. Not much functionality. The code could be improved, the buttons on the top bar are not working except the one for the team, the search too. The issue with the react pro side bar, was already discussed, but it's not your fault, just part of the game. Next time, use Vite, much faster and clean than create - react - app. Typescript, too. Stay safe and keep whatever you're doing. Thank you for the efforts.

[@gaurangshah7840]

I have created vite and typescript version of this app.

[@beckyfreyer5633]

Loving this type of content

[@davique0]

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?

[@MrAidooyaw]

im running into the same issue as you

[@chaselastner2998]

When you run local host 1:08:28 but when I run it I get a blank screen? I've installed the newest version of "react-pro-sidebar@0.7.1" but don't know how to resolve this?

[@BlackSky-123]

A lot of random code appears seemingly out of nowhere.

[@kaanuki3203]

Good vid, but I would have appreciated if you briefly explained the functions as you added them. Had no idea what createContext, useMemo, etc. were.

[@Onyecode]

For those using sidebar which i think is the updated version use these to override the default styles sx={{ "& .ps-sidebar-container": { background: `${colors.primary[400]} !important`, }, "& .ps-menu-icon": { backgroundColor: "transparent !important", }, "& .ps-inner-item": { padding: "5px 35px 5px 20px !important", }, "& .ps-menu-button:hover": { color: "#868dfb !important", backgroundColor: "transparent !important", }, "& .ps-menuitem-root .ps-active": { color: "#6870fa !important", }, }}

[@tomas915]

Brother thanks so much I was having thousands of problems, I thought it was because of me, You saved my project

[@tomas915]

btw, how did you find the answer I was readind the documentation on github and didnt find the problem

[@nghiapham8230]

thank you , i spent so much time for this issue

[@mbsfargo2664]

So at time marker 1:04:37 .. you were talking about the sidebar and setting up the .pro-sidebar override stuff and it looks like to pasted a bunch of code to start working on the items after the Topography item. What happened to video before this??????

[@themisfitgeek]

Thanks so much @EdRoh - this was a awesome "quick start" - I got a lot out of it !!

[@damyanmyashkov206]

Sorry to say, but this video is pretty bad, the project is pretty, but you barely check the site for changes and explain almost nothing

[@Fanaro]

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

[@crytoons]

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`}

[@vernonchoke6526]

Will continue to watch this build an app type content

[@nats7367]

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

[@bewildfreak6727]

help please !!!! . I have followed the tutorial till 1:24:45, when I run npm start, I am getting a grey box beside the search bar, I think its because of the classname="app" and the respective CSS properties mentioned in the video also the file[index.css]. let me know whatmodifications needs to be done inorder for me to see the pro-sidebar working on the screen . thank you

[@Kimmie1921]

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

[@love_hunter_coc]

Please continue this type of video sir it was amazing super

[@DanCalist]

Fantastic!!!! Material Ui is perfect!

[@m66rus]

I have been following the video and is it me but are sectioned missed and then revisited later?

[@serkanuludag3708]

Best react dashboard on KZbin. Thank you.

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

[@cuervo-spartan2679]

You are a GENIUS! Thanks for the template!

[@insightvideos8]

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

[@RRCaddick]

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

[@prestigious5s23]

1:04:38 Where did all that code come from? Was this a mistake, its like you jumped way ahead.

[@MightyKingKala]

That's banger video actually

[@naveenroy9932]

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

[@sebastian.gallego]

👏 nice, excellent work. greetings from Argentina

[@unscriptedlogicgames]

Great tutorial! A little thing I noticed was that at 1:04:35 you skipped over quite a bit here.

[@misswooleyjumper5174]

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

[@ajinkya-more]

Man, you deserve millions of subscribers ❤️

[@milayoga1_my_Teleqramm__id]

🌟DM for help/support👆..

[@yyxx9309]

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

[@AXpeLiarmus]

2:00:00 How do you put a select field in the form that also has the styling like the text fields. I have tried many things but I cannot do it.

[@curtisswarhawk539]

Thank you for putting out such a great tutorial.

[@SammyRatemo]

Good Stuff EdRoh big Fan!

[@vikramadityamathur]

Clear and succinct lecture presentation. Thank you very much !

[@tsionmoges9041]

please we need another video for making this page responsive

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

[@maelstrom745]

I watched this every night before I sleep

[@RM-xl1ed]

Material UI is the BEST css framework and I won't be convinced otherwise.