React Responsive Admin Panel Tutorial | React Admin Dashboard Template Design | For Beginners

Поделиться
HTML-код
  • Опубликовано: 16 апр 2022
  • In this tutorial, you will learn how to make beautiful and responsive admin dashboard in Reactjs. We will use React hooks, apexcharts, motion-framer, modern css and many more from scratch during the development of this admin panel.
    Repositories:
    Starter: github.com/ZainRk/Dashboard-s...
    Source Code: github.com/ZainRk/React-Admin...
    "Copyright Disclaimer under Section 107 of the copyright act 1976, allowance is made for fair use for purposes such as criticism, comment, news reporting, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use."
    INSTAGRAM : @zainkeepsocde
    / zainkeepscode
    TWITTER : @TalhaNk2
    / talhank2

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

  • @RAMATW2023
    @RAMATW2023 2 года назад +25

    Followed step by step, video was 2 hours, took me two days... Good Job love it!

  • @mathis-meth4229
    @mathis-meth4229 2 года назад +39

    learning a lot through your videos. I just have one request. Always teach through projects just like you are doing right now. I love your project based approach to teaching. Waiting for more videos from you. Subscribed and pressed the bell icon. Love your way of explaining things. Keep going :)

  • @richardvidzrakou3389
    @richardvidzrakou3389 Год назад +3

    Building projects with small knowledge of a certain language pays us more knowledge in that language. We are waiting for more projects like this from you. I have learned a lot from your video, thank you.

  • @abdulhamid.469
    @abdulhamid.469 2 года назад +16

    It was awesome. Sir, Please explain from basic to advance because your teaching method is so nice. Thanks

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

    This is the best video on how to learn React. I started my learning journey a few days ago... This is the video that covered everything for me... Thank you...

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

    Keep making such kind of video. The explanation while coding is superb. Keep up the good work

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

    one of the best project on youtube. awesome bro.

  • @user-dk6nc8jo5z
    @user-dk6nc8jo5z Месяц назад +1

    I love it, the explanation is awesome. Thank you so much for the wonderful video sir.

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

    Great Explanation... Thanks For this awesome tutorial...

  • @bbhoxe
    @bbhoxe 9 месяцев назад

    thank you so much for this awesome tutorial, the dashboard is sooo beautiful!!!

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

    Woah extremely clean code and great explaination, Thanks for tutorial

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

    Brilliant ! I really enjoyed this man thank you

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

    SUBSCRIBED and All Selected. Thank you brother for these awesome projects.

  • @MALKHEDENIKHILPUNESHWAR
    @MALKHEDENIKHILPUNESHWAR 2 года назад +6

    Hats off to you, bro! Fantastic work. You've earned my sub!

  • @Kahanyonkakhazana666
    @Kahanyonkakhazana666 5 дней назад

    Teaching method is excellent and projects are unique!!👍👍

  • @MRTN589
    @MRTN589 2 года назад +3

    Buen tutorial, clara explicación.

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

    I learned a lot from this video . Thanks a lot!!

  • @wieslawsamushonga4444
    @wieslawsamushonga4444 2 года назад +8

    Whatever we will build next, can you please give an explanation of the entire lifecycle of a project from wireframes to designing and how you decide on the styling and views of the pages! Great Content
    Stay Beastly💪💪

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

      Doing it 9 months later but this is the same i wanted to ask

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

    Wow I love doing your projects.

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

    Thanks a loooooooooot !!
    just finished making that portfolio website and now excited for this one

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

    rocking with designs

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

    great stuff. wish could give 1000 thumbs... u saved me

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

    Thank you for this nice Tutorial!

  • @raidhamidal-qurtas5447
    @raidhamidal-qurtas5447 2 года назад

    Awesomely masterpiece ... wishing to brand similar approach in sharepoint

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

    Great Sir thank for creating that kind of videos really helpful...

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

    Hey you are truly osm keep making videos like this
    Definitely you will rock on yt
    I didn't seen this much good explanation yet on ty

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

    Wonderful work done by you keep it up

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

    this is the first video i ve watched from this channel and...wow...!!!! i am also excited for free source code... you forced me to subscribe bro ...!!!

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

    that was amazing...thank you a lot

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

    i like how you explain what you doing. keep it up ⭐⭐⭐

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

    this is lovely work Sir

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

    Thank you! Very useful!

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

    Thanks you sir . great video!

  • @ramadhanisadiki723
    @ramadhanisadiki723 3 месяца назад

    Umetisha sanaaa

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

    Life Saver!! hopefully the sidebar have functions or uses the router dom

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

    very well, I liked everything

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

    Thank you for this great tutorial - the explanation is very clear. I was wondering if we are allowed to use this project in our personal portfolios? If so, do you require attribution?

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

    Thank you so much for your react tutorial. Please make the back-end tutorial for this design

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

    nice content bro

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

    Zain bhai The Great 👍

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

    Just Awesome, Thank a lot

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

    Thanku sir ! Awesome

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

    I Really like that !

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

    great work

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

    really awesome, kindly teach the concept of forgot a password and reset password in MERN project

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

    Nice it was fantastic of work. I Like very much. .

  • @SanjayKumar-gy6ix
    @SanjayKumar-gy6ix Год назад

    I found very much interesting and easy to understand with project practically. Thank you for sharing knowledge.

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

      thanks

    • @eduardbermes
      @eduardbermes 4 месяца назад

      ​@@ZAINKEEPSCODE брат сними ролик как ты изучал английский язык, я хочу говорить на английском языке как ты, Спасибо!

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

    Amazing

  • @AbhaySingh-df9ib
    @AbhaySingh-df9ib Год назад

    You are doning very well

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

    awesome

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

    Subscribe Done... Keep sharing qualityful tutorials.... Best wishes..

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

    Good Work Zain..

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

    Great tutorial @ZAINKEEPSCODE. Would have been great to show how to link the sideBar to the mainDash whilst maintaining the same Dashboard view (Routes)

    • @muhangielioda
      @muhangielioda 10 месяцев назад

      exactly thats what i was waiting..!

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

    Thanks for this tutorial. I've always been a fan and I have made most of my friends subscribe here. I have a request... can you pls explain how I can go about the routers in the sidebar? This is very important
    Thanks

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

    very nice, everything crisp and clean !!!

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

    U r amazing 👏👏

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

    ey bro, thanks.

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

    thank you very much

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

    WoW

  • @bikashshah6050
    @bikashshah6050 2 года назад +19

    Please make a tutorial for adding database CRUDE operation in this project

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

    Kindly make complete course on web development

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

    Wow

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

    Hello, thanks for the great tutorial. I was wandering if there is a way to add a pie chart in the dashboard. How to achieve that?

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

    can you plz make guide how to redirect to different pages on clicking the sidebar menu options

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

    The video is really helped and amazing design. I thought you are doing all the menulink pages also. but sadly it is not here. Even though its worth trying.

  • @user-tn1yc1ij8d
    @user-tn1yc1ij8d 2 года назад +1

    THANKS A LOT

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

    cool

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

    Great job, please add point of sell (POS) to it. Thank you

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

    good

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

    Thank you Bro. Please, build landing page with chakra ui

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

    wooow

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

    Sir please make an another video for back-end for this same project..
    I really learn a lot from your tutorial. 🔥

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

      Sure. Next part is coming very soon...

  • @softmerit25
    @softmerit25 Год назад +4

    Amazing tutorials. Thanks a bunch. Can you implement React Route, Router on sidebar pages of this project?
    Thanks

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

    Hello Zain, I'm trying to make an API call and display it in the barValue and value parameters inside const CardsData. How can I do it? Awesome video btw! Thank you!

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

    I have implemented the grid-template-columns: 11rem auto 20rem; but the output is not same as yours. Spent hours but couldn't figure out. My sidebar is taking more than half of the page.

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

    sir i liked your explanation and build the other project based on this video it helped me a lot and i want to use multiple pages can you plz help me

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

    Nice video bro, can u make react with (real) API data (FIlm dbase maybe )? thank you, have a good day

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

    Hello there. What is the theme and font family you are using vscode? Thx

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

    Friend, what should I do with the backend? Via React too?

  • @Bunny-tj5gr
    @Bunny-tj5gr 2 года назад +3

    Sir Kindly Explain Basic To Advance.

  • @ideasislam6
    @ideasislam6 10 месяцев назад

    Please make a backend tutorial 😊

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

    how can i make the headings in sidebar as links to open some certain links when clicked upon

  • @AbhaySingh-df9ib
    @AbhaySingh-df9ib Год назад

    Please also make a video tutorial for sidebar route. How we can route those sidebar links Please that will be help me a lot. Please

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

    i tried using the code from your github and i typed in yarn start in the terminal in the project directory but its not working
    its looking for a license key in your package.json...need help!!!

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

    Can you tell me which vscode theme you are using ?

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

    good💓❤💓❤💓❤💓❤💓💙

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

    Plz make some more interesting projects on React js

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

    Please what extensions do you use?

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

    Bro how to make whising scripts using JavaScript plz make video

  • @JJ-ot3ps
    @JJ-ot3ps Год назад +2

    hi nice video! just wondering how to connect the admin panel to project's backend and frontend?

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

    hi, please sir may you make the link to your sidebar ? with map i'm not able to do that Thanks

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

    Are you using React Router in this video ???

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

    At 15:20 of this video when I'm doing the same after 100 times check up, why is it showing an error in App.js while adding components of Sidebar?

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

    npm ERR! react-circular-progressbar@"^2.0.4" from the root project
    how to solve this problem bro

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

    After typing yarn start it shows react scripts is not recognised as an internal or external command,operable program or batch file..

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

    it amazing but one problem when this line code add ( ) this graph not show plz hlp ...😔

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

    Bro, how to transfer into another page from the sidebar button

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

    thank you so mush for the video , but just a questions , how come you are so good with css ? how did you learn it like this

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

      Practice

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

      @@ZAINKEEPSCODE haha thanks , will do ! also another question please , so the data that we will show in those charts . technicaly you will retrieve them from the backend to the Data.js file right ?

  • @NsuhoreiedemEkpenyong-vw8he
    @NsuhoreiedemEkpenyong-vw8he 8 месяцев назад

    How can tailwindcss be used to achieve this design?

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

    Please make functionality work