React Shopping Cart Tutorial | Context API with useReducer Hook in React JS

#reactshoppingcart #useContext#ReactJSProject #useReducer

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.

Source Code -
https://github.com/piyush-eon/React-shopping-cart-context-with-reducer

Live Site -
https://shopping-cart-with-reactjs.netlify.app

If any questions, ask here -
https://www.instagram.com/roadsidecoder/
Context API Tutorial -
https://www.youtube.com/watch?v=gQ_l-1zpVBo

React Router Tutorial -
https://www.youtube.com/watch?v=FUkAVMn5Tcs

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

Movie App in React JS and Material UI -
https://www.youtube.com/watch?v=vxUfx4aM5d8

Quiz App in React JS and Material UI -
https://www.youtube.com/watch?v=dg7XmuLvsbs

Dictionary App in React JS and Material UI -
https://www.youtube.com/watch?v=Nz6Q21ypzT4

Learn React From Scratch -
https://www.youtube.com/watch?v=CKH5zLGBJAI&list=PLKhlp2qtUcSYOMyooUr3IIDF5TMN488l7

Видео React Shopping Cart Tutorial | Context API with useReducer Hook in React JS канала RoadsideCoder