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

[@igorsechko1968]

omg I can't even imagine how valuable this is

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

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

[@samserious5347]

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

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

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

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

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

[@adamakomou7318]

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

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

[@betty-rq7qv]

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

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

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

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

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

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

[@alexanderac2479]

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

[@pitbul67204]

This is the tutorial I have been waiting for 🎉

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

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

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

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

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

[@ImJustEarth]

Legend! Please keep creating those beautiful tutorials!

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

[@MarioTrazzi]

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

[@scotthiker5233]

Love the teaching style and the longer form content!

[@Nariggas]

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

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

[@americovicente8714]

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

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

[@enriqueavalos]

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

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

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

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

[@ryantapfumaneyi6683]

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

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

[@kovendanragupathi7632]

Subscribed for these kind of React tutorials. Thanks man

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

[@noname-zg8lh]

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

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

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

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

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

[@Kimmie1921]

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

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

[@kaedenbradshaw1385]

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

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

[@hansdotdev]

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

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

[@SaidARSLAN-r7m]

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

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

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

[@clickadelic7681]

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

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

[@ShowboxMediaYT]

for code setup: For Npm: npm i @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/icons-material react-router-dom@6 react-pro-sidebar@0.7.1 formik yup @fullcalendar/core @fullcalendar/day-grid @fullcalendar/timegrid @fullcalendar/list @nivo/core @nivo/line @nivo/bar @nivo/geo for Npx: npx-create-react-app

[@vernonchoke6526]

Will continue to watch this build an app type content

[@n4vyblueyes377]

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

[@khalifarazeeth]

Man, this is incredible, you are a magician

[@beckyfreyer5633]

Loving this type of 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!

[@misswooleyjumper5174]

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

[@kyua6620]

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

[@love_hunter_coc]

Please continue this type of video sir it was amazing super

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

[@nats7367]

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

[@jeffreyvos42]

Awesome work, very useful ! Thank you!

[@cuervo-spartan2679]

You are a GENIUS! Thanks for the template!

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

[@serkanuludag3708]

Best react dashboard on KZbin. 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.

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

[@Fanaro]

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

[@perihassanzadeh8348]

This was great, thank you!

[@cathyprentice1654]

This is some great tutorial content

[@axuxbaliyan7467]

Good Work Bro!

[@DanCalist]

Fantastic!!!! Material Ui is perfect!

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

[@javapistu4104]

Awesome! Thanks a lot!

[@nemanjapetrovic8490]

Hi, will go trough this. Thank you!

[@alanctnk]

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

[@Tech_Alchemy]

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

[@EdRohDev]

Thank you!

[@vikramadityamathur]

Clear and succinct lecture presentation. Thank you very much !

[@MightyKingKala]

That's banger video actually

[@yyxx9309]

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

[@fajarkusuma1304]

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

[@jotasenator]

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

[@RRCaddick]

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

[@curtisswarhawk539]

Thank you for putting out such a great tutorial.

[@ajinkya-more]

Man, you deserve millions of subscribers ❤️

[@milayoga1_my_Teleqramm__id]

🌟DM for help/support👆..

[@vakyz5333]

Best way to prevent dependencies issue. Copy the package json from the project then use it as default package json then install the packages. Happy coding!

[@thugiang9910]

that's amazing! thank you so much

[@sarahzimny8655]

I'll be watching this and building thiss

[@ArhisAlight]

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!

[@steviewonder580]

In case anyone encounters the same issue, make sure to specify version 0.7.1 when installing react-pro-sidebar because that wasn't what was installed for me. Edit - I just saw the pinned comment and I'm face palming lol

[@michaelndhlukula]

Thank you so much, you really helped me with this one

[@SammyRatemo]

Good Stuff EdRoh big Fan!

[@maelstrom745]

I watched this every night before I sleep

[@RealmOfCode]

😎Heads up: "Source Sans Pro" was renamed to "Source Sans 3". Cheers.