Build a COMPLETE React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode
EdRoh
View ChannelAbout
Hi, I'm Edward Roh. I'm a teacher, software engineer, and someone who loves to build software out of coffee. I was a lead engineer for a publicly traded company and have been developing for a decade now. My goal in both teaching and software development is to demystify the process of learning and using software. Without all the unnecessary buzzwords and jargon, I aim to make it straightforward for anyone to both grasp how to create and utilize effective applications, and also to create easy-to-understand software for businesses with powerful capabilities. For Business related inquiries: [email protected] For Technical related questions in discord: https://discord.gg/qvV2cH3r8b
Video Description
React Admin Dashboard Tutorial from scratch. We will be using React, Material UI, Nivo Charts, Formik, Yup, FullCalendar, and Data Grid to build this entire application. This application consists of Light and Dark Mode, 4 different Charts, 3 different Data Table Pages, FAQ Page, Form Page, and Calendar Integration. ——————————— create-react-app: https://create-react-app.dev/ material ui: https://mui.com/material-ui/getting-started/installation/ nivo charts: https://nivo.rocks/components full calendar: https://fullcalendar.io/docs formik: https://formik.org/docs/overview#installation yup validation: https://github.com/jquense/yup react pro sidebar: https://github.com/azouaoui-med/react-pro-sidebar google fonts: https://fonts.google.com/ Code link to mock data(copy and paste both files): https://github.com/ed-roh/react-admin-dashboard/tree/master/src/data completed code: https://github.com/ed-roh/react-admin-dashboard ——————————— Subscribe to my channel: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1 for more web development and web 3.0 blockchain tutorials! ——————————— Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now. I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients. Chapters: 0:00 Demonstration of a Complete React Admin Dashboard 3:12 Why build this React Admin Dashboard? 3:47 Installation 7:28 Code Setup 12:31 File and Folder Architecture 17:41 Theme with Light and Dark Mode 36:47 Appbar aka Topbar 51:21 Router Setup 57:14 Navbar aka Sidebar with React Pro Sidebar 1:27:13 Tables with Mui Data Grid 1:58:35 Profile Form with Formik and Yup 2:21:55 Calendar using FullCalendar Package 2:42:35 FAQ Page with MUI Accordion 2:49:22 Bar, Line, Pie and Geography Charts with Nivo Charts 3:23:20 Dashboard 4:03:05 Final Demo of Dashboard 4:03:25 Fully Built Complete React Admin Dashboard
No Recommendations Found
No products were found for the selected channel.