React Admin Panel Tutorial | React Admin Dashboard Template Design

React admin dashboard from scratch for beginners. React Admin Panel UI.

If it is valuable to you, you can support Lama Dev.

Join Lama Dev groups

0:00 Introduction
01:50 Installation
11:00 React Router Dom 6 Tutorial
18:10 React Sidebar Design (Menu Bar)
34:41 React Navbar Design Tutorial
46:35 React Reusable Widget Components
01:04:30 React Progress Bar Component
01:16:17 React Chart Tutorial
01:24:10 React MUI Table Tutorial
01:34:43 React MUI Datatable Tutorial
01:54:58 React Single Item Page Design
02:10:23 React Form Page Design
02:31:15 How to Use React Router Dom Links
02:36:57 React Dark Mode with Context API
03:00:37 How to Deploy React App to a Hosting
03:03:46 Outro

[okorojohn]

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.💪✌️.

[iamd.]

this was badly needed most of the interviewers ask ques. on these. 😭

[techtitbits]

Lama Dev never disappoint. You are a great asset to the Dev World 👍.
Give him a thumbs up if you think he is..

[tonyaidinis]

🎯 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

[iamstevenhale]

Fantastic! Looking forward to part 2 for connecting to a DB and making it dynamic! Subscribed

[fcandann]

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

[vincent]

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 !

[samridhshubham]

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.

[Corntrop]

Best admin dashboard design so far. Cant wait future projects on that

[murtazanaqvi]

One of the best tutorials of React I found so far!
Any chance of you showing us how to make it responsive?

[CodeLife]

Lama dev, you explain everything in detail and not like others who just type stuff without explaining it. Thank you sir ❤️.

[gabrielcavalcante]

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.

[sigfigronath]

I really wish i found you out a while back before I completed my degree. Great work !

[AndriusLau]

I see different approach for a routing between devs. For example you can add:

<Route element={<Header />}>
<Route path="/users" element={<Users />} />
<Route path="/products" element={<Products />} />
</Route>

And then a Header component:

return (
<>
<...header code />
<Outlet/>
</>
);

[danangponorogo]

Thank you Lama! This is great! But It would be nice if you can make it responsive.

[nozomitakemura]

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.

[timthegreatone]

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

[pietrodeveloper]

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!

[d.doorscontent]

Best Tutorial I saw to dashboard react on youtube. Congrats!

[justagirl]

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 💖