Build a Shopping Cart With React JS & Stripe

Рет қаралды 110,673

Күн бұрын

In this project, we will create a shopping cart using React and Stripe.
📽️ Cooper Codes KZfaq Channel:
/ coopercodes
💻 Code:
github.com/coopercodes/ReactE...
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 Project showcase
1:25 Create react app / installs
2:22 Navbar component
6:00 Implementing React Router
7:45 Creating pages for router
10:35 Building rows and cols for Store page
12:14 Creating products for React to use
16:50 Loading products dynamically
19:18 Creating product card component
22:45 Creating a modal for the cart
25:55 Creating our cart context (Cart functionality)
46:02 Adding CartProvider to our app
46:29 Creating add / remove product to product cards
52:05 Adding cart functionality to navbar (number of items)
54:40 Showing cart data in modal
57:00 Creating CartProduct component
1:01:00 Create Stripe account and add test products
1:03:06 Creating Express server / installs
1:05:00 Creating Stripe checkout request
1:09:30 Adding Stripe IDs to React
1:10:33 Creating checkout call from React
1:13:43 Final project / checkout demo!
1:15:06 Thank you for watching

Пікірлер: 187

@paulthomas1052 Жыл бұрын

A fantastic tutorial. Easy to follow....no errors....a great introduction to Stripe too. Thanks

@sanjaybatak3549 Жыл бұрын

Just when you wanted something like this, Brad drops this video. 🎉 Thank you Brad and the team. You guys are doing phenomenal work.

@mikeynavarro3195 Жыл бұрын

This is probably my favorite youtube tutorial, Cooper revisited harder concepts for clarification multiple times. he's cool for that, definitely earned a Sub

@laxmiprasanna4092 10 ай бұрын

This is exactly what we need. These small videos help us during actual work.

@aliplaysgtr Жыл бұрын

Exactly what I needed for a graduation work. Thanks a lot! Super clear and comprehensive

@renangaldino6538 Жыл бұрын

This is absolutaly one of the best React tutorial avaiable in YT, Thanks a lot !!!

@thangtruong1808 Жыл бұрын

Thank you for your time to support us. Loved.

@tonykharioki6913 Жыл бұрын

I hadn't used stripe in two years, and thanks for this. I needed this refresher

@RobButzofNorthAmerica Жыл бұрын

Stuff like this is why I support your Patreon! Thanks so much

@maskman4821 Жыл бұрын

This is the best React + Stripe tutorial, thank you so much 🙏

@josephngugi Жыл бұрын

Been looking forward to learn stripe and here it is. thanks to traversy media

@pablodominguez6129 Жыл бұрын

awesome, simple and cut to the chase. Thanks man!

@JonBrookes Жыл бұрын

Watching this from start to finish I honestly did not know how Cooper Codes would fit all the material required to code a react app and Stripe backend with express in such a short session but he did ! Very well structured approach and excellent teaching by Cooper. If you dont know arrays in Javascript and methods for workng with them you will at the end of this. If you've never used context with React you will be fine to do so at the end of this video. If you thought integrating payments into a front end app or any other for that matter is in some way beyond reason difficult you will see how easy it can be by the end of this tutorial. Thank you Cooper and also to the venerable Brad for showcasing a new channel and content of great quality

@hbela1000 Жыл бұрын

Your tutorial is very straightforward, thx Brad, thx Cooper.

@shannonbrookshire234 Жыл бұрын

great tutorial. thank you so much for your efforts. I was stuck on a project for a couple of days and using the 'useContext' and 'CartContext' approach really helped. thanks

@user-hg9zo5gu7v 8 ай бұрын

This video helped me finish my first full stack project. Thank you.

@brandonespinosa3756 11 ай бұрын

Bravissimo, context hook is amazing. Thank you so much for showing this. Great video!

@blue_berry_pie64 Жыл бұрын

Very nice video explaination for each step! Thank Brad and Cooper Codes so much!

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance

@tristen_grant Жыл бұрын

I give him 10/10. Easy to follow and good pacing.

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance .

@charugupta7103 Жыл бұрын

Heyyy traversy! Big fan here, saw your react tutorial few months ago. Came back to revise the same and found this. Thanks for the amazing contetnt.

@user-vk8kt3tp1g Жыл бұрын

Questions can come in⬆️

@tonghandsome1 Жыл бұрын

Thank you very much Cooper for all the efforts you have done! Also Thank you Brad!

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance .

@user-qi2hv3rx6l 3 ай бұрын

You're genuinely the boss. No cap. Thanks a lot 🤝

@DavisNorde Жыл бұрын

Thank you, Cooper! And nice t-shirt, Brad :)

@Brazo07 Жыл бұрын

Loved every single minute. Thank you so much

@mukangwakalonda7726 Жыл бұрын

I thanks all traversy group, it is my first time I manage the payment project God bless you all

@user-ry8ko5fc8n 5 ай бұрын

This was an amazing tutorial! I am working on a Capstone project that is very similar to this so this was really, really helpful!! Thank you!

@perrythepalteypus2185 Жыл бұрын

Brilliant tutorial man ❤️ total blast 👌🏻

@250kennedy8 Жыл бұрын

@CooperCodes thank you for this amazing project.

@blipblop92 Жыл бұрын

Thank you Cooper. Amazing tutorial, so glad I found your channel. Wish the tutorial also showed how to deploy the code to something like heroku or netlify.

@TechIndustryAnalysis Жыл бұрын

Thanks for doing this bro!

@cosanostraytc1030 Жыл бұрын

Great tutorial man. Thank you!!!

@andrewaghoghovwia1948 Жыл бұрын

Thanks so much guys

@plaguegames3556 5 ай бұрын

Great job Cooper, thanks.

@futureverse9347 Жыл бұрын

Very good project Thank you @Cooper Codes 10/10

@VitorGomes_ Жыл бұрын

Awesome work! Thank you.

@shannonbrookshire234 Жыл бұрын

I can't give this video enough thumbs up. Thank You

@VictorJReilly118 Жыл бұрын

Thanks so much!! Really good tutorial!

@Russ_Paul Жыл бұрын

Excellent tutorial Cooper, you're a very good teacher. Your tutorial is very straightforward, it's to the point and makes perfect sense start to finish. One thought that is going through my mind, I don't know if this goes against the grain of React, but could it be restructured into an MVC pattern?

@aniket1008 Жыл бұрын

Best tutorial on shopping cart on react

@thenomadengineer9260 Жыл бұрын

DUDE... MEGA HELPFUL

@omarimoody9794 Жыл бұрын

Excellent work, Appreciate cha!

@oxanasf6369 Жыл бұрын

Amazing, thank you!

@Feciboy 5 ай бұрын

Great tutorial! Thank you!

@movrew Жыл бұрын

This is super cool

@nicolassuarez2933 11 ай бұрын

Best of its kind!

@sonamohialdin3376 Жыл бұрын

This is awesome tutorial thank you

@tarcisiosassi9379 Жыл бұрын

Really cool. Thanks for share!!

@paymankhayree8552 8 ай бұрын

thanks. really helped me

@christian-schubert Жыл бұрын

Thanks for this! Love how Cooper structures this video, I really think Brad should make sure any video to be featured on this channel should meet certain criteria, i.e. demonstrating the final product before getting down to the nitty-gritty, etc.

@arminesmaili908 Жыл бұрын

real good Armin liked that👍

@oyeyinkaojora 9 ай бұрын

Thank you so much for this,

@kamichikora6035 Жыл бұрын

Yes!!!!! Cooper codes!!!! This guy has good stuff

@CooperCodes Жыл бұрын

Hah I appreciate it! Thanks for watching :)

@nathanle8957 8 ай бұрын

Thanks Cooper

@kellyncodes7421 Жыл бұрын

Thanks for the vdeo Brad/Copper Code

@nathanle8957 8 ай бұрын

Another tutorial hell. keep going!

@programmingwithnit5308 Жыл бұрын

Thank you so much🙏🙏

@Hodja60 Жыл бұрын

Great tutorial

@emvoinamdinh Жыл бұрын

thank you sir very much !!!😍😍

@haroldve98 Жыл бұрын

this tutorial it's absolutely god thanks

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance .

@danielowusu6163 Жыл бұрын

Lifesaver 🎉 subscribed

@densel.c8935 2 ай бұрын

Great video!

@al-kishk6782 6 күн бұрын

cooper is the best

@sadique_x_ 4 ай бұрын

ohh Brad!🤟

@dgloria Жыл бұрын

Cool T-shirt!

@codewithahad5990 Жыл бұрын

It;s was really great toturial best of luck

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance .

@aguywithoutaname Жыл бұрын

Thanks man

@TheBelafleck Жыл бұрын

Hey. This is awesome and very helpful. One question: How is the cart emptied after the purchase is completed?

@varadarajanm6954 Жыл бұрын

Awesome

@iUniverse Жыл бұрын

Hi Brad, if you don't mind can you make a React, Redux-Saga, React Tool Kit real world projects tutorial in your Udemy platform. Learning with you is a great help.

@iUniverse Жыл бұрын

Is this Brad's Whatsapp number?

@rajatmalviya1097 Жыл бұрын

I am also looking for a Redux-tool kit Course.

@bnji6601 Жыл бұрын

Amazing tutorial, I had one question on the success and cancel url in the server. I realize this works for localhost. For live deployment how would you go about setting up the routes for that.

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance .

@iamailasama Жыл бұрын

great!

@logancabrera7824 Жыл бұрын

Hey guys, I'm having troubles hosting this code. Do I have to change any code to make it work on the web (hosted)?

@marshallgraphic 24 күн бұрын

This is interesting with Strip letting you manage your products from their platform. Do they provide an API to fetch the products from there so you don't have to store items in a DB in your app?

@emmanuelenwereji472 5 ай бұрын

Thank you for this awesome video, I would really appreciate if I can get more clarifications on using local storage for this project, I am having issues, whenever I reload the page, I usually loose all my items in the cart. Thank you

@lehuynh7637 Жыл бұрын

20:29 you can use ffc snippet Simple React Snippets extension to fast to code

@thomasstambaugh5181 Жыл бұрын

Does the Modal (that contains the cart) hide when the user clicks outside the BROWSER? For example, if the user has this app open in a chrome browser on a desktop and clicks on "Snipping tool" to take a screenshot, will the Modal hide? I spent a few days (close to a week) trying to provide that behavior to an Material UI (v5) pane with no success. It appears that the "onHide" handler in the (Bootstrap Modal component) is somehow connected to the "focusout" and "blur" events that are flying around under the cover. I'm curious about whether this is a "hard" problem that the Modal component solves or (more likely) whether I'm just confused about how to provide the desired behavior. I do have one substantive criticism of the approach presented here -- I would have used literal object ("{}") rather than array ("[]") for the container of items. Since each item in the array must have a unique ID, then the "id" property used in each item can be its key in an object container. That makes the manipulators for the items cleaner, more robust, and more performant. I appreciate this well edited piece. I might pick some nits with specifics, but those are just nits -- this is an excellent piece.

@jawidz4636 Жыл бұрын

Amazing tutorial bro ! One question ! im trying to use that show cart button in some other component. tried many stuff but none worked! any suggestion for that matter ? i Appreciate any help

@963seeker Жыл бұрын

does anyone know how to set a fixed quantity for items to control the amount of supply of any given item? A user might pay for an item that the supplier (You) don't have in stock :( Any help is greatly appreciated

@madfut24_official 17 күн бұрын

until now I've my website completely built with html. Do i need an other program and witch program do you use in your vid? Maybe you've said this in your vid but for me only the last 15 min are important

@ahsanaqueel1182 Жыл бұрын

Hey @CooperCodes what if we have a lot of products how can we use stripe without creating products on stripe as it will be very difficult to upload same products on 2 different platforms (website and stripe).

@estifanosgashawtena8789 Жыл бұрын

Great video, at 45:40 to find the total cost of products from cart, it better to use Array.Reduce() but overall good content 👌

@CooperCodes Жыл бұрын

Yeah there were definitely some tradeoffs at areas to make the code easier to understand, I feel map can be easier to show that at each item we are getting that total price but it is a bit unnecessary. Thanks for the comment and perspective I appreciate it.

@ambrosebeavers Жыл бұрын

Hi There, thank you for this vid. How do one receive payment in a production environment using Stripe. Would it be the same procedure. How would the money get to ones bank account

@Seedley Жыл бұрын

This is a great video. If I want to make a post once I get a success url back from stripe is there a way to do that? I'm making a car listing site and would like to charge per car post.

@mvptheviking Жыл бұрын

Great tutorial i succeeded to do this on localhost. I want to publish it to my hosting. Im new to react and run a build in the shop folder. How can i build the server along with my project and upload into the ftp.

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance

@robeeeeen 5 күн бұрын

Any necessity of "Remove from Cart" red button? Is that button added since the minus button does not makes the In Cart: 0 ? The function removeOneFromCart do not make it 0.

@godswillumukoro8908 Жыл бұрын

Awesome tutorial I'm not sure why, it doesn't work for me unless I change the modefrom 'payment' to 'subscription'

@longsyee Жыл бұрын

Is a great teaching but i really hope that more stuff can be added such as multer for file upload profile page dashboard setingup mongo forgot password email api to send email websocket for live chat etc.... so many missing wait you to have a more advance video

@ArnavSingh-im5bj Жыл бұрын

You should have also covered webhook

@psnjathin8615 Жыл бұрын

The best

@ankitbhatt9388 Жыл бұрын

I am deploying a project like this, so in cart.jsx and server.js page in checkout function what URL should i give.

@bradwoods371 Жыл бұрын

what would be the best way to implement this into a site already built with html css javascript etc.

@CodeCouture Жыл бұрын

hi, I have a question whn building a full stack ecommerce website how to do you get the person's details Thank you

@jancahlik9959 Жыл бұрын

How does one host this project in production? Can someone explain please? Would this be under 1 domain and hosting? I am confused, because two different ports are being used.

@benjamincardona5444 Жыл бұрын

Hey brad. I'd like to ask, if this comment ever makes it to your eyes, what's your advice on how to set up your mental state when you feel like your programming project has too much stuff, things got confusing, tech debt is high and you feel it's going to slowly break down into pieces and nothing's gonna work anymore.

@newabyuser Жыл бұрын

after passing CartProvider in the app.js everything went blank

@Julesarixx__my__teleqram__ID Жыл бұрын

👆send a direct message for support and guidance

@travisbacon5527 Жыл бұрын

Any chance you would do a course on stripe payments for saas apps that uses pay per seat? I.e. admin pays for five seats and then invite users and then they can expand and reduce subscription based on active users.