StreamStore

The fastest way to build an Amazon Store

ECommerce Internet Store – Construct & Deploy an Superb App | React.js, Commerce.js, Stripe

Amazon Affiliate – The Best Store Builder



Learn to construct & deploy an entire eCommerce web site. On this video, we will construct a totally useful eCommerce utility utilizing commerce.js.

Whereas constructing it you are going to study many superior React & JavaScript subjects, in addition to find out how to use Stripe for card transactions. On prime of that, on the finish of the video, you’ll have this distinctive and complicated webshop app that it is possible for you to so as to add to your portfolio. And belief me, e-commerce purposes are spectacular.

This video incorporates a little bit of superior JavaScript, when you’re feeling insecure about your information and when you like my type of educating, I would undoubtedly suggest my superior JavaScript course: https://www.completepathtojavascriptmastery.com

⭐ Commerce.js
https://commercejs.com

📚 Supplies/References:
GitHub Code (be happy to provide it a star ⭐) – https://github.com/adrianhajdin/project_e_commerce
Kinds: https://gist.github.com/adrianhajdin/9867aefce5318f27c95990553f428c6e
Icon Picture: https://i.ibb.co/Qp1SXBw/commerce.png

When you’re experiencing any points or bugs go to https://commercejs.com/docs/group/faq 🙂

💼 Enterprise Inquiries: javascriptmastery00@gmail.com

📧 Be part of our JavaScript Mastery’s Publication on Internet Improvement, JavaScript & React to get unique programming guides, suggestions & tips, and whole e-books: https://useful resource.jsmasterypro.com/e-newsletter 🔥

🌎 Discover Me Right here:
Instagram: https://instagram.com/javascriptmastery
BuyMeACoffe: https://www.buymeacoffee.com/JSMastery

Time Stamps 👇
00:00 Intro
04:12 Setup
09:20 Mock Merchandise
25:07 Navbar
35:01 Commerce Merchandise
52:50 Add to Cart
01:01:24 Cart Structure
01:21:17 React Router
01:29:11 Cart Buttons
01:38:01 Checkout
01:49:56 Tackle Kind
02:04:48 Fetch Nations
02:23:00 Fetch Subdivisions
02:42:33 Assessment
02:49:38 Fee Kind & Stripe
03:08:49 Integration
03:18:40 Cellular Responsiveness
03:20:23 Bug Fixes
03:21:36 No Credit score Card Repair
03:25:45 Deployment

#ecommerce #react #webdev

supply

48 thoughts on “ECommerce Internet Store – Construct & Deploy an Superb App | React.js, Commerce.js, Stripe

  1. I have noticed that there are many missing. Shipping costs did not increase all in subtotal in the summary as well as the price did not change in the pay button. Forms API post is missing there when the stripe has mentioned keep adding post otherwise payment was not made. Can you create a new video to get through it all.

  2. EmptyCart and FilledCart functions required an explicit return() statement in my case. Without embedding the es6 code into the return() statement I got error messages, telling me that the render function didn't return anything.

  3. The tutorial is really great! But using a third party cart like commerce.js can get confusing to follow, as they changed stuff in between, and it's difficult to debug for a beginner. I suddenly had no items in my cart anymore. So it seems somewhere (i don't know if on Chec side, or commerce.js side) the items have been removed. This was costing me some headaches to figure out. Therefore while I understand why Chec was used, a tutorial that doesn't rely on third party code, would have been easier to debug. That said the quality of the tutorial apart from that is fantastic!

  4. @javascript Mastery iwant ask you that i've have problem with images that i cant see any images and there is so much update in commerce.js and in other things to so please tell me how i can solve my problem that i cant see any product images in the card help me please

  5. is anybody else getting this kind of error message , it pops up when i click on the checkout buttong (ie when i render the checkout component) TypeError: Cannot read properties of undefined (reading 'watch')

  6. Great tutorial,
    I am getting an error though "Uncaught (in promise) TypeError: history.pushState is not a function
    at generateToken" does anyone know what may be the issue?

  7. Does anyone else keep getting this error? Not sure how to fix it! Would appreciate any help!

    TypeError: Cannot read properties of undefined (reading 'source')

    Product

    C:/Users/Desktop/nicethings_shop/src/components/Products/Product/Product.jsx:14

    11 |

    12 | return (

    13 | <Card className={classes.root}>

    > 14 | <CardMedia className={classes.media} image={product.media.source} title={product.name} />

    | ^ 15 | <CardContent>

    16 | <div className={classes.cardContent}>

    17 | <Typography gutterBottom variant="h5" component="h2">

  8. Hi Thank for the greate content.

    how i understood thas part front end of aplication and as backend you are useng commerceJs website, but it can be connected to a back end aplication done in for sample in django, tha's true ?

  9. does anyone know how to resolve this: "Error in ./~/react-hook-form/dist/index.cjs.js
    Module parse failed: /Users/…/node_modules/react-hook-form/dist/index.cjs.js Unexpected token (1:8729)"

    this happened after the AddressForm.jsx 1:58:00 in to the tutorial. thanks for any help.

  10. Around the 1:15:00 minute mark when we're building the cart page, I get an error that says "Error: EmptyCart(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null." It's saying that this middle line has an error, but I have no idea how to fix it.

    const fetchCart = async () => {

    setCart(await commerce.cart.retrieve());

    };

  11. I have a problem with the shipping options, everything goes normal when i just opened the cheackout and the default options, in my case 'domestic shipping' works normaly but when i try to change to an international shipping or what ever different option i pick i get the error ''TypeError: Cannot read properties of undefined (reading 'value')'' and idk what else to change or try to solve it

  12. Hello adrian
    i was just checking out this video and in my builder-io dashboard my Code components dont seem to be complete
    or doesn't have as many drag n drop elements as yours why?

  13. I came here with no React experience at all and understood a bit, and just blindly followed u for most of it,can i say that i developed the end website on my own and have i "made a wesbite" or just copied it from a guy on the net? IS this normal?

  14. Hi. Thanks for the tutorial, it's really helpful. I'm doing a project and I need to be able to say what language or library I'm using for the front and back ends. I guess that if I follow quite closely your tutorial, I can say that I used React JS for the front-end but what should I say for the back-end? Thanks in advance

  15. Hey man. Fantastic tutorials. Awesome work to be honest. A true blessing for so many confused react devs out there.
    I'd just like to know two things:
    1. Is there a way to include actual account information so past purchases are saved along with the payment transactions?
    2. How secure is the app when it comes to saving personal data? What would you need to add to make it more secure if needed? For example, saving critical credit card info for subsequent purchases.

  16. Thank you so much for sharing this type of content, you truly are a great teacher as i've been learning so much in just few minutes of your course!!!
    Notes to myself:
    32:31 clean way | export
    33:27 in the NavBar styles: fade is deprecated, instead add alpha like so: import { makeStyles, alpha } from "@material-ui/core/styles";
    then replace all the fades for alpha.
    Products.jsx : replace justify for justifyContent
    33:54 to solve the navbar issue(hiding the products)
    50:30 issue with: image={product.image.source} instead add image={product.image.url}
    59:15 dynamic icon
    1:16:55 img error related to source, solution : image={item.image.url} but it has to match the img in the Products.jsx-
    1:37:33 error related to Empty Button, change curly brackets for () , also change the name of the EmptyCart for renderEmptyCart = () => (, and change it as well inside the if statement { !cart.line_items.length ? renderEmptyCart() : renderCart() }
    – if you read the code inside the repo in git, the handle functions inside the app.js has some mistakes, i think there is one that dont match the functions passed in props.

  17. Boy, this is dense for sure. I didn't notice at first cos you talk in a very relaxed, soothing way, but there's actually a lot going on. Had to pause almost constantly to follow along, I'm guessing this would be about twice in length if it went like, "step, explain, step, explain" like other tutorials.

    I really like it, it's real demanding for sure. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *