ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe

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

by



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

Whereas constructing it you are going to study many superior React & JavaScript matters, in addition to how you can use Stripe for card transactions. On high of that, on the finish of the video, you’ll have this distinctive and sophisticated 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 accommodates a little bit of superior JavaScript, for those who’re feeling insecure about your information and for those who like my type of educating, I would undoubtedly advocate my superior JavaScript course: https://www.completepathtojavascriptmastery.com

💻JS Mastery Professional – https://jsmastery.professional?low cost=youtube
✅ A particular YOUTUBE low cost code is mechanically utilized!

⭐ Commerce.js
https://commercejs.com

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

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

💼 Enterprise Inquiries: javascriptmastery00@gmail.com

📧 Be a part of our JavaScript Mastery’s Publication on Net Growth, JavaScript & React to get unique programming guides, ideas & tips, and whole e-books: https://useful resource.jsmasterypro.com/publication 🔥

⭐Hostinger is my private suggestion for internet hosting – https://www.hostinger.com/javascriptmastery
Use the code JAVASCRIPTMASTERY to save lots of as much as 91% on all yearly internet hosting plans.

🌎 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 Deal with Kind
02:04:48 Fetch International locations
02:23:00 Fetch Subdivisions
02:42:33 Assessment
02:49:38 Cost 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

source

36 thoughts on “ECommerce Net Store – Construct & Deploy an Superb App | React.js, Commerce.js, Stripe”

  6. Thank you JavaScript Mastery for the great 👍 job that you are doing…
    I deployed my react app using firebase hosting but I can't reach to the MongoDB database, and it's working properly on localhost I can post, fetch data, authenticated user etc.
    Is there any way to reach the MongoDB database after hosting?

    Reply

  12. https://youtu.be/377AQ0y6LPA?t=5257
    if anyone is having problems with react router as it updated, this works too.
    in App.js, Change the return to this.
    return (

    <>

    <Navbar totalItems={cart.total_items}/>

    <Routes>

    <Route path="/" element={<Products products={products} onAddToCart={handleAddToCart}/>} />

    <Route path="/cart" element={<Cart cart={cart}/>} />

    </Routes>

    </>

    )

    and in my index.js (the main one) change it to use browser router

    import React from 'react';

    import ReactDOM from 'react-dom/client';

    import App from './App';

    import { BrowserRouter } from "react-router-dom";

    const root = ReactDOM.createRoot(document.getElementById('root'));

    root.render(

    <BrowserRouter

    basename={""}

    forceRefresh={true}>

    <App />

    </BrowserRouter>

    );

    Reply

  14. i have some bug when using add to cart feature, it log undefined instead of listing item of cart. I strictly follow the video but i do not understand why it does not work

    Reply

  17. I'm running into this issue where the cart will update when I add and remove products from it, but the page will go completely blank. When I refresh all my changes are saved, but it doesn't update the page in real time. I hope this makes sense.. is there a fix for this?

    Reply

  18. npm ERR! code ERESOLVE

    npm ERR! ERESOLVE unable to resolve dependency tree

    npm ERR!

    npm ERR! While resolving: e-commerce@0.1.0

    npm ERR! Found: react@18.2.0

    npm ERR! node_modules/react

    npm ERR! react@"^18.2.0" from the root project

    npm ERR!

    npm ERR! Could not resolve dependency:

    npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4

    npm ERR! @material-ui/core@"*" from the root project

    npm ERR!

    npm ERR! Fix the upstream dependency conflict, or retry

    npm ERR! this command with –force, or –legacy-peer-deps

    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

    npm ERR!

    npm ERR! See C:UsersbullshitAppDataLocalnpm-cacheeresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in:

    npm ERR! C:UsersbullshitAppDataLocalnpm-cache_logs2022-11-03T10_58_06_569Z-debug-0.log

    what the hell is thiss

    Reply

  19. Hello, I cannot enable the Stripe payment gateway in my Commerce.js account, when I access the Payment Platforms Settings page, the option to enable Stripe does not appear. How can Stripe be enabled? Thanks.

    Reply

  20. My confirmation does not work at all. It doesnt seem to show the order reference or the name and last name ofthe user …not sure why it just prints nothing ..

    Reply

  22. When I'm at the checkout and i click submit payment and i see the confirmation message …I get the error:

    customer.email: The Email field is required when customer.id is not present.

    shipping.street: The Shipping street address field is required when customer.id is not present
    shipping.town_city: The Shipping town/city field is required when customer.id is not present.

    Does someone know why?

    Reply

  23. Sorry another question – to add product to card I had to change my code from setCart(item.cart) to setCart(item)? Has anyone else got the same? Can someone explain why setCart(item) worked?

    Reply

  25. thanks a lot for this tutorial , it is beyond valuable . Although i got stuck while trying to access .env from commerce.js , i keep getting this error message : "Uncaught ReferenceError: process is not defined" … please help

    Reply

  29. For those having problem with "undefined" when creating Add to Cart here's a solution:

    const hanleAddToCart = async (productId, quantity) => {
    setCart(await commece.cart.add(productId, quantity));
    }

    Reply

  31. I am stuck on building the Cart component. I am an amateur with React, so my guess as to what is happening could be wrong, but–

    I think the async function that gets the cart data is not resolving in time leading to "React can't read the properties of 'undefined'" errors regarding both the cart length and mapping through the items and display their names.

    Does anyone have suggestions on how to modify the code so that it waits for the promises to resolve?

    Reply

  33. For anyone struggling to display the shipping address form use this code in FormInput

    import { TextField, Grid } from "@material-ui/core";

    import { useFormContext, Controller } from "react-hook-form";

    const FormInput = ({ name, label, required }) => {

    const { control } = useFormContext();

    return (

    <Grid item xs={12} sm={6}>

    <Controller

    control={control}

    name={name}

    render={({ field }) => <TextField fullWidth label={label} required />}

    />

    </Grid>

    );

    };

    export default FormInput;

    Reply

  34. getting payment.gateway: ["Gateway with ID "stripe" not found."] . when payment object specifies gateway as stripe and in stripe object i specify payment_method_id,anyone else running into 422 unprocessable_entity error that says stripe not found?

    Reply

Leave a Comment