Build e-Commerce Website with React and Ant Design | Simple e-Commerce Website in React JS

#reactjs #antd #ecommercewebsite
In this video tutorial I have explained how to build an e-Commerce website with React and Ant Design.

This video focuses on
- How to build an e-Commerce website with React and Ant Design.
- Simple e-Commerce Website development in React JS
- How to create simple e-commerce website using ReactJS and Ant Design UI components
- How to create header for e-commerce website in react js
-How to create footer for e-commerce website in react js
- How to add react router dom navigation for ecommerce react website
- How to create header menu and sub menu for e commerce categories listing
- How to fetch e commerce related products from server in reactjs
- How to populate e commerce products in react js app using ant design card
- How to show discount badge ribbon on e commerce products in react app
- How to show rating on e commerce products in react app
- How to show add to cart button on e commerce products in react app
- How to implement add to cart API call for ecommerce react website
- How to show strike through price on e commerce products cards in react app
- How to show view cart button
- How to show cart list for ecommerce react website using ant design table
- How to change cart quantity on the go on view cart
- How to calculate grand total on cart view for ecommerce react website using ant design table summary prop function
- How to use javascript map, reduce and promises
- How to show badge on view cart button for ecommerce website in react js project
- How to use typography for different content of react js project
- How to use ant design drawer component
- How to use ant design List component to show a list of e commerce products
- How to add styling to e commerce website components
- How to create different pages and components inside react application
- How to integrate react e commerce website with server APIs
- How to create checkout FORM for e commerce website in react using antd form component
- How to add validation to e commerce checkout form to confirm order
- How to show loading while products are loading/fetching
- How to show success messages/feedback based on user action on e commerce website in react app
- How to combine different ant design components to create a simple website in react js
- How to user BrowserRouter, Routes and Route in react js application
- How to define routes in a react application using react router dom
- How to add product image preview in e commerce react website

If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at https://www.youtube.com/watch?v=03rzGKtEZmw 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 Button: https://youtu.be/-R2nRzsytig
Ant Design Input: https://youtu.be/2lLBqFvgcZc
Ant Design Select: https://youtu.be/3pkh9wX9bng
Ant Design Drawer: https://youtu.be/A_JZmMhJw-8
Ant Design Form: https://youtu.be/yW1LVrp9mVk
Ant Design Form Validation: https://youtu.be/ajp8hmAKEhM
Ant Design Menu: https://youtu.be/SI7lp_qLFV0
Ant Design Spin: https://youtu.be/9aEcizivPBU
Ant Design Message: https://youtu.be/uS6KjRHkAZg
Ant Design Table: https://youtu.be/Stw-WAUNNYM
Ant Design Typography: https://youtu.be/lXQ1yCFLX60
Ant Design Card: https://youtu.be/jWiZvlXW7NA
Ant Design Rate: https://youtu.be/5UOn4VVknlQ
Ant Design Icon: https://youtu.be/faUYaR4Nb1E

Also used different hooks and react/javascript concepts based on these videos
useState Hook: https://youtu.be/gLJIrVKo95U
useEffect Hook: https://youtu.be/JjUPc5pq_Tc
React Router Dom: https://youtu.be/Qls47-8zOg0
JavaScript Promise: https://youtu.be/KkZxD_6yHH0
React Flexbox: https://youtu.be/wMKcK8DO-0c


The codebase developed in this tutorial can be access via Github at following link
https://github.com/aamirjaved844/Simple-e-Commerce-Website-using-React-and-Ant-Design

For more details on ant-design, please visit its documentation at https://ant.design/components/overview

Happy Coding!