Build MERN-Stack ECommerce Website Like Amazon For Beginners [2021]

AI With Basir · 557K views · 2020 · 9:06:28

Open on YouTube

Web developmentEducation & learningcoursedated

Why Stack Overflow recommends it

Stack Overflow users cite it as the tutorial they were following when they hit specific bugs in React routing, Redux cart handling and MongoDB seeding, and a few answerers point to it as a worked example for cart design.

Recommended by 2 people across 2 different months, 2021 to 2022.

What it is

A roughly nine-hour, 30+ part course by AI With Basir that builds an Amazon-style e-commerce site with the MERN stack (MongoDB, Express, React, Node), including Redux, cart, sign-in, checkout and PayPal payment. It is aimed at beginners and comes with source code and a live demo.

What people said

Recommends Jess · 2021-10 · Stack Overflow · on “my data is not showing in 'network' of developer tools and I'm getting a 404 error instead”

Hey so I'm following a react and node js tutorial on youtube [ [this video] ][1] [1]: [this video] The tutorial is about creating an e-commerce website using react and node. I've arrived at minute 1:51:21 but I didn't get the same result. I'm supposed to receive the data in an xhr/ajax request in network (Developer Tools) but I'm receiving this error in console instead: DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chr

Recommends Efe Celik · 2022-01 · Stack Overflow · on “Local Storage Vs Session Storage Advice needed”

to begin with, I want to say I really liked your CSS :). You don't have to use a database or redux for making a cart system, but as you can guess they have good opportunities. DATABASE ADVANTAGES : You can show the user's cart on all his devices. User's cart will be always here as long as he did not delete it. You can reach the data on all components. (hard) It's very good practice for learning. DATABASE DISADVANTAGES : You need an API so, it's hard to set up. Your code will be more complicated than other choices. REDUX ADVANTAGES It's kinda easy to set up. You don't need a new project. You can reach the data on all components. (medium) REDUX DISADVANTAGES Actually I really don't know any di

Cites charlietlamb · 2021-06 · Stack Overflow · on “.insertMany() taking too long/not returning promise?”

Hey while following this tutorial [this video] and trying to get mongoDB to work I am coming across this problem. I am trying to set up an API on the backend at [LINK] in order to access the database using this code to send data to it. import express from 'express' import expressAsyncHandler from 'express-async-handler' import data from '../data.js' import User from '../models/userModel.js' const userRouter = express.Router() userRouter.get( '/seed', expressAsyncHandler(async (req,res) =>{ await User.remove({}); const createdUsers = await User.insertMany(data.users) res.send({createdUsers}) })) export default userRouter; However I receive this error on the server: "Operation `users.remove()` buff

Cites ListyantiDewi · 2021-11 · Stack Overflow · on “How to properly do a dynamic route in reactJs when working with Add to Cart ecommerce functionality”

I'm making a e-commerce. For the add to cart, i defined an addToCartHandler as follows: let params = useParams(); let navigate = useNavigate(); const dispatch = useDispatch(); const productId = params.id; const [qty, setQty] = useState(1); const productDetails = useSelector((state) => state.productDetails); const { loading, error, product } = productDetails; useEffect(() => { dispatch(detailsProduct(productId)); }, [dispatch, productId]); const addToCartHandler = () => { navigate(`/cart/${productId}?qty=${qty}`); }; The URL renders correctly dan dynamically according to the productId and qty of the added to cart product Screenshot of the URL whenever the add to cart button is clicked [LINK]

Cites Jay Choudhary · 2022-12 · Stack Overflow · on “React router dom 5.3.0 : Main content is not being rendered in new paths that is being returned by a Route file”

I am following this tutorial to create an Ecommerce website, React & Node Tutorial For Absolute Beginners - Build & Deploy ECommerce Website in 9 Hours [this video] I am Stuck at Part 08- Build Product Screen I have followed the tutorial to the t, but when my app goes to [LINK] it only shows the header and footer as they are outside the route. None of the content and the product information page elements get rendered. I have been looking for 5 hours. It’s 5 am now and this is my last attempt at this, please help me out asap Link to my github repo [LINK] I changed <Route path="/product/:id" component={ProductScreen} /> to <Route path="/" component={ProductScreen} /> and commented out the Homescree