@@stephonking2847, not actual questions but they'll ask you to code one of these with react-router then about its implementation. If not the whole application then a section of it, however again dashboards are not the only ques. you will get it might differ from C2C.
There the genius goes again. Lama, you are undoubtedly the best webdev tutor so far in my own judgement. You have really touched/changed lifes with your priceless tutorials. I say much appreciation and keep it up.💪✌️.
Very nice tutorial. Sometings maybe improve: 1-) We added all pages Navbar & Sidebar. Maybe you can create Layouts folder and create layout & import components. 2-) You added h1 tag & resize it. But you can use just h3 element 3-) Add New btn routes same page (users/new). You can change Datatable to="new" Very good tutorial. I really like it. Many thanks
Incredible project 💕 I really believe that lately there are no more limitations in learning, even without spending "direct costs" there are many great people who distribute their knowledge globally, and Lamadev is the best of them all, I can guarantee my words! LOVE FROM INDONESIAN !
I rarely comment on vids but this one deserved it. He took time to explain things. Shown effect after putting each line rather than coping a bunch of codes and saying here, used this pile to do this. Completely worth the time and effort. Only thing I didn't understood was last 2min of tutorial on how he selected website name, but it doesn't matter. ANYONE READING THIS, GO FOR THIS TUTORIAL IF U WANT TO LEAN BASICS PROPERLY.
This was very helpful, will watch the new one. Given that we installed Material UI I saved myself some time by using other components like badges, text input, avatar, buttons and paper instead of creating them from scratch.. Thank you very much!
Thank you so much for creating such a nice 3 hours-long tutorial video. Your explanation is very clear and recording is easy to follow. I will try to go through all of the other videos of yours.
So I was checking your channel suddenly I couldn't see your profile pic I got upsad so much but then I refreshed and it came back, I thanked God , you became like my family member lol 🤣😂long live our king lama 💖
Successfully done with this project. Really a great Journey in completing this dashboard learnt SCSS, CONTEXTAPI, React Stuff, charts.js. So much to learn simplified easily through this project. Thanks lamadev 🧡🧡🧡 Done with 1. NETFLIX UI ✅ 2.Admin Dashboard ✅ 3.React Website Loading....
OMG! Thank you very much. Now I have a better understanding of web designing. Honestly my cascading stylesheet skills are very poor but thanks to you man.
Thank you i always watch your tutorial it really helps me a lot in learning react. i hope you do a tutorial for react + firebase and react native + firebase
Much much thank you, i found that your tutorial is easy to follow. and i already made an admin panel for my homework, following your tutorial... thaaanks
🎯 Key Takeaways for quick navigation: 00:00 🏢 Dashboard Design Tutorial 01:08 💰 Hostinger sponsorship details 01:51 💻 Setting up React app with Create React App 03:10 🎨 Styling using custom CSS and Sass 06:16 🔄 React Router for page navigation 10:23 🧩 Creating reusable Sidebar and Navbar components 19:13 🏠 Designing the main dashboard layout 25:29 🔍 Introducing Material-UI for icons and components 31:33 🎨 Created color options for the admin panel with dark and light mode, using flex and background colors. 35:06 🧩 Designed the navigation bar, including search bar, language options, and user avatar. 46:34 📊 Developed small widgets to display user, order, earnings, and balance information. 53:06 📈 Implemented dynamic data handling for widgets' content using props and conditional rendering. 01:02:41 🎨 Styled the widget icons with appropriate colors and background based on their data. 01:03:08 📊 Created chart containers for featured and normal charts, using flexbox layout. 01:05:52 🧬 Structured the chart section with titles, icons, and progress bars for data visualization. 01:07:10 📊 Created title and icon divs for revenue tracking. 01:07:54 📏 Adjusted font size and alignment for revenue display. 01:08:40 📊 Added progress bar using React Circular Progress Bar library. 01:09:38 📈 Added progress bar component and details for current sales. 01:10:08 🎨 Styled progress bar, chart details, and descriptions. 01:12:08 📊 Created summary items for target tracking (last week, last month). 01:12:56 ➕ Added down/up icons to show target progress. 01:16:36 📈 Explored options for using React chart libraries, chose Recharts. 01:17:14 📉 Installed Recharts library for creating area charts. 01:18:00 📊 Created and customized an area chart with data. 01:19:39 🖼️ Adjusted chart layout, titles, and colors. 01:24:09 🖋️ Set up list container for displaying transactions/orders. 01:25:35 ➕ Created a data table component for listing transactions. 01:26:14 📋 Integrated Material-UI DataTable with custom data. 01:37:22 📉 Explored Material-UI DataGrid for advanced table features. 01:38:18 📦 Installed the "data-grid" library for the DataGrid component. 01:39:03 🛠️ Created a DataGrid component with custom rows and columns. 01:40:44 👥 The tutorial demonstrates creating a React admin panel with a user interface for managing data. 01:40:56 🔍 The tutorial explores using the "render" method to customize data presentation and create dynamic content. 01:41:53 🖼️ Customizing the UI by displaying images and usernames in the admin panel. 01:43:22 📊 Organizing data columns and rendering cells using user-defined functions. 01:43:38 🧾 Creating structured columns for data presentation in the admin panel. 01:44:09 📷 Styling and aligning images and usernames within cells of the data table. 01:45:34 📑 Importing and integrating data sources and columns into the admin panel. 01:46:32 📊 Applying CSS styles to cells and images to enhance the layout and appearance. 01:47:54 ⚙️ Implementing dynamic class names and styles for displaying status values. 01:51:08 📜 Designing and integrating action buttons for user interactions in the admin panel. 01:54:53 🧮 Configuring pagination to control the number of rows displayed per page in the data table. 01:55:06 🧭 Organizing and structuring the layout of a single user page within the admin panel. 02:05:59 📈 Incorporating customized charts to visualize user spending data. 02:06:31 🗃️ Dynamically loading user data onto the single user page from the database. 02:07:10 📄 Constructing a structured layout for the "Add New User" page within the admin panel. 02:07:38 🧩 Creating and organizing form elements for user input in the "Add New User" page. 02:16:10 📝 The tutorial demonstrates creating a user input form in React for an admin panel, focusing on UI design. 02:18:16 📝 Adding an image input to the form, utilizing the 'file' input type for image selection. 02:20:21 📝 Styling the form inputs and arranging them with flexbox properties for better visual presentation. 02:24:26 📝 Using separate data sources for different pages to dynamically render input fields according to the specific context (e.g., users, products). 02:27:56 📝 Employing the `map` function to generate input fields from the data source with labels, types, and placeholders. 02:32:35 📝 Adding navigation links using React Router's `Link` component to switch between different pages within the admin panel. 02:34:00 📝 Styling the navigation links and applying a dark mode theme throughout the UI by toggling class names. 02:37:08 📝 Implementing a dynamic dark mode using React's Context API and a reducer to manage the dark mode state and toggle function. 02:44:40 📝 Enhancing the dark mode styling for various UI components, such as tables, buttons, and icons. 02:49:57 📝 Creating a reducer to handle different dark mode actions and applying the appropriate changes to the UI based on the action type. 02:50:26 🖱️ Defined cases in reducer for dark mode toggle and set actions. 02:51:00 🔄 Configured reducer logic for toggling dark mode state. 02:52:10 🕹️ Utilized `useReducer` hook and created a dark mode context provider. 02:53:35 🔄 Wrapped the application with the dark mode context provider. 02:54:20 🌙 Accessed dark mode state using `useContext` in app component. 02:54:49 🌓 Changed app theme based on dark mode state. 02:55:20 🎨 Implemented dark mode toggle functionality using context and reducer. 02:57:22 🧰 Demonstrated the importance of learning `useReducer` and context API. 02:58:05 ✂️ Implemented item deletion with `useState` and filtering data. 03:00:15 🚀 Project completion and deployment discussion. Made with HARPA AI
Hi Lama, what do you think, is it better if we put the Navbar and Sidebar Component wrapped in the Layout Component, then place them before the "Routes" Component App.js? That way, we don't have to redial the Sidebar and Navbar Component in our "pages" component?
Lama can you please make a tutorial of video player in which a person can select video quality and skip a specific duration like double tapping to skip 10 seconds on youtube
Thank you so much. You are amazing. Every time, I realize how interesting and encouraging programming is. Hope you will come up soon with the continuation of this system. I am waiting for the backend tutorial for this.
This is just what i need.. But can you please add the dropdown option in sidebar menu? Like Setting > Common setting Advance setting Setting can open those sub menu while clicking on it..😊
Wonderful tutorial. One of the best . Scratch that. The best. 1 request? Can you make it live so we can play around with it? The website hosted doesn't seem to work.
I have a question in terms of the design of the widget component, why didn't you expose the title, link, isMoney as props and spread operator instead of using string and a switch case to populate an the data object ?
this was badly needed most of the interviewers ask ques. on these. 😭
Really, like what kinda questions? Plz dont be afraid to go long
@@stephonking2847, not actual questions but they'll ask you to code one of these with react-router then about its implementation. If not the whole application then a section of it, however again dashboards are not the only ques. you will get it might differ from C2C.
@digambernegi2023 thanks
There the genius goes again.
Lama, you are undoubtedly the best webdev tutor so far in my own judgement. You have really touched/changed lifes with your priceless tutorials.
I say much appreciation and keep it up.💪✌️.
👏👏
he only does css, i thought he is going to do a lot of things but nah
Lama Dev never disappoint. You are a great asset to the Dev World 👍.
Give him a thumbs up if you think he is..
good
good
Fantastic! Looking forward to part 2 for connecting to a DB and making it dynamic! Subscribed
Best admin dashboard design so far. Cant wait future projects on that
Very nice tutorial. Sometings maybe improve:
1-) We added all pages Navbar & Sidebar. Maybe you can create Layouts folder and create layout & import components.
2-) You added h1 tag & resize it. But you can use just h3 element
3-) Add New btn routes same page (users/new). You can change Datatable to="new"
Very good tutorial. I really like it.
Many thanks
Incredible project 💕
I really believe that lately there are no more limitations in learning, even without spending "direct costs" there are many great people who distribute their knowledge globally, and Lamadev is the best of them all, I can guarantee my words!
LOVE FROM INDONESIAN !
I rarely comment on vids but this one deserved it. He took time to explain things. Shown effect after putting each line rather than coping a bunch of codes and saying here, used this pile to do this.
Completely worth the time and effort. Only thing I didn't understood was last 2min of tutorial on how he selected website name, but it doesn't matter.
ANYONE READING THIS, GO FOR THIS TUTORIAL IF U WANT TO LEAN BASICS PROPERLY.
One of the best tutorials of React I found so far!
Any chance of you showing us how to make it responsive?
Just came back here to say that this video helped me get an entry level programming job.
Thank you so much for your hard work. God bless.
👆Send a direct message for help 🆙 ⬆️…
What other projects have you built? What were the questions?
Lama dev, you explain everything in detail and not like others who just type stuff without explaining it. Thank you sir ❤️.
I really wish i found you out a while back before I completed my degree. Great work !
This was very helpful, will watch the new one. Given that we installed Material UI I saved myself some time by using other components like badges, text input, avatar, buttons and paper instead of creating them from scratch.. Thank you very much!
Thank you so much for creating such a nice 3 hours-long tutorial video. Your explanation is very clear and recording is easy to follow. I will try to go through all of the other videos of yours.
I see different approach for a routing between devs. For example you can add:
And then a Header component:
return (
);
amazing man i love how you can deal with design part easily. I learnt a lot from u
lama is a national treasure. Protect him at all cost.
It took a while but I finally made it! Thank you for sharing the knowledge
3hrs of pain
Is it mobile responsive?
@@ekramhosen8358 no bro
Best Tutorial I saw to dashboard react on youtube. Congrats!
I am learning about angular on my internship but men I still love react, Thankyou for this gem ❤ .
Everything is included, the best tutorial I have ever seen. Thanks a lot
So I was checking your channel suddenly I couldn't see your profile pic I got upsad so much but then I refreshed and it came back, I thanked God , you became like my family member lol 🤣😂long live our king lama 💖
U r awesome. Thanks. First I thought this is sound of Ninja Shaun but you are just like him.
Thank you Lama! This is great! But It would be nice if you can make it responsive.
Do that as a homework
thank you once again!! im really looking forward to the next part for this video, lets finish this thing out!!! i would be so excited!!! lol
This is crazy. I built who wants to be a millionaire yesterday. Today I'm building a dashboard.Tomorrow I'm adding firebase. THANK YOU LAMA DEV
Love it that Lama Dev explained in the video. 👍
Successfully done with this project. Really a great Journey in completing this dashboard learnt SCSS, CONTEXTAPI, React Stuff, charts.js.
So much to learn simplified easily through this project.
Thanks lamadev 🧡🧡🧡
Done with
1. NETFLIX UI ✅
2.Admin Dashboard ✅
3.React Website Loading....
Did you encounter any errors during this tutorial?
@@khosroyavari8914 no mostly it went fine. Let me know if you are facing any
Thanks so much Lama dev. You made me got a job with your priceless tutorials
OMG! Thank you very much. Now I have a better understanding of web designing. Honestly my cascading stylesheet skills are very poor but thanks to you man.
Hey man, this is just amazing. Thank you for this content, i've learned so much. Please keep up the good work
I love how all the main characters from Game of Thrones just showed up in the process of using the data table 😂
Thank lama dev, exactly on time.. I like the css shadow generator the most in whole project haha.
Thank God finally you are here with this amazing tutorial....
Yay ! I have just finished this react dashboard finally,
I am going to learn another tutorial also.
how amazing ! Thank you very much, :)
i actually used redux persist methods for the dark mode on/off.
since it looked really similar to context api.
Thank you very much for explaining every thing in details (Awesome & Valuable Content).
i love this channel . plz be regular
one of the best channel for programmers
successfully made the front end page , thx a lot.
Each and every video of yours is effin dope 🔥🔥🔥.
Many Thanks Lama, Like your tutorials, You are a light
This is impressive as usual, Next Tuto (better to use postgresql DB better) for this
React Admin Panel Tutorial | React Admin Dashboard
Thats right i hope lama read's it
Lama dev thank you for your lessons. You are the best.
Lama is back...
With a banger..
Thank you i always watch your tutorial it really helps me a lot in learning react.
i hope you do a tutorial for react + firebase and react native + firebase
Excellent tutorial! Helped me a lot! Thanks
Much much thank you, i found that your tutorial is easy to follow. and i already made an admin panel for my homework, following your tutorial... thaaanks
🎯 Key Takeaways for quick navigation:
00:00 🏢 Dashboard Design Tutorial
01:08 💰 Hostinger sponsorship details
01:51 💻 Setting up React app with Create React App
03:10 🎨 Styling using custom CSS and Sass
06:16 🔄 React Router for page navigation
10:23 🧩 Creating reusable Sidebar and Navbar components
19:13 🏠 Designing the main dashboard layout
25:29 🔍 Introducing Material-UI for icons and components
31:33 🎨 Created color options for the admin panel with dark and light mode, using flex and background colors.
35:06 🧩 Designed the navigation bar, including search bar, language options, and user avatar.
46:34 📊 Developed small widgets to display user, order, earnings, and balance information.
53:06 📈 Implemented dynamic data handling for widgets' content using props and conditional rendering.
01:02:41 🎨 Styled the widget icons with appropriate colors and background based on their data.
01:03:08 📊 Created chart containers for featured and normal charts, using flexbox layout.
01:05:52 🧬 Structured the chart section with titles, icons, and progress bars for data visualization.
01:07:10 📊 Created title and icon divs for revenue tracking.
01:07:54 📏 Adjusted font size and alignment for revenue display.
01:08:40 📊 Added progress bar using React Circular Progress Bar library.
01:09:38 📈 Added progress bar component and details for current sales.
01:10:08 🎨 Styled progress bar, chart details, and descriptions.
01:12:08 📊 Created summary items for target tracking (last week, last month).
01:12:56 ➕ Added down/up icons to show target progress.
01:16:36 📈 Explored options for using React chart libraries, chose Recharts.
01:17:14 📉 Installed Recharts library for creating area charts.
01:18:00 📊 Created and customized an area chart with data.
01:19:39 🖼️ Adjusted chart layout, titles, and colors.
01:24:09 🖋️ Set up list container for displaying transactions/orders.
01:25:35 ➕ Created a data table component for listing transactions.
01:26:14 📋 Integrated Material-UI DataTable with custom data.
01:37:22 📉 Explored Material-UI DataGrid for advanced table features.
01:38:18 📦 Installed the "data-grid" library for the DataGrid component.
01:39:03 🛠️ Created a DataGrid component with custom rows and columns.
01:40:44 👥 The tutorial demonstrates creating a React admin panel with a user interface for managing data.
01:40:56 🔍 The tutorial explores using the "render" method to customize data presentation and create dynamic content.
01:41:53 🖼️ Customizing the UI by displaying images and usernames in the admin panel.
01:43:22 📊 Organizing data columns and rendering cells using user-defined functions.
01:43:38 🧾 Creating structured columns for data presentation in the admin panel.
01:44:09 📷 Styling and aligning images and usernames within cells of the data table.
01:45:34 📑 Importing and integrating data sources and columns into the admin panel.
01:46:32 📊 Applying CSS styles to cells and images to enhance the layout and appearance.
01:47:54 ⚙️ Implementing dynamic class names and styles for displaying status values.
01:51:08 📜 Designing and integrating action buttons for user interactions in the admin panel.
01:54:53 🧮 Configuring pagination to control the number of rows displayed per page in the data table.
01:55:06 🧭 Organizing and structuring the layout of a single user page within the admin panel.
02:05:59 📈 Incorporating customized charts to visualize user spending data.
02:06:31 🗃️ Dynamically loading user data onto the single user page from the database.
02:07:10 📄 Constructing a structured layout for the "Add New User" page within the admin panel.
02:07:38 🧩 Creating and organizing form elements for user input in the "Add New User" page.
02:16:10 📝 The tutorial demonstrates creating a user input form in React for an admin panel, focusing on UI design.
02:18:16 📝 Adding an image input to the form, utilizing the 'file' input type for image selection.
02:20:21 📝 Styling the form inputs and arranging them with flexbox properties for better visual presentation.
02:24:26 📝 Using separate data sources for different pages to dynamically render input fields according to the specific context (e.g., users, products).
02:27:56 📝 Employing the `map` function to generate input fields from the data source with labels, types, and placeholders.
02:32:35 📝 Adding navigation links using React Router's `Link` component to switch between different pages within the admin panel.
02:34:00 📝 Styling the navigation links and applying a dark mode theme throughout the UI by toggling class names.
02:37:08 📝 Implementing a dynamic dark mode using React's Context API and a reducer to manage the dark mode state and toggle function.
02:44:40 📝 Enhancing the dark mode styling for various UI components, such as tables, buttons, and icons.
02:49:57 📝 Creating a reducer to handle different dark mode actions and applying the appropriate changes to the UI based on the action type.
02:50:26 🖱️ Defined cases in reducer for dark mode toggle and set actions.
02:51:00 🔄 Configured reducer logic for toggling dark mode state.
02:52:10 🕹️ Utilized `useReducer` hook and created a dark mode context provider.
02:53:35 🔄 Wrapped the application with the dark mode context provider.
02:54:20 🌙 Accessed dark mode state using `useContext` in app component.
02:54:49 🌓 Changed app theme based on dark mode state.
02:55:20 🎨 Implemented dark mode toggle functionality using context and reducer.
02:57:22 🧰 Demonstrated the importance of learning `useReducer` and context API.
02:58:05 ✂️ Implemented item deletion with `useState` and filtering data.
03:00:15 🚀 Project completion and deployment discussion.
Made with HARPA AI
Thank you for such a fantastic tutorial !. It is so helpful and the way you present it is fantastic. May God Bless you!
Great Video! Thank you lama, it would be nice also if there is a backend implementation using this frontend react design admin dashboard.
Always quality projects on this channel. Keep it going man 🔥🔥👏
holy moly, you are a true hero bro! keep it up, didn't knew your channel but now i've something to maraton! +1 sub!
Really sad you can only give 1 like. Awesome! Great thank you for such a useful content!
A very good tutorial for a beginner.. Im new to React and easy to understand. exactly what we need to learn.. kudos to you sir.
Thank you Lama, we can't thank you enough for your great work.
Awesome Video! Can't wait for the next video integrating with the backend 😄
Hi Lama, what do you think, is it better if we put the Navbar and Sidebar Component wrapped in the Layout Component, then place them before the "Routes" Component App.js? That way, we don't have to redial the Sidebar and Navbar Component in our "pages" component?
Thank you so muchhhhhhhhhhhh! I did my fyp using your tutorial!
Lama can you please make a tutorial of video player in which a person can select video quality and skip a specific duration like double tapping to skip 10 seconds on youtube
You are always amazing, please make the dashboard responsive by collasping the sidebar.... Thanks
To collapse navbar i follow with this tutorial it's useful.
ua-cam.com/video/wEfaoAa99XY/v-deo.html
Thank you very much for your lesson. It is so directly clear to my programming upgrade.
Thank you so much for making this tutorial!
Great Video, Thanks! How can we make this website responsive?
Lama you just make me what i want to do Thanks a lot man
Wow fabulous Lama Sir... You are really a boon for us.. God bless you with all ur wishes fullfiled..
Many many THANKS Lama Dev❤
This tutorial is amazing. Learned a lot. Thank you. ReactJS is awesome :)
Thanks Lamadev for another amazing tutrorial
happy to find this channel
Great work! The dashboard is awesome.
Thank you safak. Nice tutorial
Thank you so much. You are amazing. Every time, I realize how interesting and encouraging programming is.
Hope you will come up soon with the continuation of this system. I am waiting for the backend tutorial for this.
Thank you for nice tutorial.
Thanks for this wonderful tutorial
Lama, you should have used Outlet from react-router-dom for its children, instead of adding the navbar and sidebar in each page.
Thank you so much Lama for this video ❤️❤️
this tutorial is powerful, thank you
I'm waiting for part 2 :) I learned a lot here😇
Thanks for everything you are doing for us
This tutorial is Incredible
Many many thanks 😊. Love you from Bangladesh.
Omg this is crazy good video, hope part 2
We have Putin and then we have Lama Dev! I mean.. one takes out lives and the other motivates a dying soul! Thank you Lama.
Nice now to transpose it to SolidJS, thank you.
Thankyou! Waiting for backend part
This is just what i need..
But can you please add the dropdown option in sidebar menu?
Like
Setting >
Common setting
Advance setting
Setting can open those sub menu while clicking on it..😊
Thanks you, learn a lots from your videos.
Wonderful tutorial. One of the best . Scratch that. The best.
1 request? Can you make it live so we can play around with it? The website hosted doesn't seem to work.
awesome tutorial. THANK YOU!!
Amazing video! Thanks! It was helpful for me!
As usual, waiting for more
Great, actually building something like this I think I will implement some of ur functionalities 📝
Thank you for perfect tut
Amazing video! Thanks
I have a question in terms of the design of the widget component, why didn't you expose the title, link, isMoney as props and spread operator instead of using string and a switch case to populate an the data object ?
maaan!! you r the best! thank you so much!
Thankyou so much for this video!
Very good tutorial, subscribed.
Great admin dashboard, thanks friend!