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
The codebase developed in this tutorial can be access via Github at following link
https://github.com/aamirjaved844/Dashbaord-Tutorial-using-React-and-Ant-Design
Subscribe: https://www.youtube.com/@CodeWithAamir/featured
