Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

Every web developer needs to build a React Admin Dashboard Application. Learn how to create the best and most modern one simply by watching this course. This Admin Panel includes one Dashboard, Three Pages, Four Apps, and Seven fully functional charts!

✅ A special YOUTUBE discount code is automatically applied!

📚 Materials/References:

You'll learn how to build a fully functional calendar, a kanban board, a WYSIWYG editor, and a color picker, as well as seven different charts!

Alongside building this phenomenal application, in this video, you'll learn:
- Advanced React Best Practices such as folder and file structure, hooks, and refs
- Advanced State Management of the entire application using React Context API
- And most importantly you’ll learn how to use Syncfusion - World's Best UI Component Suite for Building Powerful Web, Desktop, and Mobile Apps

Use the unique promo code "YOUTUBE" on checkout to save $60!

Time Stamps 👇
00:00:00 Intro
00:08:16 Setup
00:51:38 Sidebar
01:06:21 Context API
01:15:25 Navbar
01:39:45 Homepage
01:54:44 Revenue Section
02:17:36 Data Tables
02:36:10 Calendar
02:44:02 Kanban
02:49:21 WYSWYG Editor
02:53:49 Color Picker
02:59:13 Theme Fixes
03:33:10 Charts
03:51:18 Deployment

[sparshsukralia]

I really appreciate the hard work you're putting in these tutorials. And i'm gonna go ahead and say that YOU PUT OUT THE BEST REACT TUTORIALS ON YOUTUBE!!!

[universecode]

As a developer coding with Js and React, I can only say this is a very important video tutorial guys. Great job as always

[miljanjankovic]

This is just more than I ever expected from someone to do and share on youtube. Thank you Adrian you are amazing 💚

[driespillay]

I'm brand new to coding and only been trying it for a couple months. You are by far the best teacher I've come across!

[jericroldan]

Whenever I hear about paid courses THIS is the type of quality content I expect. Thank you SO much for this.

[waifufx]

I am so happy he released this video This man is dedicated and just happens to know the right thing to upload. I see this channel grow everyday literally. Keep it up sir.

[pgallovich]

I haven't been this excited about a technology in a long time. It is awesome to see JSMastery Pro is here. I can't wait to sign up in 9 days. Out of all of the channels I follow this one is by far the most valuable to me. Thank you Adrian for all the hard work.

[alvinyanson]

Thanks Adrian I can't imagine enough the hard work you put in making these valuable contents. You are helping a lot of developers. So far I have learned that you like to say always "Alright this is looking great" every time the app runs and looking nice 🤣

[gastonalejandrotrivi]

Great video in general. I think I made an entire articles worth of notes. Two things: TW is great but a bit opaque to the neophites, it would certainly help me if you rendered a praceholder and added classes later so we can see effects in real time. Same with setting up 20 things at a time, of course it makes sense from a senior perspective, but since you seem to want to show us Ill get it better if you render one change at a time, at least at first, then as you do it over and over you morph into the final form.

[bena.]

Great video as always. The best tutorials I've seen on YouTube so far. I think adding Typescript in at least some of the future project would be a huge help

[magpinybo]

Each new tutorial is always way better than the previous one. How do you do this? I was once asked to make a dashboard in a tech interview and failed nicely. Here we go again! Thank you for this.

[kw]

For anyone stuck with the error... SparklineComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
This is because in the dummy.js the 'y' value under SparklineAreaData is specified as 'yval' change all of them to 'y' like so.

export const SparklineAreaData = [

{ x: 1, y: 2 },
{ x: 2, y: 6 },
{ x: 3, y: 8 },
{ x: 4, y: 5 },
{ x: 5, y: 10 },

];

[bennytw]

I'm not the front-end guy but love to learn how front-end devs thinking. Thanks for the work

[its_just_me_]

Man, this is the entire career of Frontend Developers.
Great work mate... ✌️

[iearlg]

As a self taught new developer, I really appreciate the hard work you're putting in these tutorials. HANDS UP 🤲, I love to see a video where you will apply CRUD/Database using syncfusion.

[nilabhjaiswal]

i just completed this project and i have to say this is a important video for everyone who want to do codes in a limited amount of time thanks brother for your hard work giving me a good lesson thanks a lot

[omerthebear]

I rarely comment on videos, but I had to give a thank you and show of support for what you’re doing at 12:30, explaining and providing the package.json dependencies. I’ve been learning on the internet for years and this is one of the biggest issues with tech tutorials in general, a project with no known configuration management to the end-user. You spend half of your time figuring out what changes have been made to the new versions that you now have to use.

[adityanjsg]

I am a Data Scientist!
Through this I fully learnt how to package my algorithms and deploy them!

[rahulprasad]

Can someone give this guy an award already, such high quality contents after contents for free! Thank you

[JonasOchwat]

Would be nice to see a video in which you continue with this dashboard. Implementing a working DB, making the different functionalities actually work :) Otherwise great stuff, thank you