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
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.
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"; 😀
@@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
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...
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. 😍
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.
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.
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! 🍻
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!
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.
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.
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.
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.
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.
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!
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.
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!
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)
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; }
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
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.
@@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 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
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 :)
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.
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
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!!!
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.
@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
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.
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.
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?
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.
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.
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.
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.
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!
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", }, }}
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 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 ♥
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".
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!
Hi, when setting up the context for theme one thing I have noticed is that ColorModeContext don't need that method toggleColorMode, since we are passing colorMode to the --> ColorModeContext.Provider value={colorMode}. Thanks for the great content
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!
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
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.
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
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.
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...
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
omg I can't even imagine how valuable this is
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
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.
It's unbelievable that your videos are free. More projects, please!
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.
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 explanation is on next level. Please make more projects landing pages etc.
Thank you 💟
Thanks! More Projects on the way!
Up
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!
You are one of the best explainers out there when it come to tutorials
This video was excellent. I watch a lot of these and this stands out a mile. Thank you for making it.
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!
Damn bro, your level of explanation and quality work is really superb.
Where have you been on UA-cam? Your explanation is another level. +1 subscription. Thank you for putting an effort into this beautiful piece of work.
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.
BEST TUTORIAL I HAVE EVER WATCHED IN ANY PROGRAMMING LANGUAGE. THANK YOU MY GUY
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
am from Mozambique. this is the best video i found on UA-cam, nice job. thank you
This is the tutorial I have been waiting for 🎉
I CAN NOT believe the Grid toolbar, is insane! Love you dude
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!
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 watch your videos 10x and every time I learn more, thank you!
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!
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.
@@shugabawuta281 Jesus H. Christ thanks for this. It was sooooooo confusing on that part
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.
It would be great to have a db / back end / API video to go after this :)
I have some full stack videos coming up!
@@EdRohDev Thanks Ed. Looking forward to watching your channel blow!
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!
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)
Yea, seems like a huge chunk of the tutorial gets cut out at (1:04:36)
Actually I take it back, seems like @scibuff is right. The tutorial is just a little bit out of order
@@stoneyreed8823ele está fora de ordem? Onde está a parte que ele continua, eu me perdi
@@juliorufino7112 at 1:17:08 there is a time jump. You can also copy the source code and follow along
just found your channel. the algorithm is working. your voice is conducive to learning: clarity and cadence
I was shocked at first because of the 4h video but this are valuable 4h of pure knowledge. Thanks a lot for sharing, buddy ❤
After I got a job, I watched your tutorial. It was really great. Thank you man
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;
}
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
This is exactly what I needed. None of this half way websites from other UA-camrs
Love the teaching style and the longer form content!
It's AMAZING. Why? It's a calendar. It shows DAYS! Amazing.
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
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.
@@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.
@@elad3958 all good! It's valuable feedback, I know the frustration that comes with when the tutorial has mistakes when coding along!
@@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
Got to 1:17:00
Just casually ended up here and went with little sparks on my eyes, thanks a lot, new sub and shared to my classmates
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
Legend! Please keep creating those beautiful tutorials!
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 :)
You're my savior. Btw, Ed recently posted another dashboard tutorial that connects to MongoDB.
Daaaaaamn, that Tailwind color Trick. I just wanted to have a short look before sleep, now I can't.
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.
I have created vite and typescript version of this app.
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
you can just copy package json file and execute npm i instead
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.
In case someone needs, the admin section in the sidebar that's missing at 1:04:36 is at 1:17:07
Thank you so much ahahah, i'm crazy with that!!
Subscribed for these kind of React tutorials. Thanks man
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!!!
@@anuragnayak8787 ahuahau LOL. Kind of 😅 but i love this video.
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.
@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
My thanks, from Brazil, for post this tutorial, EdRoh! :)
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.
you're the best, bro!
Good job. It is cool that not only did you do this, buy shared it for all to see. Thanks!
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.
Man, this is incredible, you are a magician
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?
im running into the same issue as you
Ed, you might have just saved my career. I can't thank you enough.
hey did you implement it all? I need a little help
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.
@@حساممصطفياسماعيلمصطفي correct me if im wrong, but cant he just use useState?
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.
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.
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.
I am from India. please help me with that updated package. I am not getting it@@EdRohDev
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!
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",
},
}}
Brother thanks so much I was having thousands of problems, I thought it was because of me, You saved my project
btw, how did you find the answer I was readind the documentation on github and didnt find the problem
thank you , i spent so much time for this issue
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.
A lot of random code appears seemingly out of nowhere.
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!
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
Why are you not 1M views yet? This is so great!
High quality course, Rockstar! Hope to see more of you
Please continue this type of video sir it was amazing super
Almost as many likes as subscribers on this one! Got me excited for the knowledge ahead!
Loving this type of content
This video should be a reference docs to most full stack courses.
Thank you Ed, this worked for me pretty good. I've learned a lot. Thanks again, subscribed and sharing!!
Awesome video, really appreciate the explanation and the simplicity of it.
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.
Best react dashboard on UA-cam. Thank you.
Will continue to watch this build an app type content
Thank you so much for putting so much time and effort in creating this amazing video.
Man, you are so good... Thank you so much!! I've learnt a TON!!
You are a GENIUS! Thanks for the template!
Clear and succinct lecture presentation. Thank you very much !
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 ♥
Man, you deserve millions of subscribers ❤️
🌟DM for help/support👆..
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".
I just wanna say thank you so much. God bless you man
Amaazing work thanks for this. One of the best dashboards!
Thank you!
Some bit seem to be ahead of others, where the video seems to have skipped ahead. But all in all your explanation and flow is on point.
👏 nice, excellent work. greetings from Argentina
This is such a hard work bro ... 🙄 Great work 👍👍
Fantastic!!!! Material Ui is perfect!
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!
I just built this dashboard but with Vite instead. Awesome!
Hi, when setting up the context for theme one thing I have noticed is that ColorModeContext don't need that method toggleColorMode, since we are passing colorMode to the --> ColorModeContext.Provider value={colorMode}. Thanks for the great content
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!
It's up to you to fix it and then make a tutorial where you make this in Typescript for us.
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
Thank you so much, you really helped me with this one
Thank you for putting out such a great tutorial.
Awesome work, very useful ! Thank you!
Great tutorial! A little thing I noticed was that at 1:04:35 you skipped over quite a bit here.
That's banger video actually