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 -
github.com/piyush-eon/React-s...
Live Site -
shopping-cart-with-reactjs.ne...
If any questions, ask here -
/ roadsidecoder
Context API Tutorial -
• React Context API with...
React Router Tutorial -
• React Router Dom [ Ful...
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 -
• Movies and TV Series S...
Quiz App in React JS and Material UI -
• Quiz App in React JS w...
Dictionary App in React JS and Material UI -
• 12 Language Dictionary...
Learn React From Scratch -
• React JS Workshop Day ...

[@rajat4002]

Whoever is watching this video, let me tell you one thing. You'll be asked to make such project in your frontend interview. Make the most use of this video. Thank you for putting such an amazing content on KZbin bhai 😍❤️

[@RoadsideCoder]

Yes, It'll be very helpful in machine coding round.

[@Sky-yy]

Thank you for your comment to let others know the importance of this video bro

[@sudhanshumishra935]

Yes, i got an assignment which was exactly similar to this 3 days ago, but sadly i coudln't implement the filter functionality......anyways now i have learnt about state management through this video

[@shujathaliirfan2662]

I agree

[@ssumit196]

thanks buddy, I was just wondering about this.

[@vamsikrishna7957]

Great tutorial!!If anyone is getting a blue background in Navbar dropdown badge,set {10}..the background color gets removed.

[@purangurung4559]

for route we can use

[@davidbaraiya2649]

Yes this is v6

[@sumittimori834]

You could've told for FAKERJS alternative faker doesn't work anymore or is it

[@chetandhadd321]

@@sumittimori834 they bro...im getting error The above error occurred in the component any help

[@AmitGhosh-lj3oc]

@@sumittimori834 did you find any alternative?

[@PeterMehr]

@@AmitGhosh-lj3oc You can use @faker-js/faker instead: --> install it with: npm install @faker-js/faker --> then import it in Context.js: import { faker } from '@faker-js/faker'; --> and then use it in Context.js: const products = [...Array(20)].map(() => ({ id: faker.string.uuid(), name: faker.commerce.productName(), price: faker.commerce.price(), image: faker.image.url(), inStock: faker.helpers.arrayElement([0, 3, 5, 6, 7]), fastDelivery: faker.datatype.boolean(), ratings: faker.helpers.arrayElement([1, 2, 3, 4, 5]), }));

[@Dhivyathaya]

Thank you for uploading it, Piyush. It's really helpful for us to understand the concept. I can see the hard work and effort you put into it. Once again thank you.

[@debasmitamallick6489]

This project is just awesome! I learned a lot from this video. Thanks a ton❤

[@AshishGupta-be2yz]

Very amazing project with indepth explanation. Learned many of new things related to reducer. Thanks a lot bhai.

[@jugalsuthar9751]

such a great session I learn so many things from this video...thanks and make more videos like this..

[@oncoding4520]

Have been seen some of your videos and you are really a great teacher. Please keep doing some more content for us :)

[@anonimato1987]

I am so greatful for the "!important" trick. This is the first time I'm seeing this. So useful!!! Thank you so much!

[@RoadsideCoder]

Glad it was helpful!

[@Hrit]

This is actually a very clean way to write a shopping cart. Thanks for the video man!

[@user-bk3hp4zw4l]

Bro can you forward the link of your shopping cart code bro

[@BrijeshSingh-dp1ku]

Please keep making such tutorials these are really great 👏

[@RoadsideCoder]

Thank you, I will

[@BrijeshSingh-dp1ku]

Best resource for React 🔥🙌

[@elad3958]

Thank you brother, I became an instant fan of your work/channel.

[@RoadsideCoder]

🙏🙏

[@parvathyvd]

Thank you so much for making such a wonderful project.

[@jenso413]

For anyone else curious about the Array(prod.inStock).keys(); evidently keys() is also an array method! I thought it was just an object method. What he is doing here is creating an array the length of the number of products in stock. For example, if there was 5 products in stock, there would be an array with 5 elements (all undefined initially). Then, the keys method converts an array to an iterable object with the array keys(indexes). This is then spread into an array and mapped over, essentially making each array element an index. I think a simpler and more understandable solution would simply be to use the index parameter from the map function, the result seems to be the same.

[@usamaarifshah7499]

hey

[@fahadahmed3508]

@@usamaarifshah7499 Thanks for the explanation!

[@ndahayokevin7626]

Incredible I love your tutorials, you are on of the best Tech youtubers I like most

[@RoadsideCoder]

Thanks a lot 🙏

[@Admin-up4hh]

Very underated Video . This is what I wanted... Thanks ..💯

[@mishka.g8462]

That's really great!! keep going!!!🤩

[@niranjanjathar3748]

Thanks for such a great video on context api

[@2784raj]

you are awesome mentor, well done mate!

[@sohadmad1823]

I can't express how much I am grateful to you, you really saved my life! Thank you very much, you are the best instructor I've learnt with him!

[@RoadsideCoder]

You're welcome ❤️

[@sk199]

your projects are super helpful brother..⭐❤

[@noobCoder26]

I am learning a lot from this channel man .I dont understand why this channel is so underrated

[@RoadsideCoder]

You can change that by sharing it to more people 😁🙏

[@noobCoder26]

@@RoadsideCoder I am doing that for sure

[@tanjimanim2391]

This is a great tutorial. I used this in my project and I want to point out two things. 1. the store/global state will be gone once the page refreshes. Use localstorage to store that. 2. The reducer function used in this video are not pure functions, as you are assigning values on reducers, which is not a good practice.

[@oussamaaitboulahna4849]

Hi brother , can u tell me how did u store ur data into localstorage and fetch it again , cuz for me im only get [object,object] ??

[@tanjimanim2391]

@@oussamaaitboulahna4849 share your code brother

[@shariqansari4056]

@@oussamaaitboulahna4849 Convert your data into string , then store in local storage.

[@oussamaaitboulahna4849]

@@shariqansari4056 Oh Thanks Man

[@abbaskagdi1]

This comment needs to be on top

[@vaibhavjadhav1702]

thank you for this amazing project🙂

[@alextalha_]

the best video by contextApi

[@shamaunnabi3508]

You are Just Amazing ....We need More Tutorial Like This....Please Upload More Beginner Projects

[@RoadsideCoder]

Thank you, I will

[@MrAndykofi]

Great job, thanks for sharing

[@mohitsaud2071]

Thank you for this wonderful tutorial.

[@RoadsideCoder]

Welcome mate

[@tirielross]

Thank you very much professor for this amazing project, this opens and expands my knowledge to know more about Reducer, provider state, etc.

[@RoadsideCoder]

Glad to hear that !

[@IvinAustan]

Thanks a lot, such an great video with nice explanation. 👍

[@abubakaryasin8610]

I learned a lot from you Great content

[@RoadsideCoder]

Thanks man. ❤️

[@mma-dost]

Thank you Bhaiya for this tutorial. Really great video 🔥🙏👌❤️👍👍

[@RoadsideCoder]

🙏🙏

[@alanouri9965]

Thank you man!

[@bardhan.abhirup]

Hey, firstly, thanks a lot for your tutorials and interviews. I genuinely feel like I've learnt a lot through them Having said that, if you don't mind a bit of feedback, your naming conventions and general consistency needs some attention. I feel it's all over the place. I know during the interview demos you tend to code faster but in these expositions when you have the luxury of time, i think it's worth paying attention to since you have a lot of viewers. Just my opinion. Regardless of that, I highly appreciate the effort you put in to your content. Thanks once again!

[@RoadsideCoder]

Hey, Thanks a lot for your feedback. And I have improved this in my recent videos after realising this. ❤️

[@user-pb5dy5th3z]

Thank you for your kind explanation! btw I wonder if there is a way to lose focus on the green cart button at "50:15" when moving to the cart page. I tried document.activeElement.blur() but it doesn't work. Probably it's hard to control the bootstrap component?

[@korndev6862]

Great Tutorial. i would like the react + typescript + combine reducers tutorial plz.

[@namethse01]

thanks bro, though manything outdate and alot update after time, but it still a good tutorial to start and easy to understand

[@saurabhtiwari-kg9vn]

Bhai kya khate ho 🤔 itna energy rahta hai 😄 Bhokal video h 🔥🔥

[@Ravikumar-wv2xq]

hello sir great tutorial perfect combination of useReducer and contextAPI. it's working same as like as redux.

[@vinayakjaimini7716]

hiii bro i am facing problem in running this project can u help

[@chiranjeevichowdary5948]

Waited for this a long time

[@RoadsideCoder]

Haha yeah

[@l.seciltuncay7921]

great tutorial ⭐⭐⭐⭐⭐ thanks

[@baridzimaximillem6743]

You are amazing man keep it up

[@RoadsideCoder]

Yo thanks mate!

[@abdulrakib9906]

Really great video. I am looking something like that. Thank you very much..

[@RoadsideCoder]

Glad u liked it 🙏

[@iqbal5942]

you deserve more subscribers and likes 💖

[@RoadsideCoder]

Thanks man. You can support me by sharing this to people who need it.

[@krutidewda3152]

very useful video. Thankyou so much for this.

[@RoadsideCoder]

Thanks! I have created an indepth course covering all such topics - roadsidecoder.com/course-details

[@parmaryash4406]

Amazing

[@azizulhakim1534]

amazing content brother. You deserve more subs, One request: if possible please use a loud microphone.

[@RoadsideCoder]

Thanks brother, I'll improve the audio quality 🤘

[@garima6571]

Great man

[@nishantbindhani9434]

how is ur dropdown menu position like this (end of dropdown menu container is aligned with the end of dropdown button)

[@souleymanecisse8644]

Great content , thanks for sharing

[@RoadsideCoder]

Glad you liked it 🙏

[@sushmitagupta]

Great tutorial! It helps me a lot while adding some feature in my E-commerce project but I'm using my own database and I have not added the "inStock" in my database so can you please tell me how can I add that and use in the qty increment feature of cart cards.

[@Ajithmani-bm1ji]

You got a answer

[@meidadb5992]

Thank you❤️

[@navinkumarsahu1159]

Please bring more such contents

[@mprasanth18]

In interviews is it okay to use plain css modules instead of bootstrap?

[@vaibhavsharma8012]

Good Project

[@miansaqlain8360]

Thank you Sir

[@alphonsesossou4283]

Thanks so much for this awesome course. I am making an excellent use of it. Only one minore issue. Children props is flagged with the error message "Children is missing in props validation". I am using react app created through latest vite. Any hint on what to add to the app so that error disappears? I should mention that the context provider function in jsx nor js.

[@akashawasthi9515]

utub recommending this piece of work

[@RoadsideCoder]

Awesome 🔥

[@saichaitanyaemandi6386]

bro thanks a lot

[@TajminurRahmanmeshadowscream]

Great tutorial. So much helpful. I have a question though. How to initialize state with products from API call? Because you're loading dummy products which are synchronised call. How about an async call using API? I tried but the initial state in useReducer initialized first before the products from API get loaded. What do you think?

[@RoadsideCoder]

You can do it the same way, that dummy data is also the result of an api call from faker

[@MrPeepa]

"A is only ever to be used as the child of element, never rendered directly. Please wrap your in a " what to do if i get this error?? because if i wrap with it says [home] is not a react component or react.fragment

[@Insane.18_7]

Hi bro thank you so much. You helped me a lot by sharing this content ❤. Can I know one thing, is this responsive, I mean is this compatible for smaller devices like mobile applications?

[@chafikgouasmia8089]

Thanks dear oracle : )

[@GauravPatel-kh1sq]

Very Nice explanation with real project. thank you. Can you create/share video with Backend API calling like realword application?

[@RoadsideCoder]

I already have a mern stack tutorial series. You can check it out!

[@lle5159]

This is too awesome, I've learned a ton by this video. Thank you very much! Just a little question: `alignRight` in is not working in my end. Has anyone caught the same thing?

[@kelongFX]

yes it says something about the dom i didnt quite get it

[@lle5159]

@@kelongFX I use CSS to align the dropdown menu, that I set position: relative for container and position: absolute for dropdown-menu

[@cat_onthe_]

Remove 'alignRight' and add Worked for me.

[@andress9525]

You can add inline styling to the tag like so: style={{ alignRight: true }}

[@nobodyneedstoknow128]

align={'end'}

[@sahanan7117]

Hi.. In creating page router, I have written same code as yours but their is error in my output... Please help me out

[@devsingal8373]

thank you bhaiya so much this hepls a ton, i was stuck in my cart app but this helped me get a new perspective thank you so much can you also make full working ecommerce website video plzzzzzzzzzzzzzzzzzzzzzzzzzzzz

[@RoadsideCoder]

Yeah sure bro!

[@celticspyd5887]

sir i want to know If a customer clicks on order btn to order and the order list should received at the admins page/panel without any database or backend possible?? if yes how sir?

[@sushilkumar-ef7gh]

Only when components need lot of different state than , its recommended to use state hook else switch on reducer or redux

[@NCS8331]

thank you

[@anhduc97hn]

can someone explain the `onClick` props in rating component for me please? why they're so different in `filter` and `rating` components? thanks!

[@iqbal5942]

Amazing video bro ❤️🙌

[@RoadsideCoder]

Thanks man❤️

[@priyankashingne8143]

This is really helpful video i m trying to create a same project but i m getting problem to access faker

[@huyenminh2631]

From VietNam thanks you so much

[@RoadsideCoder]

Welcome 🤟

[@purusharma8192]

Please make more react projects....thanks a lot btw are you in akshay saini discord voice chat on first day😁

[@RoadsideCoder]

Yes i was

[@himankshu]

So what will happen if you add some items and then hard refresh the page? Does the cart items updated to its initial state? If yes, how would you fix it?

[@blah9960]

Hey thanks for awesome tutorials. Please make a video on redux persist and how user are not able to see persist local storage data in production level

[@RoadsideCoder]

Hey, Have you followed my MERN Stack Tutorial with redux?

[@blah9960]

@@RoadsideCoder yes i followed but there is no redux persist implementation

[@RoadsideCoder]

@@blah9960 I have done it, in our store.js when the app loads, it takes user from localstorage

[@ronyroy3587]

How I will create increment and decrement button . Alternative of select and option. Can you tell me. I created but not working properly

[@manojsuggala4666]

Good video with clear Explanation. I tried implementing this project, But I didn’t get the output. I got an error saying that: Module not found ‘Faker’ can’t resolve in src/context/context.js. Even I install the package by npm install faker, the error is not re-solving. Can any one help me in resolving the error Thanks in Advance.

[@contentmastervideos9502]

Bro iam not getting images after cloning the application can anyone help me

[@shujathaliirfan2662]

superrrr bro

[@RoadsideCoder]

Thanks man

[@Ravikumar-wv2xq]

sir page refresh hone cart items clear ho jata h localStorege m kaise handle krna h with useReducer?

[@phuquang8558]

very good

[@iliyasahmedfarooqui6717]

Hey bro i am trying run your Project i am getting error Cannot read properties of undefined (reading 'seed')

[@nikolozmacharashvili1212]

complicated video, took a while for me to understand the useState hook, but a good job overall...

[@emonislam1660]

Great

[@sarthakkanungo9790]

why it is throwing error in single product component ,Cannot read properties of undefined (reading 'some')

[@muhammadsibtain4855]

(6:61388) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. How to Fix this ??

[@user-ys1hr7iu9b]

I found the error while installing the faker, anyone can help me in this? Error- Module not found: Error: Can't resolve 'faker' in 'D:\Projects\e-commerce\src\context'

[@wayofexcellence3629]

how can be used local storage to persist state in cart

[@sanyamjain4777]

Can i use api endpoint to get fake data will it work the same?

[@codedude8253]

whenever I add items to cart in Context it works fine , but when I go to Cart page the cart Context gets reset and it becomes empty.What should I do ? I thik its happening due to when I route to cart page the page gets refreshed.

[@andymarsh4643]

Please make a video on React Native Fingerprint/Biometric authentication

[@ABDULLASHAIK-yp8qf]

bro alignRight from drop down is not working .please help me

[@simranmundada]

I am getting module not found error which says can't resolve faker in my project

[@kacperj780]

hey how do you import components by just clicking at underlined red text in your code? is it some extension?

[@width19]

same, i didnt also see where he imported bootstrap

[@viditkumarjain1994]

Hi try to make the same getting error when trying to add or remove to cart button

[@rounakbhattacherje3426]

in the filter component for the stars , the onClick prop is receiving back the (i=index) from its Rating component , but in react data flow direction is unidirectional, so how is this phenomenon possible??? anybody who understood- care to explain, (i m very new to react, hence this is something very new to me). Thanks in advance

[@webber5629]

what to do if we need to fetch data from api using axios coz faker is no more