React Admin Panel Tutorial | React Admin Dashboard Template Design

Поделиться
HTML-код
  • Опубликовано: 31 май 2024
  • React admin dashboard from scratch for beginners. React Admin Panel UI.
    Get Hostinger Discount: hostinger.com/lamadev Coupon Code: LAMADEV
    If it is valuable to you, you can support Lama Dev.
    Join: / @lamadev
    Buy me a coffee: www.buymeacoffee.com/lamadev
    Source Code: github.com/safak/youtube2022/...
    Learn creative CSS animations: lama.dev/learn-css-animation
    Learn SVG and SVG animations: lama.dev/learn-svg
    Join Lama Dev groups
    Facebook: / lamadev
    Instagram: / lamawebdev
    Discord: / discord
    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
  • НаукаНаука

Комментарии • 325

  • @okorojohn7788
    @okorojohn7788 2 года назад +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.💪✌️.

  • @digambernegi2023
    @digambernegi2023 2 года назад +40

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

    • @stephonking2847
      @stephonking2847 2 года назад +4

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

    • @digambernegi2023
      @digambernegi2023 2 года назад +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 2 месяца назад

      ​@digambernegi2023 thanks

  • @iamstevenhale
    @iamstevenhale 2 года назад +28

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

  • @vincent3542
    @vincent3542 2 года назад +15

    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 !

  • @Corntrop
    @Corntrop 2 года назад +7

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

  • @nozomitakemura3214
    @nozomitakemura3214 Год назад +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.

  • @sigfigronath
    @sigfigronath 2 года назад +5

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

  • @murtazanaqvi82
    @murtazanaqvi82 2 года назад +16

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

  • @CodeLife264
    @CodeLife264 7 месяцев назад

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

  • @usamakr
    @usamakr Год назад +2

    Hi Lama. I am very thankful to you for making such a clear and easy to understand lesson. Your style of teaching and speed are very easy to understand. Keep up the good work.

  • @fcandann
    @fcandann Год назад +14

    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

  • @coder5336
    @coder5336 2 года назад +2

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

  • @0xba0a
    @0xba0a Год назад +1

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

  • @d.doorscontent3024
    @d.doorscontent3024 11 месяцев назад

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

  • @samridhshubham8109
    @samridhshubham8109 2 месяца назад

    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.

  • @kristijanblazevic7141
    @kristijanblazevic7141 2 года назад

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

  • @tarkovarg
    @tarkovarg Год назад +1

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

  • @pietrodeveloper
    @pietrodeveloper Год назад +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!

  • @techtitbits
    @techtitbits 2 года назад +53

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

  • @andrewgomez8166
    @andrewgomez8166 2 года назад +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

  • @adebisisheriff159
    @adebisisheriff159 Год назад

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

  • @CodeCreativeOfficial
    @CodeCreativeOfficial Год назад

    Love it that Lama Dev explained in the video. 👍

  • @haythemsaidi91
    @haythemsaidi91 2 года назад

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

  • @avinashmurmu9070
    @avinashmurmu9070 2 года назад

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

  • @PattyBeautCode
    @PattyBeautCode Год назад +1

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

  • @hamidr8391
    @hamidr8391 2 года назад

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

  • @mulualemmhretu
    @mulualemmhretu Год назад

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

  • @husamettindonus3781
    @husamettindonus3781 Месяц назад

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

  • @hafezfhmi
    @hafezfhmi 2 года назад

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

  • @gabrielcavalcante4063
    @gabrielcavalcante4063 Год назад +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.

  • @TBDfilesLalit_kalyan
    @TBDfilesLalit_kalyan 2 года назад

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

  • @sweatypotato248
    @sweatypotato248 2 года назад

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

  • @guidopiotrowski7114
    @guidopiotrowski7114 19 дней назад

    Excellent tutorial! Helped me a lot! Thanks

  • @relativity-codes
    @relativity-codes 2 года назад

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

  • @jasper5016
    @jasper5016 2 года назад +1

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

  • @TheSerphmx
    @TheSerphmx 2 года назад +1

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

  • @leogansallo-sadiq6938
    @leogansallo-sadiq6938 2 года назад

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

  • @iUniverse
    @iUniverse Год назад

    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.

  • @RalfSchlindwein0
    @RalfSchlindwein0 Год назад

    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!

  • @ririyan5960
    @ririyan5960 Год назад

    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

  • @user-iz7jy5hj3x
    @user-iz7jy5hj3x Год назад

    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.

  • @srikarravoori124
    @srikarravoori124 2 года назад

    Great work! The dashboard is awesome.

  • @jose-kb1dg
    @jose-kb1dg Год назад

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

  • @NandarAye-mj3zv
    @NandarAye-mj3zv Год назад

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

  • @noamennourchen5548
    @noamennourchen5548 2 года назад

    Amazing video! Thanks! It was helpful for me!

  • @user-tn1yc1ij8d
    @user-tn1yc1ij8d Год назад

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

  • @jay-arcristobal5211
    @jay-arcristobal5211 2 года назад +4

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

  • @Juddbox
    @Juddbox Год назад

    Thank you so much for making this tutorial!

  • @olakunlemiracle4615
    @olakunlemiracle4615 2 года назад

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

  • @humairasajjad6679
    @humairasajjad6679 2 месяца назад

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

  • @fider2207
    @fider2207 2 года назад

    Thanks Lamadev for another amazing tutrorial

  • @premsingh6967
    @premsingh6967 2 года назад

    Thank you safak. Nice tutorial

  • @marufmarzuq
    @marufmarzuq 2 года назад

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

  • @justagirl3929
    @justagirl3929 2 года назад

    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 💖

  • @elbezz
    @elbezz 2 года назад

    awesome tutorial. THANK YOU!!

  • @satyaprakashsahoo7772
    @satyaprakashsahoo7772 2 года назад

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

  • @chrisfelicien
    @chrisfelicien 2 года назад

    Thanks for everything you are doing for us

  • @ahmadsetiadi8509
    @ahmadsetiadi8509 Год назад +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?

  • @smartjefreycoca5425
    @smartjefreycoca5425 2 года назад +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

  • @Japan4Ever
    @Japan4Ever Год назад +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.

  • @picklenickil
    @picklenickil 2 года назад

    Lama is back...
    With a banger..

  • @HieuNguyen-es3uc
    @HieuNguyen-es3uc 2 года назад

    Omg this is crazy good video, hope part 2

  • @user-kf3cx5ov6d
    @user-kf3cx5ov6d Год назад +1

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

  • @egalaseelmer8084
    @egalaseelmer8084 Год назад

    Thanks for this wonderful tutorial

  • @aditya6431
    @aditya6431 Год назад +1

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

  • @FillinGnom
    @FillinGnom Год назад

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

  • @arupde6320
    @arupde6320 2 года назад +1

    i love this channel . plz be regular

  • @benjaminagyekum7283
    @benjaminagyekum7283 2 года назад

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

  • @fregina3813
    @fregina3813 Год назад

    successfully made the front end page , thx a lot.

  • @ahrii0801
    @ahrii0801 7 месяцев назад

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

  • @saurabh3244
    @saurabh3244 Год назад

    one of the best channel for programmers

  • @sibungsu3504
    @sibungsu3504 11 месяцев назад

    this tutorial is powerful, thank you

  • @Dineshkumar-tx4fp
    @Dineshkumar-tx4fp 2 года назад

    This is awesome thank you for the video i really appreciate

  • @ngoduptenzin1867
    @ngoduptenzin1867 2 года назад

    Thanks you, learn a lots from your videos.

  • @ValentinScarevnea
    @ValentinScarevnea 2 года назад

    Very good tutorial, subscribed.

  • @tanvir1418
    @tanvir1418 2 года назад

    Many many THANKS Lama Dev❤

  • @ShivamMishra-qt9yy
    @ShivamMishra-qt9yy Год назад

    Thankyou! Waiting for backend part

  • @AndriusLau
    @AndriusLau Год назад +2

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

    And then a Header component:
    return (


    );

  • @faisalahmad100
    @faisalahmad100 2 года назад

    This tutorial is Incredible

  • @danangponorogo166
    @danangponorogo166 2 года назад +17

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

  • @pranavyeole102
    @pranavyeole102 2 года назад

    Thankyou so much for this video!

  • @vladislav7243
    @vladislav7243 2 года назад

    It was very useful for me, thanks.👍

  • @theophilus494
    @theophilus494 Год назад

    happy to find this channel

  • @inhvankhiem1827
    @inhvankhiem1827 2 года назад

    Thank for your work, you're hero sir

  • @tazul8
    @tazul8 Год назад +1

    Thank you for nice tutorial.

  • @mohammadsamiur4916
    @mohammadsamiur4916 2 года назад

    Many many thanks 😊. Love you from Bangladesh.

  • @TheMahdiHazrati
    @TheMahdiHazrati Год назад

    Thank you for perfect tut

  • @avertry9529
    @avertry9529 5 месяцев назад

    Nice now to transpose it to SolidJS, thank you.

  • @mohamedkaffouh436
    @mohamedkaffouh436 Год назад

    Amazing video! Thanks

  • @uminhtetoo
    @uminhtetoo Год назад

    Thank you so much for sharing.

  • @freeinformation7877
    @freeinformation7877 8 месяцев назад

    Thank you very much I appreciate it

  • @apoorvasa1026
    @apoorvasa1026 2 года назад

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

  • @ozanveyselcomez9466
    @ozanveyselcomez9466 Год назад

    maaan!! you r the best! thank you so much!

  • @farid.dev1
    @farid.dev1 2 года назад

    Super! Thank You Safak!

  • @WillSmith-qt7me
    @WillSmith-qt7me Год назад

    Great admin dashboard, thanks friend!

  • @juwonousk
    @juwonousk 2 года назад

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

  • @Kermin00
    @Kermin00 2 года назад

    As usual, waiting for more

  • @ghalitsar2730
    @ghalitsar2730 2 года назад

    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?

  • @oscarmelchorgalan3092
    @oscarmelchorgalan3092 2 года назад

    Fantastic!!! Thanks!

  • @softwareabbayiAPJ
    @softwareabbayiAPJ Год назад

    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 Год назад

      Did you encounter any errors during this tutorial?

    • @softwareabbayiAPJ
      @softwareabbayiAPJ Год назад

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