Build Admin Dashboard App using React and Ant Design with Sidebar, Statistics Cards, Chart & Tables

#reactjs #antd #dashboard #codewithaamir
In this video tutorial I have explained how to develop a React Dashboard using Ant Design UI Components to implement Dashboard sidebar, dashboard statistics cards, dashboard charts or graphs and Antd Tables with api integration along with other misc. items like header, footer and simple notification panels.

This video focuses on
- How to develop a React Dashboard using Ant Design UI Components
- How to implement Dashboard sidebar in react js app using antd
- How to implement Dashboard statistics cards in react js app using antd
- How to implement Dashboard revenue charts or graphs in react js app using antd
- How to implement Dashboard Tables with api integrations in react js app using antd
- How to implement Dashboard Header and Footer in react js app using antd
- How to implement Simple Dashboard notification panel in react js app using antd
- How to integrate dummy json APIs to populate Dashboard pages or components in react js app using antd
- How to use react-router-dom to create dashboard side menu navigation or links
- How to use different hooks like useNavigate, useLocation, useState and useEffect in React Dashboard Tutorial
- How to use chartjs and react-chartjs-2 library to implement charts in react dashboard projects
- How to use antd card component to create dashboard statistics cards to show number of orders, inventory, customers and revenue amount
- How to use antd table component with api integration to show different type of data like orders list, inventory list and customers list
- How to show badge notification using antd badge component
- How to use antd drawer component inside react dashboard app to show notifications list or comments list from api response
- How to create simple footer links like contact us tel phone number, privacy policy, and terms of use static links that open in a new browser tabs
- How to use ant design icons in different UI of react dashboard project
- How to create Routes or Navigation sidebar links using react router dom
- How to highlight sidebar links based on router window location pathname even on page refresh the state is made consistent
- How to apply css to react dashboard components to cover full page and push header and footer on top and bottom

Also in this video we will be using different ant design components, so if you have not gone through those already here are their specific videos to see how those components are being used in react app

Also used different hooks and react/javascript concepts based on these videos

The codebase developed in this tutorial can be access via Github at following link
In case of any questions please let me know in comments below.

Happy Coding!

[hakan]

Just woke up and saw the notification of this video, and you can't imagine how excited I became to see a video from you. i must say this is an excellent video. Thank you for making a real practical tutorial working with ant design, You're an amazing teacher and a great person where you go beyond the limits to help your subscribers. A real hearted person. Really appreciate your hard work and efforts. LOVE YOU MAN!

[priyanshutiwari]

Brother u saved my day today.... I was writing these components from scratch till date, and then suddenly I found your video and now am in love with this library. Keep on sharing nd making these videos.I do not find any better tutorials for antd on youtube than these videos of yours. Thanks a lot...!!!

[yfstefan]

Went with you step by step and guess what?! :D It worked just fine. Such a good tutorial! :) Keep it up mate, keep it

[azharouni]

Thank you again, this man is truly generous and very helpful. Thank you once again.

[nwankwoernestonyebuchi]

That's awesome man, you really tried. May God bless your handworks.

[s.m.mahmudurrahman]

Thanks for your nice tutorial. You are the only person who is consistently making videos with Ant Design Framework. Take my cordial love from my heart❤❤❤❤

[mohdnowman]

This is such a useful video. and One video covering almost every important topic. Thanks for such an awesome video. I learned so much from this video. Thanks alot.

[alesisilvestre]

Amazing my friend, the way you teach is impeccable

[gcedfdm]

That's great. Your video is great. I hope you can explain the React antdpro UmiJS project in the future

[neledwin]

Your content is really helpful. Thank you

[arnaudpoutieu]

Hi Aamir. Many thanks for this very valuable one. I am glad you've consider my input

[hassnainzafar]

in mint 38 where u defined the get order? sir

[SoulisYT]

Thanks for the video. Question: Why don't you use the Layout component of and.design which is based on flex and also has Header, Side, Content and Footer components ?
I mean, since you are already using a components framework wouldn't it be better and wiser to use all of it's components to make your life easier ?

[suzanne_atkinson]

your videos are so thorough! Do you have any courses on udemy with full app development, or anything on Next.js wiht Ant ?

[PrettyWomanAZ]

Thanks for the video, Please help me create a login form success redirect to dashborad, if not login authern protect dashborad admin and logout, thank you

[aye]

The best tutorial thanks, how can make it support rtl

[ankushch]

Plz create antd table header using json data. Include all the filters in header using json only.

[juniorlanga]

Hello Sir, I am getting this error could you kindly please assist me 🙏

Cannot read properties of undefined (reading 'products')
TypeError: Cannot read properties of undefined (reading 'products')

[goatzy_run]

Can i use this and change the information from a database? Is it easy

[hungomanh]

can you create project with React + TypeScript + Ant Design ?