Build a Shopping Cart Project in React JS in one video. We will use Context API with useReducer Hook for State Management. Learn Hooks like createContext and useContext. We will learn add to cart functionality along with sorting and filtering products by search also.
00:00:00 Intro
00:00:24 Project Overview
00:02:53 Initialize new React App
00:03:23 Setup React Bootstrap
00:05:29 Header Component
00:12:05 Creating Page Routes
00:14:43 Setup Context API
00:17:10 Generating Products JSON
00:20:09 useReducer Hook
00:23:43 useContext Hook
00:24:19 Home Page UI
00:28:13 Filter Component UI
00:30:55 Rating Component UI
00:35:27 SingleProduct Component UI
00:40:04 Add / Remove from Cart Functionality
00:45:20 Header Cart Dropdown
00:50:21 Cart Page
01:00:00 Change Cart Quantity Functionality
01:01:53 Filters Implementation
01:02:18 Filters useReducer
01:12:22 Transform Products Logic
01:16:44 Mobile Responsive Styles
01:17:56 Outro
Source Code -
https://github.com/piyush-eon/React-shopping-cart-context-with-reducer
Live Site -
https://shopping-cart-with-reactjs.netlify.app
