React & Node Tutorial For Beginners – Build MERN ECommerce Website 2022
šŸ‘‰ Website Demo: https://amazona.onrender.com/
šŸ‘‰ Source Code : https://github.com/basir/mern-amazona
šŸ‘‰ Questions : https://codingwithbasir.com/questions/ask

šŸ”„ Get Complete Course for $14.90 (reg price $149) – LIMITED TIME:
https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-mern-stack?coupon=SAVE90

00:00 Introduction
00:03:31 01- What you will build
00:09:53 02.1- Install Tools On Windows
00:15:07 02.2- Install Tools On Mac
00:19:06 02.3- Config VS Code
00:25:01 03- Create React App
00:31:24 04- Push To Github
00:37:36 05- List Products
00:50:11 06- Add Routing
00:59:52 07- Create Node Server
01:08:50 08- Fetch Products
01:15:12 09- Manage State By Reducer Hook
01:25:12 10- add Bootstrap
01:34:12 11- Create Product Component
01:48:03 12- Add Product Screen
02:02:38 13- Create Loading Component
02:10:22 14- Create React Context
02:21:36 15- Improve Add To Cart
02:27:59 16- Create Cart Screen
02:37:47 17- Complete Cart Screen
02:48:08 18- Create Sign-In Screen
02:54:07 19- Connect To MongoDB
03:05:44 20- Create Sample Products
03:18:01 21- Create Sample Users
03:21:47 22- Create Sign-In API
03:31:26 23- Complete Sign-In Screen
03:48:38 24- Save Shipping Address
04:00:05 25- Create Sign-Up Screen
04:06:05 26- Create Payment Screen
04:12:55 27- Create Place Order Screen
04:20:49 28- Place Order Action
04:36:24 29- Create Order Screen
04:48:47 30- Pay Order By PayPal
05:03:41 31- Display Order History
05:13:45 32- Create User Profile
05:24:55 33- Publish To Heroku
05:37:40 34- Add Sidebar Search Box
05:50:59 35- Create Search Screen
06:10:11 36- Create Admin View

Part 37 and more on my Complete Course for $14.90 (reg price $149) – LIMITED TIME:
https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-mern-stack?coupon=SAVE90

YOU WILL LEARN By React & Node Tutorial – Full ECommerce in 9 Hours [2022]:
1. React Bootstrap: Semantic Elements, CSS Grid, Flexbox
2. React: Components, Props, Events, Hooks, Router, Axios
3. Context API: Store, Reducers, Actions
4. Node & Express: Web API, Body Parser, File Upload, JWT
5. MongoDB: Mongoose, Aggregation
6. Development: ESLint, Babel, Git, Github,
7. Deployment: Heroku

šŸ”„ Get Complete Course for $14.90 (reg price $149) – LIMITED TIME:
https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-mern-stack?coupon=SAVE90

Amazona extra e-commerce features: https://gist.github.com/basir/1ec5008896d19707039c2f12d0699038

#React #Node #Tutorial #MongoDB #ecommerce #Context

Follow me on:
šŸ‘‰ Website: https://codingwithbasir.com
šŸ‘‰ Twitter: https://twitter.com/basrijd
šŸ‘‰ Linkedin: https://www.linkedin.com/in/basir-j
šŸ‘‰ Github: https://github.com/basir

source

39 Comments

  1. Hello sir, I have a question for the deployment. Since I didn't find your backend api deployed online. How can it work after it will be deployed to heroku to interact with your api.

  2. sir can u please tell me that that u create a product screen component so does it works for all product cards? i mean like when i click on each product card does it show their detail page by that product screen code if it is like that so then how this code works for all proudcts cards .. looking for your response

  3. From post 9 Manage State By Reducer Hook 01:15:12, I ran "npm install use-reducer-logger –force" to make it usable.
    But when it comes to post 10 add Bootstrap 01:25:12, "npm install react-bootstrap bootstrap" and "npm install react-router-bootstrap" must add the flag "–force"
    To fix: run "npm uninstall use-reducer-logger" and then no need to mention –force

    Also to see the message you can write the logger() function yourself for logger(reducer)

    logger.js
    function logger(reducer) {

    return (prevState, action) => {

    console.group(action.type);

    console.log('Prev state: ', prevState);

    console.log('Action: ', action);

    const newState = reducer(prevState, action);

    console.log('Next state: ', newState);

    console.groupEnd();

    return newState;

    };

    }

    export default logger;

  4. I just finished part 17. When there are no items in the cart, the cart page doesn't show anything, but when I add items to the cart it works perfectly fine, and when I removed all of the items, the cart page doesn't show anything again. Am I the only one experience this? please help

  5. Hi Thanks for this video I learn a lot from this, but it seems the video is not complete since the screens for the admin are not yet finished, may ask where can I find the other videos? hope this message will be noticed. thank you!

  6. I'm at 17 and I'm getting an error that says:
    Each child should have a unique key Prop

    I'm thinking this error is contributing to the fact that when I add a new item to the cart it replace the current one instead of adding both. Any idea on how I could fix this?

  7. can you tell me why you have to create an endpoint to get the paypal client id ? I found that the keys are exposed if you view the network tab on inspector. Is it better to be on env file on the frontend ?

  8. while installin react-bootstrap its getting error
    like this:
    While resolving: use-reducer-logger@1.0.2

    npm ERR! Found: react@18.2.0

    npm ERR! node_modules/react

    npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0

    npm ERR! node_modules/@testing-library/react

    npm ERR! @testing-library/react@"^13.4.0" from the root project

    npm ERR! peer react@"^18.2.0" from react-dom@18.2.0

    npm ERR! node_modules/react-dom

    npm ERR! peer react-dom@"^18.0.0" from @testing-library/react@13.4.0

    npm ERR! node_modules/@testing-library/react

    npm ERR! @testing-library/react@"^13.4.0" from the root project

    npm ERR! peer react-dom@">=16.8" from react-router-dom@6.7.0

    npm ERR! node_modules/react-router-dom

Leave A Reply

Please enter your comment!
Please enter your name here