React Admin Panel Tutorial | React Admin Dashboard Template Design

Sdílet
Vložit
  • čas přidán 6. 09. 2024

Komentáře • 325

  • @iamd.7
    @iamd.7 Před 2 lety +41

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

    • @stephonking2847
      @stephonking2847 Před 2 lety +4

      Really, like what kinda questions? Plz dont be afraid to go long

    • @iamd.7
      @iamd.7 Před 2 lety +4

      @@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.

    • @shivamtripathi8376
      @shivamtripathi8376 Před 5 měsíci

      ​@digambernegi2023 thanks

  • @okorojohn7788
    @okorojohn7788 Před 2 lety +76

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

    • @DeveloperAttic
      @DeveloperAttic Před rokem

      👏👏

    • @HUSAMSALEH
      @HUSAMSALEH Před 8 měsíci

      he only does css, i thought he is going to do a lot of things but nah

  • @techtitbits
    @techtitbits Před 2 lety +54

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

  • @fcandann
    @fcandann Před 2 lety +15

    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

  • @tonyaidinis4396
    @tonyaidinis4396 Před rokem +10

    🎯 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

  • @vincent3542
    @vincent3542 Před 2 lety +16

    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 !

  • @iamstevenhale
    @iamstevenhale Před 2 lety +29

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

  • @samridhshubham8109
    @samridhshubham8109 Před 5 měsíci

    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
    @Corntrop Před 2 lety +7

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

  • @murtazanaqvi82
    @murtazanaqvi82 Před 2 lety +16

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

  • @gabrielcavalcante4063
    @gabrielcavalcante4063 Před rokem +2

    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.

    • @cchelseacxx
      @cchelseacxx Před rokem

      👆Send a direct message for help 🆙 ⬆️…

    • @hamzapaskingakhtar
      @hamzapaskingakhtar Před rokem

      What other projects have you built? What were the questions?

  • @CodeLife264
    @CodeLife264 Před 10 měsíci

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

  • @sigfigronath
    @sigfigronath Před 2 lety +5

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

  • @timthegreatone
    @timthegreatone Před 2 lety

    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

  • @AndriusLau
    @AndriusLau Před 2 lety +2

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

    And then a Header component:
    return (


    );

  • @user-kf3cx5ov6d
    @user-kf3cx5ov6d Před rokem +1

    I love how all the main characters from Game of Thrones just showed up in the process of using the data table 😂

  • @justagirl3929
    @justagirl3929 Před 2 lety

    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 💖

  • @danangponorogo166
    @danangponorogo166 Před 2 lety +17

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

  • @nozomitakemura3214
    @nozomitakemura3214 Před 2 lety +2

    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.

  • @pietrodeveloper
    @pietrodeveloper Před rokem +2

    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!

  • @TheSerphmx
    @TheSerphmx Před 2 lety +1

    It took a while but I finally made it! Thank you for sharing the knowledge

  • @softwareabbayiAPJ
    @softwareabbayiAPJ Před rokem

    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....

    • @khosroyavari8914
      @khosroyavari8914 Před rokem

      Did you encounter any errors during this tutorial?

    • @softwareabbayiAPJ
      @softwareabbayiAPJ Před rokem

      @@khosroyavari8914 no mostly it went fine. Let me know if you are facing any

  • @sweatypotato248
    @sweatypotato248 Před 2 lety

    I am learning about angular on my internship but men I still love react, Thankyou for this gem ❤ .

  • @jasper5016
    @jasper5016 Před 2 lety +1

    U r awesome. Thanks. First I thought this is sound of Ninja Shaun but you are just like him.

  • @leogansallo-sadiq6938
    @leogansallo-sadiq6938 Před 2 lety

    lama is a national treasure. Protect him at all cost.

  • @coder5336
    @coder5336 Před 2 lety +2

    amazing man i love how you can deal with design part easily. I learnt a lot from u

  • @andrewgomez8166
    @andrewgomez8166 Před 2 lety +1

    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

  • @0xba0a
    @0xba0a Před 2 lety +1

    Everything is included, the best tutorial I have ever seen. Thanks a lot

  • @d.doorscontent3024
    @d.doorscontent3024 Před rokem

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

  • @gebretnsae
    @gebretnsae Před 2 lety +2

    This is impressive as usual, Next Tuto (better to use postgresql DB better) for this
    React Admin Panel Tutorial | React Admin Dashboard

  • @iUniverse
    @iUniverse Před 2 lety

    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.

  • @adebisisheriff159
    @adebisisheriff159 Před rokem

    Thanks so much Lama dev. You made me got a job with your priceless tutorials

  • @aditya6431
    @aditya6431 Před 2 lety +1

    i actually used redux persist methods for the dark mode on/off.
    since it looked really similar to context api.

  • @eenugaming
    @eenugaming Před 2 lety +1

    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

  • @tarkovarg
    @tarkovarg Před rokem +1

    Hey man, this is just amazing. Thank you for this content, i've learned so much. Please keep up the good work

  • @hamidr8391
    @hamidr8391 Před 2 lety

    Thank lama dev, exactly on time.. I like the css shadow generator the most in whole project haha.

  • @fregina3813
    @fregina3813 Před 2 lety

    successfully made the front end page , thx a lot.

  • @muhammeddidin115
    @muhammeddidin115 Před rokem +1

    Great Video, Thanks! How can we make this website responsive?

  • @husamettindonus3781
    @husamettindonus3781 Před 4 měsíci

    Thank you very much for explaining every thing in details (Awesome & Valuable Content).

  • @DeveloperAttic
    @DeveloperAttic Před rokem

    Love it that Lama Dev explained in the video. 👍

  • @jay-arcristobal5211
    @jay-arcristobal5211 Před 2 lety +4

    Great Video! Thank you lama, it would be nice also if there is a backend implementation using this frontend react design admin dashboard.

  • @TBDfilesLalit_kalyan
    @TBDfilesLalit_kalyan Před 2 lety

    Thank God finally you are here with this amazing tutorial....

  • @PattyBeautCode
    @PattyBeautCode Před 2 lety +1

    Yay ! I have just finished this react dashboard finally,
    I am going to learn another tutorial also.
    how amazing ! Thank you very much, :)

  • @smartjefreycoca5425
    @smartjefreycoca5425 Před 2 lety +2

    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

  • @ahmadsetiadi8509
    @ahmadsetiadi8509 Před 2 lety +2

    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?

  • @Chriss-cn1ch
    @Chriss-cn1ch Před 2 lety +2

    Lama, you should have used Outlet from react-router-dom for its children, instead of adding the navbar and sidebar in each page.

  • @Japan4Ever
    @Japan4Ever Před 2 lety +1

    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.

  • @ririyan5960
    @ririyan5960 Před 2 lety

    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

  • @arupde6320
    @arupde6320 Před 2 lety +1

    i love this channel . plz be regular

  • @user-iz7jy5hj3x
    @user-iz7jy5hj3x Před rokem

    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.

  • @godwinchidiahua6765
    @godwinchidiahua6765 Před 2 lety +2

    You are always amazing, please make the dashboard responsive by collasping the sidebar.... Thanks

    • @medthelegend8930
      @medthelegend8930 Před 2 lety

      To collapse navbar i follow with this tutorial it's useful.
      czcams.com/video/wEfaoAa99XY/video.html

  • @mulualemmhretu
    @mulualemmhretu Před rokem

    Thank you for such a fantastic tutorial !. It is so helpful and the way you present it is fantastic. May God Bless you!

  • @sajjadjafari2612
    @sajjadjafari2612 Před 2 lety

    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.

  • @RalfSchlindwein0
    @RalfSchlindwein0 Před 2 lety

    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!

  • @relativity-codes
    @relativity-codes Před 2 lety

    Many Thanks Lama, Like your tutorials, You are a light

  • @user-tn1yc1ij8d
    @user-tn1yc1ij8d Před rokem

    Lama dev thank you for your lessons. You are the best.

  • @saurabh3244
    @saurabh3244 Před rokem

    one of the best channel for programmers

  • @NandarAye-mj3zv
    @NandarAye-mj3zv Před rokem

    Thank you very much for your lesson. It is so directly clear to my programming upgrade.

  • @kristijanblazevic7141
    @kristijanblazevic7141 Před 2 lety

    Always quality projects on this channel. Keep it going man 🔥🔥👏

  • @satyaprakashsahoo7772
    @satyaprakashsahoo7772 Před 2 lety

    Wow fabulous Lama Sir... You are really a boon for us.. God bless you with all ur wishes fullfiled..

  • @deadlyecho
    @deadlyecho Před 2 lety +1

    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 ?

  • @FillinGnom
    @FillinGnom Před 2 lety

    Really sad you can only give 1 like. Awesome! Great thank you for such a useful content!

  • @avinashmurmu9070
    @avinashmurmu9070 Před 2 lety

    Each and every video of yours is effin dope 🔥🔥🔥.

  • @hamzapaskingakhtar
    @hamzapaskingakhtar Před rokem

    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.

  • @olakunlemiracle4615
    @olakunlemiracle4615 Před 2 lety

    Lama you just make me what i want to do Thanks a lot man

  • @avertry9529
    @avertry9529 Před 8 měsíci

    Nice now to transpose it to SolidJS, thank you.

  • @hafezfhmi
    @hafezfhmi Před 2 lety

    Awesome Video! Can't wait for the next video integrating with the backend 😄

  • @haythemsaidi91
    @haythemsaidi91 Před 2 lety

    Thank you Lama, we can't thank you enough for your great work.

  • @guidopiotrowski7114
    @guidopiotrowski7114 Před 3 měsíci

    Excellent tutorial! Helped me a lot! Thanks

  • @benjaminagyekum7283
    @benjaminagyekum7283 Před 2 lety

    Great, actually building something like this I think I will implement some of ur functionalities 📝

  • @ashbin8848
    @ashbin8848 Před 2 lety

    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..😊

  • @jose-kb1dg
    @jose-kb1dg Před 2 lety

    This tutorial is amazing. Learned a lot. Thank you. ReactJS is awesome :)

  • @humairasajjad6679
    @humairasajjad6679 Před 5 měsíci

    Thank you so muchhhhhhhhhhhh! I did my fyp using your tutorial!

  • @pauldavies729
    @pauldavies729 Před 2 lety

    Can appreciate this is an admin panel but the quality of this code and design is begging to be made responsive - would love to see that added

  • @picklenickil
    @picklenickil Před 2 lety

    Lama is back...
    With a banger..

  • @fabiano8888
    @fabiano8888 Před 2 lety +1

    As grateful as I am for you sharing your knowledge, I would like to make a constructive criticism. That's not easy to follow your steps when you jump from a file to another so quickly. Please, allow for a few extra seconds for your viewers to have time to read and process what you're doing. Thanks! :)

  • @gabedotrafego
    @gabedotrafego Před 2 lety +1

    Make a React Admin with nodeJs or Laravel Api System with DataBase. Thanks and Congrats for de Content.

  • @mohammadsamiur4916
    @mohammadsamiur4916 Před 2 lety

    Many many thanks 😊. Love you from Bangladesh.

  • @Juddbox
    @Juddbox Před 2 lety

    Thank you so much for making this tutorial!

  • @syednaveed8232
    @syednaveed8232 Před 2 lety

    Hello lama from Islamabad, Pakistan. I had followed most of your great tutorials. I would like to suggest you to make a video on 2FA using node and react.

  • @ShivamMishra-qt9yy
    @ShivamMishra-qt9yy Před 2 lety

    Thankyou! Waiting for backend part

  • @databrains8185
    @databrains8185 Před 2 lety

    Wonderful Tutorial... May please clarify why the "January" month is not being displayed in Chart.

  • @ahrii0801
    @ahrii0801 Před 10 měsíci

    I'm waiting for part 2 :) I learned a lot here😇

  • @fider2207
    @fider2207 Před 2 lety

    Thanks Lamadev for another amazing tutrorial

  • @sibungsu3504
    @sibungsu3504 Před rokem

    this tutorial is powerful, thank you

  • @apoorvasa1026
    @apoorvasa1026 Před 2 lety

    thank you Lama, im really learning a lot. could you please video on unit testing(jest)

  • @ghalitsar2730
    @ghalitsar2730 Před 2 lety

    the ResponsiveContainer is broken :( 1:19:00 , the problem is when the first load is look fine you can also increase the size of the window but when it comes to decrease the size it wont it gonna stay where we leave as we increase.. so it will make u scroll to the right to see full size the chart , do u have any reference over recharts ? which one is the easiest between react-vis, nivo and react-chart?

  • @juwonousk
    @juwonousk Před 2 lety

    Lama dev, thank you very much for the tutorial. I always waiting for your next tutorial especially about react js and next js. For the next, please make the tutorial how to use sql or mysql with react js..🙏🙏👍

  • @faisalahmad100
    @faisalahmad100 Před 2 lety

    This tutorial is Incredible

  • @BapiMallick1000
    @BapiMallick1000 Před 2 lety +1

    Sir please make tutorial on
    1. Full Educational website with MERN

    • @okorojohn7788
      @okorojohn7788 Před 2 lety +1

      I so much long for it. I bet it's gonna be bomb whenever he does that.
      Fingers crossed 🙅

  • @marufmarzuq
    @marufmarzuq Před 2 lety

    Thank you so much Lama for this video ❤️❤️

  • @cassyc35
    @cassyc35 Před 2 lety

    Hi Lama I have a problem with using the material icon it does not work on my sidebar. If I remove the DashboardIcon it works fine but no icon on my side menu it's all plain text. but if I will force to put the dashboardicon my localhost has no display its a blank page. i properly installed the react-router-dom and also install the mui's based on the tutorial

  • @theophilus494
    @theophilus494 Před 2 lety

    happy to find this channel

  • @chrisfelicien
    @chrisfelicien Před 2 lety

    Thanks for everything you are doing for us

  • @egalaseelmer8084
    @egalaseelmer8084 Před 2 lety

    Thanks for this wonderful tutorial

  • @ngoduptenzin1867
    @ngoduptenzin1867 Před 2 lety

    Thanks you, learn a lots from your videos.

  • @hieuvameomeo
    @hieuvameomeo Před 2 lety

    Omg this is crazy good video, hope part 2

  • @surendrawagle8341
    @surendrawagle8341 Před 2 lety

    Great tutorial lamadev.Can you please make tutorial on MUI Mini Variant Drawer with subnmenu or particular menu item and also setting active nav colors.

  • @ALLInONE-md9df
    @ALLInONE-md9df Před 2 lety

    sir can you please create a video on if someone username database in website and try to build a software how connect a username database into a new created mobile application?

  • @priyashnaraj13
    @priyashnaraj13 Před rokem

    Very nice tutorial just a request can a tutorial made on the backed for this using node js with my sql database…having some problem with api connection