Build a Shopping Cart With React JS & Stripe

Поделиться
HTML-код
  • Опубликовано: 5 окт 2024

Комментарии • 189

  • @sanjaybatak3549
    @sanjaybatak3549 Год назад +20

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

  • @paulthomas1052
    @paulthomas1052 Год назад +17

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

  • @thangtruong1808
    @thangtruong1808 Год назад +1

    Thank you for your time to support us. Loved.

  • @laxmiprasanna4092
    @laxmiprasanna4092 Год назад +1

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

  • @gnarpow
    @gnarpow 27 дней назад

    @30:31 hands down the best description and analogue. If you just watch this part alone you will understand how powerful react context api is. You truly don’t need state managers. BUT. You do. Excellent work amigo! ❤️

  • @JonBrookes
    @JonBrookes Год назад +4

    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

  • @renangaldino6538
    @renangaldino6538 Год назад +1

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

  • @tristen_grant
    @tristen_grant Год назад +3

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

  • @mukangwakalonda7726
    @mukangwakalonda7726 Год назад

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

  • @mikeynavarro3195
    @mikeynavarro3195 Год назад +1

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

  • @aliplaysgtr
    @aliplaysgtr Год назад

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

  • @RobButzofNorthAmerica
    @RobButzofNorthAmerica Год назад +2

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

  • @maskman4821
    @maskman4821 Год назад +2

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

  • @josephngugi
    @josephngugi Год назад +1

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

  • @tonykharioki6913
    @tonykharioki6913 Год назад

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

  • @charugupta7103
    @charugupta7103 Год назад +2

    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.

  • @blipblop92
    @blipblop92 Год назад +1

    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.

  • @MatthewPostrel
    @MatthewPostrel 10 месяцев назад

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

  • @blue_berry_pie64
    @blue_berry_pie64 Год назад +2

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

  • @brandonespinosa3756
    @brandonespinosa3756 Год назад

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

  • @andrewaghoghovwia1948
    @andrewaghoghovwia1948 Год назад +3

    Thanks so much guys

  • @shannonbrookshire234
    @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

  • @HeatherKonz
    @HeatherKonz 8 месяцев назад

    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!

  • @Russ_Paul
    @Russ_Paul Год назад +3

    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?

  • @pablodominguez6129
    @pablodominguez6129 Год назад +2

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

  • @hbela1000
    @hbela1000 Год назад

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

  • @delgorithm
    @delgorithm 5 месяцев назад

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

  • @shannonbrookshire234
    @shannonbrookshire234 Год назад

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

  • @tonghandsome1
    @tonghandsome1 Год назад

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

  • @aniket1008
    @aniket1008 Год назад

    Best tutorial on shopping cart on react

  • @DavisNorde
    @DavisNorde Год назад

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

  • @250kennedy8
    @250kennedy8 Год назад

    @CooperCodes thank you for this amazing project.

  • @kellyncodes7421
    @kellyncodes7421 Год назад +2

    Thanks for the vdeo Brad/Copper Code

  • @Brazo07
    @Brazo07 Год назад

    Loved every single minute. Thank you so much

  • @plaguegames3556
    @plaguegames3556 7 месяцев назад

    Great job Cooper, thanks.

  • @bnji6601
    @bnji6601 Год назад +3

    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.

  • @TechIndustryAnalysis
    @TechIndustryAnalysis Год назад +1

    Thanks for doing this bro!

  • @WebAppMeta
    @WebAppMeta 11 месяцев назад

    Thanks Cooper

  • @Feciboy
    @Feciboy 7 месяцев назад

    Great tutorial! Thank you!

  • @marshallgraphic
    @marshallgraphic 2 месяца назад

    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?

  • @WebAppMeta
    @WebAppMeta 11 месяцев назад

    Another tutorial hell. keep going!

  • @logancabrera7824
    @logancabrera7824 Год назад +2

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

  • @iUniverse
    @iUniverse Год назад +4

    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
      @iUniverse Год назад

      Is this Brad's Whatsapp number?

    • @rajatmalviya1097
      @rajatmalviya1097 Год назад

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

  • @al-kishk6782
    @al-kishk6782 2 месяца назад

    cooper is the best

  • @nicolassuarez2933
    @nicolassuarez2933 Год назад

    Best of its kind!

  • @sadique_x_
    @sadique_x_ 6 месяцев назад

    ohh Brad!🤟

  • @oyeyinkaojora
    @oyeyinkaojora 11 месяцев назад

    Thank you so much for this,

  • @estifanosgashawtena8789
    @estifanosgashawtena8789 Год назад +3

    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
      @CooperCodes Год назад +3

      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.

  • @christian-schubert
    @christian-schubert Год назад +1

    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.

  • @VitorGomes_
    @VitorGomes_ Год назад

    Awesome work! Thank you.

  • @tarcisiosassi9379
    @tarcisiosassi9379 Год назад

    Really cool. Thanks for share!!

  • @arminesmaili908
    @arminesmaili908 Год назад

    real good
    Armin liked that👍

  • @paymankhayree8552
    @paymankhayree8552 10 месяцев назад

    thanks. really helped me

  • @kamichikora6035
    @kamichikora6035 Год назад

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

    • @CooperCodes
      @CooperCodes Год назад

      Hah I appreciate it! Thanks for watching :)

  • @perrythepalteypus2185
    @perrythepalteypus2185 Год назад

    Brilliant tutorial man ❤️ total blast 👌🏻

  • @futureverse9347
    @futureverse9347 Год назад

    Very good project Thank you @Cooper Codes 10/10

  • @thenomadengineer9260
    @thenomadengineer9260 Год назад

    DUDE... MEGA HELPFUL

  • @danielowusu6163
    @danielowusu6163 Год назад

    Lifesaver 🎉 subscribed

  • @madfut24_official
    @madfut24_official 2 месяца назад +1

    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

  • @omarimoody9794
    @omarimoody9794 Год назад

    Excellent work, Appreciate cha!

  • @VictorJReilly118
    @VictorJReilly118 Год назад

    Thanks so much!! Really good tutorial!

  • @cosanostraytc1030
    @cosanostraytc1030 Год назад

    Great tutorial man. Thank you!!!

  • @emmanuelenwereji472
    @emmanuelenwereji472 8 месяцев назад

    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

  • @963seeker
    @963seeker Год назад +2

    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

  • @oxanasf6369
    @oxanasf6369 Год назад

    Amazing, thank you!

  • @sonamohialdin3376
    @sonamohialdin3376 Год назад

    This is awesome tutorial thank you

  • @CodeCouture
    @CodeCouture Год назад +1

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

  • @densel.c8935
    @densel.c8935 4 месяца назад

    Great video!

  • @varadarajanm6954
    @varadarajanm6954 Год назад +2

    Awesome

  • @haroldve98
    @haroldve98 Год назад

    this tutorial it's absolutely god thanks

  • @codewithahad5990
    @codewithahad5990 Год назад

    It;s was really great toturial best of luck

  • @TheBelafleck
    @TheBelafleck Год назад

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

  • @mostafahemdan8609
    @mostafahemdan8609 4 месяца назад

    This Bootstrap is unfamiliar to me , Is this better or the usual one written in the class name?

  • @newabyuser
    @newabyuser Год назад +1

    after passing CartProvider in the app.js everything went blank

  • @dgloria
    @dgloria Год назад

    Cool T-shirt!

  • @movrew
    @movrew Год назад

    This is super cool

  • @programmingwithnit5308
    @programmingwithnit5308 Год назад

    Thank you so much🙏🙏

  • @emvoinamdinh
    @emvoinamdinh Год назад

    thank you sir very much !!!😍😍

  • @bilelrahmouni01
    @bilelrahmouni01 19 дней назад

    you gave the cart part more than 70% of the video, the interesting part that is stripe is lacking a lot of things like webhooks or how to update the db after the stripe success

  • @robeeeeen
    @robeeeeen 2 месяца назад

    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.

  • @mvptheviking
    @mvptheviking Год назад +2

    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.

  • @lehuynh7637
    @lehuynh7637 Год назад

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

  • @olegmonastyrskiy2594
    @olegmonastyrskiy2594 Год назад +2

    Don't use "idx" for unique key in map method

  • @godswillumukoro8908
    @godswillumukoro8908 Год назад

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

  • @ArnavSingh-im5bj
    @ArnavSingh-im5bj Год назад

    You should have also covered webhook

  • @This-Iz-Patrick
    @This-Iz-Patrick Год назад

    Great tutorial

  • @ambrosebeavers
    @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

  • @jawidz4636
    @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

  • @morokammopane3910
    @morokammopane3910 7 месяцев назад

    Great tutorial but what about deployment?

  • @longsyee
    @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

  • @thomasstambaugh5181
    @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.

  • @travisbacon5527
    @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.

  • @jancahlik9959
    @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.

  • @yuehanchen578
    @yuehanchen578 Год назад

    I Created my account and updated the stripe Secret key and product API but it was not working when you click the "Purchase" button

  • @benjamincardona5444
    @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.

  • @bradwoods371
    @bradwoods371 Год назад

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

  • @VaibhavPawar-k7e
    @VaibhavPawar-k7e 8 месяцев назад

    Hey Brad, Thanks for this video. I just having one question, Because I am not able to access array for added product in other components of my project. How can I fix this ?

    • @plaguegames3556
      @plaguegames3556 7 месяцев назад

      C'mon that is a very specific request with almost none information given.
      Maybe if you can share the code people can help here.

  • @ankitbhatt9388
    @ankitbhatt9388 Год назад

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

  • @danimusbar
    @danimusbar Год назад

    Unfortunately the stripes service is not available yet for indonesia

  • @ShellPartage
    @ShellPartage Год назад

    😃Hey ! Is it possible to learn from scratch react with this tutorial please ? :)