Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More
Vložit
- čas přidán 16. 06. 2024
- 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!
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special CZcams discount code is automatically applied!
⭐Syncfusion Components: bit.ly/39pzH3R
⭐Syncfusion React Components: bit.ly/3lhzpyB
If you want to get a finished, highly customizable Material UI version of a similar dashboard, check out Flexy React Material Dashboard - www.wrappixel.com/templates/f...
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
Styles & Other Code: gist.github.com/adrianhajdin/...
Assets: minhaskamal.github.io/DownGit...
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
💻 Master JavaScript: www.completepathtojavascriptm...
Use the unique promo code "CZcams" on checkout to save $60!
📙 Get the Ultimate Frontend & Backend Development Roadmaps, a Complete JavaScript Cheatsheet, Portfolio Tips, and more - taplink.cc/javascriptmastery/...
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
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
JS Mastery PRO is Now Live - www.jsmastery.pro with a special launch discount🎉
YES, very curious to see the final result and how it works. Any news - spoilers before the official launch? 😜
@@universecode1101 It's launching with the AI-Powered Movie React Application, Full-Fledged Web3 NFT Marketplace and the JS Mastery PRO Masterclass Experience... 🔥
@@javascriptmastery Yoooooo this is so cool, ok then I can't wait 👏🏻😜
Very excited bro🔥
Can't wait
UNLEASH THE BEAST
As a developer coding with Js and React, I can only say this is a very important video tutorial guys. Great job as always
Much appreciated!
ollo
Ll l9ll9l
O
Can i Ask u for help on a react game? U have discord so i Can explain the question detailed?
BEWARE: Syncfusion is NOT free / MIT licensed software. DO NOT use this in any commercial software unless you understand their licensing fees and terms which starts at $995 per developer per year.
Is there a Open Source alternative?
Edit: However if anyone knows a free alternative, plz help.
So I check in official website but idk, it's free for under one million of dollars profits I know it's not free but if you get one million of dollars per year you can pay 12 mil USD idk where are your from but here one million of dollars it's a lot of money I think it's free right now so the problems coming if change terms of condition's but all technologies get evolution I think it's fine for design dashboard fast after you can designs your components if change terms of condition's mmm.
@@kaycampbell364 me too pls
The community version is free. If you don't make 1 million USD a year, you got nothing to worry about. I wish you all would have to use the paid version fellas c;
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!
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.
Great video as always. The best tutorials I've seen on CZcams so far. I think adding Typescript in at least some of the future project would be a huge help
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 CZcams!!!
THANK YOU SO MUCH!!!
No cap bruh 💀.
The best JavaScript tutor on CZcams. 👍.
This guy's lit. Wish we had more just like him 😿
please do you know why i didnt have the same UI on my browser yet the same code ??
This is just more than I ever expected from someone to do and share on youtube. Thank you Adrian you are amazing 💚
Hvala Miljane!
Really? That's a paid advertisement. The main Component he is using for all of this is some very expensive library.
@@TheDazedly To be fair, put aside the syncfusion lib part, the overall quality of the tutorial is great nonetheless.
This video was awesome, your had a hard work... 4 hours programming and recording the screen!! Thanks for everything you have done for us.
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.
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.
Thank you so much, I always like seeing your comments! Hope you enjoy it! :)
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 🤣
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.
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.
I appreciate that!
Whenever I hear about paid courses THIS is the type of quality content I expect. Thank you SO much for this.
Happy to hear that!
Great job, man!!!Thanks a lot for it!!!And of course could be amazing to have the video from you with full functionality explanation
Man, this is the entire career of Frontend Developers.
Great work mate... ✌️
Dude this is sick. Thank you for all the work you put into this!
My pleasure!
I was looking for this kind of course on udemy and other platforms. Happy that i was able to find it here. Im half way through the course and it helped me a lot with react concepts and how to structure the wesite.
Appreciate your hard work in bringing this type of content which is helping developers improve their skills.
You made in a few hours what many projects make in years. Great work!
The fun part of it... was just thinking on how to build a dashboard... you guys are the best!! Thank you and be blessed!
Go for it!
Amazing project,your the right person to explain such real projects which we actually implement for clients ..Please go ahead with backend as well for this project
Super content, organization, and presentation, plus a very thorough intro to Syncfusion. Thanks for your time and effort.
When you think about what more can Adrian add to his free projects, you come and drop this 💣💥
Super excited to follow along!
The fact that this is free is breathtaking, thank you so much and please keep up the good work 👏 🙌 👍.
I'm glad you like it! :)
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
Can someone give this guy an award already, such high quality contents after contents for free! Thank you
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 },
];
Thanks bro!
will try, ty
my guy = ) thank you so much
Gracias!! :)
Ahhh man thank you thank you THANK YOU!!! This had me stuck for a while! I had even changed the format property in the SparkLine.jsx to match data ${yval} as it was in the dummy file so i was close! lol Thanks man
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.
Yep. has he release one?
It's react course and i think react is front end development language
Oh I am so much happy.
This is the first time I have completed full project on CZcams.
Thank you Javascript Mastery I love your teaching style.Feeling like I have created everything on my own.
Did it come out as his…how was your experience following his video
i had so much fun following along this tutorial! i would love to see a crud application using syncfusion! Keep up the great work!!
I really appreciate you tutorials sir. You're really helping so many developers out there like me to ease work of development. Thanks 🙏🙏🙏
You're very welcome!
if the sparkline component doesn't seem to load for someone, type
yName="yval"
at 2:06:47
and
format: "${x}: data ${yval}",
at 2:08:08
glad i looked,ty
Thank you, mine still not showing up, any ideas?
@@lookslikeyoda1000 Its been a week since I've looked at this problem. I broke it up in sections exactly where the problem is. Moved ahead a little, looked at the outcome like 5 mins later. If that doesnt work copy and paste the different from the github version of the section. take a look at what was the issue. thats kinda of what you need to do. i have finished it and this project does work. he does have errors and does let you know of some. good learning experience and does work which is the important thing.
@@idontcare-nb3yu thank you, yes this is great material and learning curve. My console shows : "Cannot read properties of undefined (reading 'x')" I guess the {data} is not coming through properly...
@@lookslikeyoda1000 this is how mine works.
return (
I appreciate the crazy amount of value that you have provided. This is amazing!
Exactly what i am looking for the past few months, Awesome timing dude. Thanks for your work
Enjoy!
Damn, I'm actually in the middle of building a dashboard for my capstone project. This looks way better than what I have so I look forward to implementing it into my project! Great upload as always.
I'm glad to hear that Andres, enjoy!
This is HUGE !!! I am looking for dashboard project to learn
and just the right moment You uploaded this tut !!!!!!!!!!!
Thank you so much !
Glad it was helpful!
I love the quality of the projects and the production you produce. One of the fewest channels where i hit the bell as well besides subbing hehe
hope u read my comment!
first of all thank u soo much for the content you are providing its the cleanest and top of the line content i have seen on youtube.
u have really imporved my learning from knowing nothing in web development to almost knowing the top web dev tools. for that i cant Thank You enough but to pray for your success in life.
my comment might be irrelevant for some people here but alot of people here will agree with me too.
First of all i personally have no problem with the video being from 3hours to even 10-15hours your videos is like a movie for me so there is no need to cut it short and leave the project midway, i know u upload the code but coding the full project while watching your video feels like a class to me and i love watching your vids.
Alot of people here might have no idea about what a dashboard can give you when connected to a realtime application e.g ( E-Commerce website ) like its handing someone a golden spoon i would say , even for this dashboard i am really grateful so even if you dont get 20k likes please upload the full mern stack implementation of it using this current dashboard being used by your own E-Commerce website tutorial and fetching data from it.
Among alot of your qualities i loved your clean coding style specially using BEM method.
Its ok to use certain technology because of promotion but dont let it kill your own style.
Your Combo of React, Sanity, Sass for me its gold we are getting from you Adrian but in this video the tailwind just killed the overall design for some it would be a choice but for me tailwind is really confusing.
In the end i would say we all are waiting for your upload of this dashboard connected to some webapp and all the data is being changed in realtime instead of hard coding it.
alot of prayers for your health and success.
appreciate the hardwork put behind this. such a underrated youtuber
Thank you! 😊
Hi, I just wanted to point out that the issue with the percentage text colour encountered at 1:52:15 is NOT a bug. The tailwindcss docs clearly say not to construct class names dynamically. So if you just change "red-600" to "text-red-600" you should be good to go!
Thanks ever so much for putting together such an awesome course 👍🏾
thank you so much I was having trouble with that and didn't know how to fix it
It's awesome if you have $2500 to spit out for that syncfusion shit
Syncfusion is entirely free. They have a free community licence.
@@javascriptmastery I'm having trouble with the side bar. When I change to mobile it simply overlaps with the page in the background and just becomes transparent so you can see through it. The buttons overlap aswell
@@javascriptmastery I'm too stupid to learn HTML so that doesnt even concern me but thanks, indeed you can apply for a free account under $1M revenue /year
You help those who don't afford paid courses and they always want to learn. Content is Great.
just started with react and JS! thanks for doing it! learned a lot
As a developer, I feel every video from your channel adds value to my career. And this value adds confidence. Thank you for the beautiful work !!!!
That's the goal! :)
Can i Ask u for help on a react game? U have discord so i Can explain the question detailed?
perfeect timing, I was looking for a good admin panel for last two days, finally found it, thank you Adrian .
Perfect!
This video is amazing! I’m an experienced developer (who’s bad at ui design) and this really helped me
Just completed this. Surprised at how fast and easy it was to deploy using netlify at the end. Thank you much. Not able to purchase any of your paid content at the moment but it's on my list...
Was so excited to finally catch one of these on launch day! Starting right away on the dash project. The emphasis on the ability to work through the project years later with the same functionality and the json copy/paste followed by the legacy command prompt line was SUPER helpful and will likely have me returning to my sanity projects as well. I believe that will fix some dependency issues I was having, so again thank you so much!
Exactly! Enjoy! :)
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
hey @adrien ^ this is a great feedback
This is the kind of content have been waiting for.Great timing🙂. My school project isn't going to be a problem anymore😅.I appreciate you for the great work!!
Hope you enjoy it!
I am looking for content like this 5 years ago, and now I found it and also loves it.
Enjoy it!
I was always waiting for a dashboard application
As always great content 😍😍
Glad you like it!
My mind is blown. This is the most detailed and diverse dashboard I've seen with so much functionality. I can't wait to start learning how to create it. Thank you so much for the time and effort you put into creating such unique and extremely useful content. 🙏 May the creator bless you abundantly
Glad you like it!
Well, you pay 1000$/year for it 😉
@@rene78 The community license is completely free :)
@@javascriptmastery hello, I applied for the community license but didn't get any response can you help with that. Thank you.
Can't wait to see the next video implementing DB on this cool dashboard. Appreciate all the tutorials you've made.
I can really afford to say that it is the most complete Dashboard I have seen on CZcams. I've been following the channel for a while in France.
Greetings to France! :)
@@javascriptmastery 🙏🏿
A video with the CRUD functionalities and a database in a MERN application like you're mentioning would be amazing!
God bless this man endlessly. I can confidently say that is honestly one of the best tutorials out there. Just when I think I've seen it all from you, you just keep surprising me. Great work man and keep the good stuff coming, GOAT 🐐 #Respect
This is crazy!!! The most amazing dashboard I've seen so far in CZcams💥
Enjoy! :)
Wow! This is really crazy. Thank you so much for this. I really appreciate your effort and generosity in doing this tutorial
I can see months of hard work in it, and you provide this for free,
R.E.S.P.E.C.T
Thank you! 😊
Great work man🙌🙌 even paid courses are not this good!!
Your content is gold🔥
Imagine how our paid courses are going to look like then! :)
Thanks for putting this together. No one gives the admin panel the love it needs.
Министр, спасибо за этот метод - он работает на ура!
Really excited to try this feature out! Amazing work !
I just commented project ideas on your ecommerce shop project. Most of those were dashboards of various mangement systems.
And you just launched this one ! OMG I'm shocked 😱 You are a magician ❤ Love you.
I wish you million subscribers soon.
Thank you SO MUCH!
@@javascriptmastery You are a true inspiration for me. I will also become successfull creator like you are ❤
Wow, those Syncfusion components are awesome! And a MERN implementation video would turn this delicious tutorial into a veritable feast.
I agree!
@@javascriptmastery Hi, when is it coming in mern?
thank you Adrian just completed this 🤗 you have the best react tutorials accross the web
the tempo of Javascript Mastery tutorials are just always perfect!! can follow along nicely so super good :)
Thank you!
Amazing tutorial.
Would be great if you can record the second part, showing how to connect those tables, charts and calendars with the backend.
+1
+2
@@abhimanyuarora9262 +3
+4
+5
Give this man award for being the most Coolest & Superb teacher 🌻🌻🔥🔥
Thank you!
You, your channel, and your content are at another level. Thank you so much, Adrian, this is amazing and sometimes I can't believe it even. Love you, take care.
Thank you so much! :)
Great video setting up a dashboard. Looking forward when you add a working DB. It would be cool to see functionalities all lit up with a DB. Thanks for a great video!
i would love if you could make a part2 video that impliments the CRUD and backend part
Insane content really thanks you so much! If you could show us how to Implement a backend server and crud operations, learning how to fetch data from that server instead of the dummy dataset and render in those grid it would be like Christmas 🎄
that would awesome if he could do a demo for crud operation with a real headless server 🥰
This is one of the best dashboard video that i have seen ever in my life. Thank you very much for making my life easier. Thanks bro. Keep up the good work.
man whenever i think it cant get any better u blow me away, we are so lucky to have u and great job man seems like such an understatement😀 !!!!!
I appreciate that!
This is definitily amazing! Better than the majority of paid courses and even bootcamps cannot match this tutorial. But i wish, as you have a kind soul, upload a tutorial of reacjs using typescript pls, i would be thankfull to you for eternity! Big hug for you from Brazil!
Thank you, great idea! :)
Awesome!!! As a suggestion maybe you could do a tutorial on paywall applications such as OF or a pay to view blog/newsletter. Also, adding password recovery for login would be awesome too! Thanks your the best teacher on YT!!!
Great suggestion!
@@javascriptmastery Appreciated your hard work and the way you organised the tutorial. Can you please suggest how to implement login for this Dashboard
I truly hope you get 20k likes (at the very least given the quality of your tutorial) for this one, because I can't wait for the next one. Good job man !
Wow, thanks!
Great! A very high value video. I appreciate what you do for the community.❤️
I love your tutorial, waiting for Fullstack app with dashboard or GraphCMS to add content, not added from a data.js file, like your earlier Real Estate App tutorial would be great. Thanks
Working on it!
I love your tutorial, could you create the functionality to add real content by storing it in the database and being able to edit, create and delete, mainly for the calendar, clients and employees? Thank you very much for sharing your knowledge. God bless you!!
Great idea! :)
This is a great video, i appreciated very much the level of work put into it. If i had to make one critisism i think putting so many classnames for styling clogs the code and really makes it harder to read this code and focus on the data aspect. Personally i think they should have simple short classname and the styling aspect should be in its own css file, expect for dynamic styling of course.
To be honest here, you have all the components in order to create fantastic apps. Great job
Hi, please do you know if this project can be deployed in netlify? or some technologies are not compatible? I'm trying but give me this error in Netlify:
Build failed due to a user error: Build script returned non-zero exit code: 2
Do you know how to fix it please?? I really need to deploy this project (with some visual simple modifications I made)
@everyone if you are getting linter errors on the @tailwind lines in index.css, you need to have the PostCSS Language Support extension in VS Code.
Awesome! Had exactly this problem. Thanks mate!
This without doubt a great course, However, I feel that in order to pack so much in under 4 hours you have sacrificed explanation time that is vitally needed to properly understand how Syncfusion components really work. The pre-coded grid snippets do save time but without proper explanation it's like magic!. I've gone through the synfusion docs and have gained very little in understanding things such as the significance of leaving out the id prop of the GridComponent on the Employee page!?!
Definitely more of a code-along course that exposes you to a lot and you have to really play around and do your own research to do the actual learning.
I am a Data Scientist!
Through this I fully learnt how to package my algorithms and deploy them!
I'm given a dashboard project at my job. And I've cloned this dashboard to get going. This is ammazingg code setup and dashboard 🤩
THANK YOU SOOOO MUCH
You are going to bring down the prices of all the paid courses out there :D Great job man, no words, never stop these tutorials
Thank you! 👌
Thanks!
Woah thank you soo much!
@@javascriptmastery I want to know how it can be with Typescript, thank you for all your videos.
I'm not the front-end guy but love to learn how front-end devs thinking. Thanks for the work
I have been waiting for something like this!! thank you so much
Enjoy!
Great tutorial as always... Big ups, Andrian. I've implemented most of your tutorial with Sanity and I enjoyed the tutorial. I'm more than half way through watching this one before implementation. Can you kindly turn this to a MERN application. I'd be most grateful.
Great idea, thank you so much! :)
Hello why sanity version 3 don't accept a document with type postedBy
1:46:06 how do I get it to display the images I have the right layout and everything but it isn't displaying any images
Man, you just rock! Thank you for your time and willingness to share your knowledge. I appreciate it.
Naravno, drago mi je da ti se sviđa!
@@javascriptmastery prijatno sam iznenađen, sve najbolje ti želim. Puno pozdrava od suseda iz Srbije.
Thank you very much. Today at my job I have been asked to build an admin dashboard for our product. This tutorial is going to help me so much. 🙏🏾🙏🏾🙏🏾
Fantastic!
This was awesome. Can you please do a second part for this project with more pages like signing, signup, profile page, etc. and with a nodejs API backend with Mongodb.
That would be amazing! :)
@@javascriptmastery please I beg you…or sell it….why I don’t see mongo db and other databases tutorial please
So it's basically a SyncFusion sales video
This Channel uploads genuinely useful content. Very rare on the internet.
Really amazing, glad for watching your tutorial. You deserve more subs!
If anyone else is having trouble with the SparkLine and Stacked charts, don't use the code in the video. Use the code located in the project repo. The code in the video does not work for me, but the repo one does (despite it being different code than the one in the video)
Thanks man I was banging my head against a wall for the past hour.
Chart popped right up after pasting the code from github
@@MikeDCrypto Glad I could help! I was having the exact same experience. When I saw the second to last chapter of the video was about the charts again, I assumed he would cover it there, but nope :/