Build a REACT Admin Dashboard App using Material UI, ChartJS, and DataGrids in 2023
In 2023, creating an admin dashboard app using REACT has become easier and more efficient thanks to the plethora of available tools and libraries. In this article, we will explore how to build a REACT admin dashboard app using Material UI for styling, ChartJS for data visualization, and DataGrids for displaying tabular data.
Setting up the project
To get started, you will need to have Node.js installed on your machine. Once Node.js is installed, you can use the following command to create a new REACT app:
npx create-react-app admin-dashboard-app
This will create a new REACT app with the necessary files and dependencies. Once the app is created, navigate to the project directory and install the required dependencies:
cd admin-dashboard-app
npm install @material-ui/core @material-ui/icons chart.js @mui/x-data-grid
Implementing Material UI for styling
Material UI is a popular REACT component library that provides pre-built components for creating sleek and responsive user interfaces. You can start using Material UI components in your app by importing them into your components and utilizing their features for styling and layout.
Integrating ChartJS for data visualization
ChartJS is a powerful library for creating interactive and customizable charts and graphs. You can integrate ChartJS into your admin dashboard app to display data in a visually appealing and informative way. By importing ChartJS and defining your chart configurations, you can create stunning visual representations of your data.
Using DataGrids for tabular data
DataGrids are essential for displaying tabular data in your admin dashboard app. With the MUI DataGrid component, you can easily create and customize data tables with features such as sorting, filtering, and pagination. By utilizing DataGrids, you can present your data in an organized and accessible manner for users to interact with.
Conclusion
By incorporating Material UI, ChartJS, and DataGrids into your REACT admin dashboard app, you can create a feature-rich and visually appealing application for managing and visualizing data. In 2023, these tools provide a robust foundation for building modern admin dashboard apps with a polished and professional look.
You can download the project source code from here: https://pezeshkzade.com/blog/source-code/
People who have the problem of the "ProSidebarProvider" just need to use version 1.0.0 "yarn add react-pro-sidebar@1.0.0" this function for me
Love your content❤ how long it takes for 1000 subs bro??
the new routing uses createBrowserElement etc but not crowserRouter
Extremely easy to understand especially the theming for Material UI
Thanks for this Masoud.
Thanks!
@ReactwithMasoud
In app.jsx error showing :-
Sidebarprovider is depreceated.
How to resolve it please guide…..
Hello, there are same parts of the ProSidebar that are deprecated.
– Deprecated `ProSidebarProvider`
– Deprecated `useProSidebar`
how do we replace that things?
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.
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.
Thank you so much. I liked your content
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
How to make dark mode toggle?
I can't seem to center the channel images even with the styles
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?
Where would you save it? I currently have "@faker-js/faker": "faker-js/faker" in my package.json . I tried to import it into ChartConfigs.jsx with import { faker } from '@faker-js/faker"; Thanks again for all the help, excited to start another one after this one!
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!!!
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!
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 🙁