Build and Deploy a React Admin Dashboard With Real time Data, Charts, Events, Kanban, CRM, and More
HTML-код
- Опубликовано: 7 июн 2024
- Build an admin dashboard with full authentication, a homepage displaying charts and activities, a comprehensive table for companies with CRUD and search, and a Kanban board with real-time synchronization using Refine Framework.
⭐ Refine: github.com/refinedev/refine
💻 App Source Code and Readme (code snippets at the bottom): github.com/refinedev/refine/t...
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
💻 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:04:33 - Create Refine Project
00:07:39 - Refine Dev Tools
00:09:48 - Remove unnecessary files
00:10:45 - Data provider setup
00:29:44 - Auth provider
00:34:02 - Workflow setup
00:36:41 - Initial routes demo
00:40:39 - Update login
00:42:49 - App routes and layout setup
01:33:04 - Home deals and upcoming events
02:15:49 - Latest activities and total count cards
02:52:53 - Company list page
03:12:24 - Create company
03:29:25 - Company edit
03:47:34 - Kanban board
05:11:04 - Kanban task create
05:18:45 - Kanban task edit
05:28:26 - Deployment
refine is an open-source project, so show your support by giving it a star ⭐ github.com/refinedev/refine
Do I need any prior experience with JavaScript or React specifically to follow along?
yes you should
@@NeoGeoKage
you make wordpress type cms for blog website plz i request you
I'm not sure if the likes are people saying yes or not.
SIR PLZ suggest me some projects for my college final year. plz humble request
I found out about this project, while wrestling with the old admin dashboard project you created a year ago and it was a bit complicated for me due to some old dependencies and syncfusion issues, and also I was trying to create it with Vite and it was a headache troubleshooting the configuration and the code actually blow up on my face and made a miss that can't be resolved on the console, and after all of that, I suddenly found out your new up to date admin dashboard project uploaded before 7 days ago, Thank you so much for your hardwork, You're a Hero for all of us!
I just found your channel today, haven't even had the chance to get started yet but already subscribed and shared with a few like minded coworkers. I cant wait to dive in
Love your videos so much. Watching this was like an xkcd chart-
I felt real dumb at first, feeling less and less dumb as time went on.
Then, when you fixed "unnassigned"(sp) like that without cmd+f, I felt MUCH smarter for about 40 seconds...
... aaaaand back to feeling real dumb again!
But really, you're teaching me so much. Every time I go through your tutorials I'm so much better at React. I think I'll build my own dashboard later and reference your video! Phenomenal.
I have no idea how much prep this must take but the fact that it is FREE is INSANE. This could be a full $100 course on udemy easily.
I would love to see more on GraphQL and NestJS from you. Amazing teacher.
Insane how this Croatian dude continues to impress me with bangers in a consistent manner 👏
Enjoy! 🎉
You are such a gem in the community. Thank you for your contribution brother!
I appreciate that!
I was just about to start another admin project you uploaded a year ago. What a coincidence ! Thank you so much for amazing quality of video!!!! I love your projects.
That's awesome!
Got a link? Don't really care about graphql
@@nickwoodward819 grapqhl is not emphasised in the video. You can follow and build using any database or technology
wow! That real-time synchronization feature is amazing.
Thanks Adrian.
You're welcome!
I'm starting my first day as a dev next week. I've never used refine before. The engineer recommended it for our dashboard and I'm supposed to work on the full stack. My man THANK YOU SOOO MUCH. BLESS YOU.
Good luck!
bro did you started your project with refine?
@Masculine884 yeah and the DX is amazing. Literally all I need are 3 tabs; refine docs, localhost and ui lib.
It is appreciated that you continue to upload react material to continue learning, much success this year
Thank you! You too!
I'm in awe of what you do. Thanks for making me a better developer.
Happy to hear that!
Always feels like you read my mind. Just discovered refine in the last days and thought I want to try this out! Now you're here. Thanks!
It's amazing!
I would like to thank you for your content. It is quite packed for almost 6 hours yet you retained the energy with some cuts while delivering what the project required. It is definitely not for the beginners eventhough they could just follow step by step and reach the final result but sheer amount of concepts and opinionated nature of a framework included therein makes it look more complex then it actually is in humble beginnings. The way you set things up in advance (providers) are elegant yet once again requires a good command of javascript and react as you initially mentioned.
did u finish it?
I'm so excited for this brilliant video !
Thank You so much Adrian
Hope you enjoy it!
This is exactly what I'm looking for! This is a beast! Thank you!
You made me a confident full stack developer brother ever since i started a journey with you
dude, your videos are so easy and understandable to watch. I like it. Thanks
Glad you like them!
Svaka čast, najbolji channel za učenje programiranje. 👍👍
Hvala Ante!
Your content is better than All paid courses❤🎉
That's the goal! 🎉
Thank You Adrian for making such course free. Best regards from Bhutan.
My pleasure!
This is incredible can’t wait to work on this project !!
By far the best tutorials on youtube!!! Huge thanks!!👏👏
Wow, thanks!
Finally a good project with Refine. Many Thanks
You are welcome
Finished. Thankyou so much for this!!!!
Awsome! Always providing best learning projects
Thank you!
Incredible like always!!! Thanks again for this video
My pleasure!
Another amazing project, congratulations
Thank you! Cheers!
thank you for the updated rerfine frame work 😁
No problem 👍
That's what i want.Thanks adrian for providing such a lovely content❤
Enjoy! 😊
Thanks a lot Adrian you Post the video as you promised an I have been waiting until this day thanks 🙏🏾 🎉😂
No problem 👍
Excelente desarrollo con React para integrar con IOT , realizando captura de datos en tiempo real de sensores y controlando actuadores, muchas gracias por darnos conocimiento de alta calidad.🎉😊
Great idea!
Great video!! The only thing i've struggled with is that the volume is a bit low and sometimes is difficult to follow, it would be great if you turn up the volume a little, but anyway nice tutorial!
Now this how we are always waiting for your quality content which made us a true self taught engineers without any other paid courses🔥
Glad to help! 🔥
finally new update, Nice video my guy!
Appreciate it!
I've learned too much from you man thanks I'm looking forward to start this project
Good luck!
This as been a GREAT course and thank you for that but I feel that are a few bits missing so I put up a list:
- can't sign up new users
- the price for the companies are not updating after saving
- can't add/delete/update new events in Upcoming Events section or Latest Activities section
- can't modify the actual database
- most important how we can create multiple users and sync the data between them
Overall can't make it personal/custom to our needs. Take this with a pinch of salt, because those thing might be missing due to the fact that this course is not suppose to have everything in one go. THANKS A LOT for this amazing course!
true, would have been more useful to use even a local JSON as db and expand from there
hey, I'm facing the same issues. The pricing is not updated which is most important to show. Have you figured it out? Pls, let me know if you've got it.
Great as usual, I love Croatia ❤ Love from Iran 🇮🇷
Love to Iran ❤️
Really needed this thank you buddy
No problem 👍
Got an internship and they're asking me to build a dashboard. Thanks for this!
Are there any openings? I'd love to apply. Thank You
SAME 😀
You know the drill… like then watch… awesome stuff man 🎉
You rock!
Hello Adrian, I have watched a lot of videos from your channel. I have learned basics very well. Your videos are great. But, if you seperate the codes for each part that will be great. I mean, for part1 1 commit, for part 2 another commit. Then, people like me will start from the commit for the things we want to learn from your videos. I hope, you understood what i am trying to say.
I was learning React now Refine :(
I mean Refine is awesome but the learning curve is crazy
Thank you for the curse buddy
Thanks bro!!
This course should be around 100$ but you are giving it to us for free!!
Everything for JS Masters! :D
thank you for your and your team efforts, I learn a lot form each of your tutorial🤜
Happy to hear that!
I always wait for your video. ❤
You're the best!
Thank you so much for your effort brother🤗
It's my pleasure
Did you seriously read my mind, this is exactly what I wanted
Enjoy!
Your content is awesome! Very useful. Kudos! How about a full featured news website with cds, management dashboard and a users (authors) dashboard for entering new content to the site for next video?
Great suggestion!
Thanks for this great tutorial💪💪💪. Good Job !🔥
Glad you liked it!
always love your work
Thank you! Cheers!
Thank you for the informative video 🥳
Third! 🎉🥉
Build Begginer friendly javascript projects and explain Everthing from step in depth👏
This is actually real cool! I am wondering if you’re going to make tutorials with shadcn/ui? :D
that's a solid a project man thnx buddy
Glad you like it
Started learning using VS Code. Reached at 54.25 It is working perfectly.
Thanks for sharing!
How long did u reach , and did it work fine. ??
Amazing amazing amazing Adrian🔥🔥, you are the hope of New Developers. Also make a video on Figma and NGINX. Keep it up...🙂
Thanks! Will do!
The day i get so good to build this kinda project. I will be living a dream
god bless you sir , you litterly save my day with this project ♥♥♥
Enjoy! 😊
Hi , really bro u are doing awesome work and spreading lots of knowledge..
One request to you plz make a video of react native app with using typescript
One more amazing product❤❤❤
Glad you think so!
Thank you so much for building such a awesome apps
It's my pleasure
It was such a great explanation, can you please also add a video showcasing the latest expo router v3 and build a small react-native app?
Great work 🔥
Thanks 🔥
Mint Site Creation Video ❤
Keep going you are doing great ❣❣❣
Eres muy bueno explicando gracias
You never disappoint
Thanks
Thanks Adrian!
My pleasure!
That is so so amazing bro can you bring up more graph ql stuff in future please😊😊
Great idea!
Thanks for your effort.
My pleasure
Really good 👏content!
Thank you 🙌
Damn this channel is amazing
refine is amazing and helps structure frontend following good architectural guidance !!! Thanks Adrian
Thank you so much.
You're welcome!
nice login works very well)))
"Hi there" never get old😊
Glad to hear that!
I was waiting for this since you first announced it in a couple of weeks by email! Don't know if it's mentioned in the video but what is considered best practice /industry standard? hosting the react admin panel on the same domain/subdomain or complete separate domain? I am building a directory app and would then build an admin dahsboard for it for analytics, monitoring listings publishing ,activities and so on...
Best practice often favors hosting your React admin panel on a subdomain of your main application, rather than a completely separate domain
What is your visual studio code extensions list. Wondering which extension is syntax highlighting in the background...
Amazing as usual!!!!
pls build an e-learning platform with progress bar and courses. No one has teached that before and no one will like you ❤❤
Great suggestion!
@@javascriptmastery I would sincerely appreciate your assistance if you make that learning project . Thank you for your consideration.
oh, wow great work! ♥
Can you make a crash course for Flutter?
I prefer React Native
Wooooooooow. This is damn good!!
Enjoy!
Is it possible to implement this dashboard into an existing next.js project? My only concern is the project setup part. I am looking to add a dashboard to the AI-Prompt project you did a while back.
Is the sync between tabs managed by Refine itself or this tutorial separately walks through the setup to achieve sync among tabs?
I recently had to work on a task that needs data to be broadcasted between tabs/browsers to maintain a synced state, so just wanted to know if I can get value for that specific task? :)
Ps: the demo looks great 🎉
It's managed by refine directly 👌
May I ask how do you get your terminal to look like that? Do you use vscode extensions for that?
thank you bro
Thank you!
The latest activities in responsive is messed up. Any fix for that? By the way great video. Loved it the intro. Just starting out to build it
love you from India
Greetings to india
Thanks 💯💪
No problem 👍
Please make a video on the topic "how to land on your first job", everything from learning, when to start applying, job search portals, GitHub/ LinkedIn/Resume guide, interview preparation and tactics , skills to maximize package etc. with your typical way of explanation and animation. Only you can do that video in a professional as well as beginner frndly manner.Hope you consider my request
Great suggestion!
big love sir ❤❤
❤️❤️
Hey bro, I was taking a look a this project you're building in this video. I'm a react student, with a couple o little projects of experience.
In the last project I made, I worked with Shadcn UI because I really like how easy it can be to build websites rapidly. And because I was also watching the video of the cms made with next and Payload Cms, I wanted to ask you if it's possible to implement shadcn ui in these two kind of projects. My biggest concern is that since we're using prebuild layouts from tools like Payload CMS and Refine, they then can not be replaced later with a custom layout or design.
I would be really thankful if you could please clear my doubts. Thanks!
WOW again a nice big great project ? Why didn't you use Next JS Here Brother?
Not necessary for a dashboard, and to switch things up a bit
I Hope you one day bring a content about microfrontend✍!
Cool idea!
please do more with smart contracts and web3
First, thx for the great job that you do
Can you do another one in pure react (jsx and json server in preference) ?
You can try modifying this one to fit that goal
Took me a while but I've done this project :)
U can share this project code
@@naturitytick6330 why? it's the same like the vid
@@naturitytick6330 Why? It's the same like the video
@@osher867 but I have short time and code is lengthy
today is my first day at job and they told me to create dash board and here I am
how are u doing?
You know, it would be great if you could make a second channel just talking about the current landscape in developement. Some of us a freaking out about the current state of the job market and whether learning developement is even worth it now. Don't get me wrong, even though I do not have a dev jon, I love to code but ultimately I want to do it professionally but with what's happening now, how can we have a chance.
Cool idea!
If want to use custom rest provider instead of nestjs will that changes many things?
Adrian could you possibly include ShadCN or NextUI or a combo of both these UI libraries in your next project made using React or Next js?
I used shadcn in many projects