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
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library Integration wit... link, please go through that video to set up the ground for further components implementation.
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
Ant Design Menu: • How to use Ant Design Menu Component ...
Ant Design Drawer: • How to Use Ant Design Drawer Componen...
Ant Design Table: • Ant Design Table component usage in R...
Ant Design Typography: • Ant Design Typography | Paragraph, Ti...
Ant Design Card: • How to Create React JS Card Component...
Ant Design Rate: • How to Use Ant Design Star Rating Com...
Ant Design Icon: • How to use Ant Design Icons and custo...
Ant Design Avatar: • How to use Ant Design Avatar componen...
Also used different hooks and react/javascript concepts based on these videos
React Router Dom: • How to implement Routes in React JS |...
useState Hook: • Learn React useState Hook with Exampl...
useEffect Hook: • Learn React useEffect Hook with Examp...
JavaScript Promise: • JavaScript Promises Tutorial | How to...
React Flexbox: • React FlexBox Tutorial for Beginners ...
ChartJS: • ChartJS React Tutorial to Implement D...
The codebase developed in this tutorial can be access via Github at following link
https://github.com/aamirjaved844/Dash...
In case of any questions please let me know in comments below.
For more details on ant-design, please visit its documentation at https://ant.design/components/overview
Happy Coding!
Watch video Build Admin Dashboard App using React and Ant Design with Sidebar, Statistics Cards, Chart & Tables online without registration, duration hours minute second in high quality. This video was added by user CodeWithAamir 15 January 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 120,327 once and liked it 1.4 thousand people.