React shopping cart with context api for state management. Project build full tutorial.

In this Video you will learn how to work with react context api for state managment by build a E-commerce shopping cart. This saves prop drilling with useState and is easier to manage state on lager projects.
Help support the channel: www.buymeacoffee.com/tommykel...
Git Repo: github.com/TommmyKelly/shopin...
FaceBook: / tommykelly100codingtut...
Instgram: / tommykelly100
#react #developer #coding
Table of Contents:
00:00 - Introduction
02:21 - Create react app
06:16 - data.js
07:00 - Screens setup
08:54 - HomeScreen.js
14:01 - ProductCard.js
24:54 - Rating.js
37:24 - Nav.js
41:39 - Context API
1:11:45 - Cart.js
1:24:41 - CartItem.js

[@irinarodriguezlapegna7947]

I had some doubts how to implement each state, but your explanation was very clear! Thxs

[@tommykelly1007]

Thanks Irina Rodriguez Lapegna. I am glad the video helped you.

[@mrxgamer7567]

Very informative to get better at using use reducer as well with cart context, love from India brother.

[@davidtanko2003]

at first i thought this was another crappy tutorial until i tried it out , man! You just earned a subscriber . keep up the good work.

[@tommykelly1007]

Thank you David Tanko. Thanks for subscribing.

[@user-qj6gk9nv3p]

Hello, I am a beginner developer learning React in Korea. I listened to KZbinr's lectures through the KZbin algorithm. I would like to thank you very much for a good lecture. Have a nice day!

[@tommykelly1007]

Thanks so much. Glad I can help.

[@sangtv_AK]

Thank you for sharing your knowledge. I appreciate your time and consideration. I'm looking for more React projects.

[@tommykelly1007]

My pleasure! You are welcome. I am currently recording some more with some react native coming soon also.

[@sangtv_AK]

@@tommykelly1007 I love these practical react apps tutorials. They are useful, and we can learn these key concepts.

[@tommykelly1007]

Thanks Sang Vo

[@maliksaraanasim5404]

Believe me brother You have just earned a sincere fan. I have been trying to understand context api for a month now and finally I found you! All the tutorials I found are basic stuff like Counter increment and decrement! They wont implement anything that would give us an idea about how a professional thinks. This is because we viewers want tutorials on things that add some value, like using context to add items in baskets, or authenticating the user, Login/Logout. PLEASE CONTINUE UPLOADING!

[@tommykelly1007]

Thanks Malik Saraan Asim for you comment. I am currently working on more video projects and hope to have some uploaded early next week.

[@daniellinhares3662]

Appreciate that! Thanks from Brazil! Keep going!!!

[@tommykelly1007]

Thank you Daniel. More videos on the way.

[@optsjok959]

Thank you for this video. you earned a new sub!

[@aldhairgarcia3800]

Thanks for the video, it's been help me so much to learn more about react js

[@tommykelly1007]

Thanks Aldhair Garcia you are welcome.

[@rightjtv7641]

thank so much for this amazing tutorial i learn a lot

[@tommykelly1007]

Thanks Right j tv. Glad it was helpful!

[@fromthefuture3945]

Thank you for this amazing tutorial

[@tommykelly1007]

Thanks very much. Really appreciate your comment. I am working on a new video and it should be posted sometime next week.

[@odogwujonas9501]

Thank you very much. Learnt tons of useful concepts and building techniques.

[@tommykelly1007]

Glad it was helpful!

[@tpo9767]

So grateful for this🙏🙏🙏

[@tommykelly1007]

Thanks Tolu Philip I am happy it helped you.

[@Billy_98]

Very good video, man. Thank you so much! Greetings from Romania!

[@tommykelly1007]

Thanks Ken I am working on a new video. Should be posted sometime next week.

[@s1sko7]

Very good tutorial thank you! 2 things I ran into : 1) You gotta have react-router-dom v6 to use Switch 2) On the cart page when I add or remove products, the product number in the header do not update. I will need a little help for that 🙌

[@tonywest341]

Great Job ! you made it easy for me

[@tommykelly1007]

Your welcome Tony glad I could help.

[@lawesosah9214]

Great video I understood this quite easily

[@tommykelly1007]

Thanks Lawe Sosah

[@rehanchoudhury1937]

This really well explained video thanks

[@tommykelly1007]

Thank you Rehan choudhury

[@dylancorr8054]

Very helpful tutorial.

[@tommykelly1007]

Thanks Dylan

[@kevinmore2188]

You're the best. thnks a lot!

[@tommykelly1007]

You're welcome Kevin. Glad I could help.

[@kasper7194]

Thank you very much!

[@tommykelly1007]

You're welcome Kasper

[@Jj-yx4tu]

Hey buddy can you explain more about destructing of the array in the ProductCard file, where you passed {product }as the value

[@randomsVlogs871]

Wonderful 😊

[@tommykelly1007]

Thanks a lot 😊

[@imardavaiad9191]

Great Stuff

[@tommykelly1007]

Thank you Imar

[@manojreddygolamari4756]

Super cool thanks buddy ❤🙏

[@tommykelly1007]

Thanks manojreddy golamari. Glad you liked it.

[@rangabharath4253]

awesome as always. Thanks :-)

[@tommykelly1007]

Glad you enjoyed it Ranga bharath thanks

[@rangabharath4253]

@@tommykelly1007 Hi, You can upload your awesome useful videos on freecodecamp channel. Then you can gain more subscribers. Consult them. All the best.

[@tommykelly1007]

@@rangabharath4253 Thanks Ranga I will. Thanks for your continued support. I really appreciate it.

[@rangabharath4253]

@@tommykelly1007 All the best 👍😀

[@hamzajaved6545]

thank you sooo much love you

[@tommykelly1007]

Hi hamza g Glad you liked the video

[@dhanyakrishnan5795]

it was a great tutorial for beginer and will you able code bit more about how the search function is working on navbar, as currently it is static?

[@tommykelly1007]

Hi dhanya krishnan I will make a video how to add a search function.

[@obey_giant]

Thank u 🙏🏼

[@tommykelly1007]

You’re welcome 😊

[@mahendranath2504]

Thanks you 👍🏼🎉

[@tommykelly1007]

Your welcome Mahendra Nath

[@jasimgazi7249]

Awesome

[@tommykelly1007]

Thanks jasim gazi I am glad you like it

[@jenniferjohnston4187]

Thanks for the wonderful tutorial! How would we transfer the items from the cart over into a checkout page??

[@tommykelly1007]

Hi Jennifer you can use the same state in your checkout page. It will work in any component or page.

[@takurichardtaku4187]

Thank sir for this amazing video. i was enjoying it untill i got tied some where. i imported my cardState in the index and wapped it with the App, also when i apply the addTocard with the onclick on the button in the productCard my items disappear in the browser but if i remove both, the items comes back in the browser. i had very but no problem. please what can be the problem?

[@nazmulhudarimon4416]

Hello sir, Thanks for this amazing tutorial. I am facing a problem. I will be so happy if you help me to fix it. Basically, I coded the exact same thing you have done in the video but I want when a user adds something to the cart that must go on their local storage so that they can see the cart values on another page when they visit and the page reloads. I know how to add and get items from local storage but I want to know how to add it on social storage and then get the data and set it on cartItem? Thanks

[@tommykelly1007]

Hi Nazmul Check out my git hub were I have a todo app using context and local storage. It will show you how to add and remove items I hope to soon have a video on this also. Thanks for watching. github.com/TommmyKelly/todo-List/blob/context/src/context/TodosState.js

[@dhanyakrishnan5795]

expecting more video on hooks in general and usecases and MERN Stack too. I am really enjoying it. Thanks alot

[@tommykelly1007]

Thanks dhanya krishnan I am just finishing a video and will be post in the nest few days.

[@dnjosh10]

How can this kind of person have only less than 2k followers

[@dhanyakrishnan5795]

bit confused about the rating why we are adding one to the value and how we will know when to add 1? It will be really helpful if you could explain to me the concept. Thanks in advance.

[@tommykelly1007]

Hi dhanya Krishnan. In the rating component we are checking 3 conditions. Or rating is from 1 to 5 a value passed to the rating component. First we are checking if there should be a half star. So for example if we pass in a rating of 2.5. We use the map function on an array of 1 to 5 so if value + 1 passed to the component is equal to the rate + 0.5 the rate been the number in the array which is been mapped trough as the map function will check each number individually. So for a rating of 2.5, 1 will not be equal to rate + 1.5 so it moves to the next condition, which is checking is value >= rate which it is, so one full star is returned. Then the map function moves to the number 2 in the array. So again it check if value + 1 is equal to rate + 0.5 which it will not be so we move to the second check if the value >= rate which it is 2 = 2 so we get returned a second star. Then the map function checks the number 3 in the array so 2.5 that is passed in is equal to the rate 3 + 0.5 so the we get a half star returned. Then the map function check all the remain number in the array and all will be false and will return an empty star for the rest of the numbers in the array. So we get returned 2.5 stars. I hope this helps.

[@arnavaggarwal1940]

good video(from papafam)

[@tommykelly1007]

Thanks you arnav aggarwal

[@obey_giant]

Please make more videos 🙏🏼🙏🏼

[@tommykelly1007]

Thank you more on the way

[@mahaan5295]

Increment and Decrement is not available in the Cart to the productItems.

[@anastasiarzhavskaia3626]

Hello! How I can do in Cart quantity of each item and ability to increase or decrease the items? Thnx a lot for tutorial!

[@tommykelly1007]

You need to add a quantity to your state and once you add to the cart you would need to check if the Item exists all ready and if so just update the quantity by one

[@anastasiarzhavskaia3626]

​@@tommykelly1007 thank you! I'm a very beginner and try to figure it out :)

[@nikhilkamble8347]

Bhai github nahi chal rhaha

[@chiranjeevichowdary5948]

I think cartItems state doesnt stay if we refresh right?

[@tommykelly1007]

Hi Chiranjeevi Chowdary you would need a to store the items in a backend in order for them to stay when you refresh.

[@chiranjeevichowdary5948]

@@tommykelly1007 Thanks tommy helped me a lot with this video.Hope u bring out more

[@tommykelly1007]

@@chiranjeevichowdary5948 Thanks I am glad I the video helped you. I will be posting a new video next week.

[@osamat4284]

im facing problem in format currency can you help

[@tommykelly1007]

Hi Panorama Pakistan Tours try uninstall the "format-currency" NPM package and reinstall and ensure you are using backticks `` and not single quotes ''

[@highratedmughal3266]

i want admin to add the products on his website ? how can i do this ?

[@tommykelly1007]

Hi High Rated Mughal you would need a backend for this. I will be covering this in a future video.

[@highratedmughal3266]

@@tommykelly1007 actually I'm making a project for my university as FYP I need it urgently .? If possible ? Or share some tips so that I can search it on Google

[@osamat4284]

im facing problem in format currency

[@tommykelly1007]

Hi Panorama Pakistan Tours try uninstall the "format-currency" NPM package and reinstall and ensure you are using backticks `` and not single quotes ''

[@arupde6320]

why r u not uploading

[@tommykelly1007]

Hi Arup De I have just finished a new tutorial. Which will be posted tomorrow. It will show you how to create a custom right click context menu and will also be using a custom hook. It will also show you how to use a function to style a component. Kind Regards, Tommy

[@arupde6320]

@@tommykelly1007 good