React Admin Dashboard MUI, Charts, GridData tables, Theming dark light mode, Responsive Panel, RBAC
This is the 15th part of React MERN Couch Surfing Project. In this video we added Admin Dashboard Panel with Access roles and permissions for admin, editor and normal user. The admin and the editor have privileges to access the statistics and charts on the main admin panel and to see and edit the users and rooms while the normal user has the advantage only to access and edit his/her own data information.
Modern Material UI5 responsive interactive template Design
GridData responsive Tables
Reactjs
Material UI5 (MUI5)
reCharts
react-router-dom (The new Version 6)
Role-based access control (RBAC)
Nodejs
Expressjs
MongoDB
Mongoose
moment
useMemo
The whole videos playlist of the project:
Source Code on github:
00:00 Introduction
09:44 Adding link for the dashboard using the new way of React-Router-Dom and restructuring the app routes and pages
13:22 Creating AppBar Side List and Content components using MUI
18:11 Creating the dark and light mode and the icons of the nav bar
22:02 React useMemo vs normal function outside the component
23:05 adding Dashboard list item link into the dropdown menu of the user on the home page
24:27 adding the user avatar, information and logout iconButton to the side list
29:06 adding the side list components (Main, Users, Rooms, Requests and Messages)
35:20 adding selection feature to the list link when its component is active (navigated)
39:17 Building Responsive Main Panel using css display: Grid and Flex
Смотрите видео React Admin Dashboard MUI, Charts, GridData tables, Theming dark light mode, Responsive Panel, RBAC онлайн без регистрации, длительностью 54 минут 06 секунд в хорошем hd качестве. Это видео добавил пользователь Code Like Pro 09 Июль 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 21 тысяч раз и оно понравилось 27 людям.