Build and Deploy a React Admin Dashboard With Real time Data, Charts, Events, Kanban, CRM, and More
Вставка
- Опубліковано 21 тра 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
![[LIVE] DAY 06 - Learn Complete Python And Machine learning | COMPLETE in 7 - Days](http://i.ytimg.com/vi/eXzlynHe5Hc/mqdefault.jpg)
![[LIVE] DAY 06 - Learn Complete Python And Machine learning | COMPLETE in 7 - Days](/img/tr.png)
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
Insane how this Croatian dude continues to impress me with bangers in a consistent manner 👏
Enjoy! 🎉
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.
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.
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
You are such a gem in the community. Thank you for your contribution brother!
I appreciate that!
wow! That real-time synchronization feature is amazing.
Thanks Adrian.
You're welcome!
It is appreciated that you continue to upload react material to continue learning, much success this year
Thank you! You too!
Got an internship and they're asking me to build a dashboard. Thanks for this!
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'm in awe of what you do. Thanks for making me a better developer.
Happy to hear that!
dude, your videos are so easy and understandable to watch. I like it. Thanks
Glad you like them!
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!
Your content is better than All paid courses❤🎉
That's the goal! 🎉
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?
You made me a confident full stack developer brother ever since i started a journey with you
Svaka čast, najbolji channel za učenje programiranje. 👍👍
Hvala Ante!
This is incredible can’t wait to work on this project !!
By far the best tutorials on youtube!!! Huge thanks!!👏👏
Wow, thanks!
Thank You Adrian for making such course free. Best regards from Bhutan.
My pleasure!
Finished. Thankyou so much for this!!!!
Awsome! Always providing best learning projects
Thank you!
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 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!
Another amazing project, congratulations
Thank you! Cheers!
Incredible like always!!! Thanks again for this video
My pleasure!
thank you for the updated rerfine frame work 😁
No problem 👍
Finally a good project with Refine. Many Thanks
You are welcome
finally new update, Nice video my guy!
Appreciate it!
Really needed this thank you buddy
No problem 👍
That's what i want.Thanks adrian for providing such a lovely content❤
Enjoy! 😊
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!
I've learned too much from you man thanks I'm looking forward to start this project
Good luck!
I always wait for your video. ❤
You're the best!
This is actually real cool! I am wondering if you’re going to make tutorials with shadcn/ui? :D
Thanks a lot Adrian you Post the video as you promised an I have been waiting until this day thanks 🙏🏾 🎉😂
No problem 👍
Great as usual, I love Croatia ❤ Love from Iran 🇮🇷
Love to Iran ❤️
You know the drill… like then watch… awesome stuff man 🎉
You rock!
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!
always love your work
Thank you! Cheers!
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! 🔥
Thank you so much for your effort brother🤗
It's my pleasure
thank you for your and your team efforts, I learn a lot form each of your tutorial🤜
Happy to hear that!
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.
Thank you for the informative video 🥳
Third! 🎉🥉
Looks like an amazing tutorial! Does Refine use it's own database? Can you choose which database to use.
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?
that's a solid a project man thnx buddy
Glad you like it
Thanks for this great tutorial💪💪💪. Good Job !🔥
Glad you liked it!
The day i get so good to build this kinda project. I will be living a dream
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. ??
One more amazing product❤❤❤
Glad you think so!
Did you seriously read my mind, this is exactly what I wanted
Enjoy!
Eres muy bueno explicando gracias
Great work 🔥
Thanks 🔥
Build Begginer friendly javascript projects and explain Everthing from step in depth👏
Keep going you are doing great ❣❣❣
god bless you sir , you litterly save my day with this project ♥♥♥
Enjoy! 😊
Thank you so much for building such a awesome apps
It's my pleasure
Thanks Adrian!
My pleasure!
Thanks for your effort.
My pleasure
Thanks bro!!
This course should be around 100$ but you are giving it to us for free!!
Everything for JS Masters! :D
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!
Really good 👏content!
Thank you 🙌
Mint Site Creation Video ❤
You never disappoint
Thanks
anyone hass issue arount 53:30 with the login issue. Make sure you add token in the headers which is in auth.ts
incorrect: headers: {},
correct: headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
specific is in the check type.
u r a god man
That is so so amazing bro can you bring up more graph ql stuff in future please😊😊
Great idea!
Hi Adrian!I'm doing same things like you.But 54:00 when i came up ı have a issue.I only see the home text.Cannot see the test text.Why ı cant see the layout.I cant find it
Hi! I got the same issue. Did you fix it?
@@eyleenjaen1509 no bro.I give up
Thank you so much.
You're welcome!
Those of you stuck at "Update Login" 42:00
In the auth.ts file, on line 17, needs to be changed to
url: `${API_URL}/login`,
method: 'post',
headers: { },
for the login function to work properly
Hi , even after changing this i am still facing the same issue , can you please guide if you have made any other changes too.
Hi! I have the same issue, i tried to do that, but it doesn't work
@@eyleenjaen1509 I ended up dropping this project altogether. Refine keeps updating their tools so it made it hard to continue with this project.
@@devanshbehl6109 I ended up dropping this project altogether. Refine keeps updating their tools so it made it hard to continue with this project.
thank you so much
😍
Damn this channel is amazing
What is your visual studio code extensions list. Wondering which extension is syntax highlighting in the background...
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
nice login works very well)))
oh, wow great work! ♥
Can you make a crash course for Flutter?
I prefer React Native
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
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!
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!
Wooooooooow. This is damn good!!
Enjoy!
Thanks 💯💪
No problem 👍
I am facing an error while trying to register. I entered my email id with password, and upon clicking the button I got this error: "Cannot destructure property 'success' of 'undefined' as it is undefined.".
thank you bro
Thank you!
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 👌
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
"Hi there" never get old😊
Glad to hear that!
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
May I ask how do you get your terminal to look like that? Do you use vscode extensions for that?
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.
love you from India
Greetings to india
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.
I'm having issues with the authentication, the one provided for dev purpose wasn't working. Do I need to perform further config?
Same issue here
@@adilpatel4277if issue is resolved please post solution here
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
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!
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
If want to use custom rest provider instead of nestjs will that changes many things?
big love sir ❤❤
❤️❤️