Build a REACT Admin Dashboard App using Material UI, ChartJS, and DataGrids in 2023
HTML-код
- Опубликовано: 7 июн 2024
- Learn how to create a powerful and user-friendly admin dashboard using React with this step-by-step tutorial. In this video, you'll discover how to build a React admin dashboard app from scratch using Vite and popular libraries like Material UI, ChartJS, and React Pro Sidebar. Whether you're a beginner or an experienced developer, this tutorial provides valuable insights on how to structure your project, choose the right libraries, and create a robust admin panel. By the end of this tutorial, you'll have a solid understanding of how to create a professional-grade React admin dashboard that's both visually stunning and fully functional. Start building your dream dashboard today with this comprehensive guide!
You can download the project source code from here: pezeshkzade.com/blog/source-c...
Time tags:
00:00 React Admin Dashboard APP DEMO
01:34 Libraries that used to build the app
02:42 Create an empty react project using Vite
17:04 How to customize Material UI
19:27 Create the APP header using MUI
30:15 Create the SIDENAV menu using react pro sidebar
40:52 Routing system
51:22 Build the Dashboard Screen
01:37:46 Build the Content Screen
01:58:49 Build the Analytics Screen
02:55:50 Build the Customization Screen 
Наука
You can download the project source code from here: pezeshkzade.com/blog/source-code/
there in that link it had no source code bro... we subscribed and verified email and downloaded bt not found above video source code files , that files r different ... plz provide source code bro
i can't find the source and i think this link has problem and even can't find your github profile too!!
Extremely easy to understand especially the theming for Material UI
Thanks for this Masoud.
Thanks!
thanks for your video. I have a question, now react-pro-sidebar have no in libary, what API should i change for ?or
Thank you so much. I liked your content
Love your content❤ how long it takes for 1000 subs bro??
@ReactwithMasoud
In app.jsx error showing :-
Sidebarprovider is depreceated.
How to resolve it please guide.....
Hi Masoud, its a great tutorial for Material UI learning. Is it possible for you to make a similar project where dashboard>card data coming from database.
Hi, yes but I don't think I can do it soon.
When trying to run my code at 47:00 , I keep getting a SyntaxError: The requested module '/src/containers/Analytics.jsx' does not provide an export names 'Analytics' (at AppRoutes.jsx:2:10) . I have tried every import/export I possibly can with Analytics involved, saw some people saying to change info in the json doc, but that seems extreme. Any help would be highly appreciated. Thanks again for this video, I'm learning so much!
You need to export your Analytics component using export default statement and when you want to import it, you need to do import Analytics from 'path to the file'.
I can't seem to center the channel images even with the styles
At 33:30 I keep getting the same issue.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Then says to check code at SideNav.jsx:16 , I have tried everything and have your code written identically. Wondering if something wasn't imported properly? Any help would be highly appreciated. Stuck for now :(
Hi, I think the issue is related to your import/export, maybe you didn't export your component properly or you miss spelled it in your import. Ensure that the file where the component is defined is located in the correct directory and is named correctly.
At 2:32:13 , my alert says : Failed to resolve entry for package "@faker-js/faker". The package may have incorrect main/module/exports specified in its package.json.
I am using Vite, I don't know if that would have something to do with it. It seems it cannot locate the faker package even though it is clearly installed properly. Any help would be highly appreciated. I also cant get the Analytics page to take up the entire body of the page, it only goes half way across the section. Wondering if it is CSS related? Thanks!!!
You will get this error if you have not installed the package yet or you mistakenly installed the package in the parent folder or your project(I did this mistake a few times).
For the second issue, I think it is related to your CSS as you said you can see the content but it is not placed correctly.
When my window size is "md" so the sidebar is hidden, the menu doesnt open when i click on the button like in the video
Does anyone have the same problem?
How to make dark mode toggle?
can i get source code link? please provide a link Thank you
In the content section, the labels are not visible for me. I am able to select different labels but the labels are not visible. What might be the reason for this?
Hi , please share the timestamp where you got this issue so I can check.
@@ReactWithMasoud At 1:40:18 the Tab labels are not visible when the page is rendered.
@@abhijithr1297 I guess you imported the tab component from another source, it should be from @mui/material
hi masoud , hope you are well . please send me source code for this cource🙏
Hello, there are same parts of the ProSidebar that are deprecated.
- Deprecated `ProSidebarProvider`
- Deprecated `useProSidebar`
how do we replace that things?
As always there is any info in documentation about new way of usage...
I got it to work by defining const [sideNavExpanded, setSideNavExpanded] = useState(false); in App.jsx and passing it to SideNav and AppHeader components as parameters.
Then you can use those parameters in your components as value for collapsed prop inside Sidebar like this: and in AppBar like this:
sideNavExpanded ? setSideNavExpanded(false) : setSideNavExpanded(true)} color='secondary'>
You can also define separate component for holding these values and use it similar like useProSidebar.
Facing Same issue
@@Speede04It's not working
@@Speede04 Thanks for help, it worked like charm 👍
Ah, source not freely available to follow, cannot opt out of mailing lists, so im gonna block your channel for recommendations, just a waste of time.
This is so frustrating. 5 years I've been in Vue/Vuetify. Being forced into React with MUI and this is the worst dev I have ever been through. Hands down.... We shouldn't have to do THIS MUCH CSS just to get a damn admin dash. What's the point of a framework if it's this much garbage?? asdlfjasdljfkl;asdjfkl;dasjfl;asdjfasdkl;fjasdl;kjfasdl;jfaskl;djkfkl;j