Build Ecommerce Website (Amazon Clone) with Node and React Tutorial

Hello guys, I found a nice 5 hour long YouTube tutorial on how to build a Ecommerce website with Node and React by Coding with Basir.

By the end of the tutorial you will build a mini clone of Amazon using Node and React. This app is a Full Stack MERN App using MongoDB for database, Node + Express for APIs, front end is built with React (using Hooks) with Redux for state management. Finally the app is deployed on Heroku.

Course Contents

  • 00:02:00 Part 01- Introduction
  • 00:08:26 Part 02- Install Tools (VS Code, Chrome)
  • 00:12:36 Part 03- Website Template (HTML, CSS)
  • 00:29:47 Part 04- Products List (Grid, Flexbox)
  • 00:41:54 Part 05- Create Sidebar (JavaScript)
  • 00:52:39 Part 06- Create React App (React)
  • 01:01:09 Part 07- Render Products (JSX)
  • 01:06:30 Part 08- Product Details (React Router)
  • 01:30:53 Part 09- Create Node Server (Node.js)
  • 01:39:52 Part 10- Fetch Server Data (React Hooks)
  • 01:47:55 Part 11- Manage State With Redux (Redux)
  • 02:07:11 Part 12- Add Redux To Details (Redux with Hooks)
  • 02:29:23 Part 13- Shopping Cart Screen (Advanced React)
  • 03:08:11 Part 14- Connect MongoDB (Mongoose)
  • 03:21:35 Part 15- Sign In User (JWT Authentication)
  • 03:56:02 Part 16- Manage Products (React Modal)
  • 04:38:43 Part 17- Checkout Wizard (React Wizard)

Topic Covered

  1. HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
  2. React: Components, Props, Events, Hooks, Router, Axios
  3. Redux: 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

Demo –

Github –

CORS issue in create-react-app

Did you know malformed API url in create-react-app can cause CORS issue in Google Chrome when getting data from external api via fetch or axios.

I know this a strange issue. It is what i faced when using pixabay api in a create-react-app. I had stored api key in .env file. I made a stupid mistake of adding a semicolon as in case of a variable declaration inside .env file.

cors issue storing environment variables create react app
DO NOT ADD SEMICOLON at the end of environment variable

And i used the api key using REACT_APP_PIXABAY_API_KEY react enviroment variable in a JavaScript template string inside axios. I was getting this CORS error in browser console.

cors issue fetch api to call external api
In this API request, REACT_APP_PIXABAY_API_KEY is wrong and hence URL was malformed

It was really hard to debug the issue. I tried various CORS workarounds as mentioned in official docs including configuring proxy myself and adding http-proxy-middleware.

But still the issue wasn’t solved. I wasted nearly 2 hours on this bug. Finally when i was inspecting the console log, I found a semicolon where it shouldn’t be. It lead to an Aha! moment where i revisited the .env file and fixed the environment variable.

cors error in google chrome due to malformed api url in create react app
CORS Error due to malformed API URL

Finally I got rid of the issue and was able to get the data from the server.

So when using create-react-app, make sure your API url is formed correctly and your environment variables are correct to avoid bugs such as these.

Thomas Weibenfalk – JavaScript, React and more.

Thomas Weibenfalk is one of the top JavaScript and React teacher in the world of web development. Thomas hails from Sweden and has a masters degree in Marketing & Economics from Lund University. He has good foundations in graphic design as well due to which his project tutorials have nice and clean design.

Mr Weibenfalk has worked as a full stack web developer and a freelancer for several years and he has a rich experience in the field of web development.

I discovered Thomas Weibenfalk mainly through Twitter and freeCodeCamp forums. He was one of the top 100 contributor for freeCodeCamp in the year 2019.

Weibenfalk runs a successful YouTube channel of the same name and his tutorials are really wonderful to watch. He creates project oriented web development tutorials on mostly Vanilla JavaScript and React.

Most noteworthy thing I like about this teacher is more real world project oriented teaching, less preaching, to the point practical tutorials, teaches everything from scratch

Top Tutorials by Weibenfalk


  • React Movie App – A clone of popular movie database site which teaches you react fundamentals, create-react-app, jsx, hooks and functional components, local and session storage and app deployment on Netlify.
  • Gatsby with WordPress as a Headless CMS – This tutorial teaches you how to use Gatsby Static Site Generator + React to build a front end website consuming WordPress API



Weibenfalk has helped me get better at React. I highly recommend his courses. He is very approachable via email and social media as well.

Find Thomas Weibenfalk on

I hope you have enjoyed this blog post. My aim is to introduce some great teachers and content creators (even lesser known ones) in the world of Web Development.

Keep Coding, Keep Smiling !

Best Web Development Tutorials on YouTube

Ever since the inception of YouTube, there have been thousands of people who have imparted free education to their followers. Today you can learn to play a guitar, or basics of gardening or speak a new language or get good at Math, all at the comfort of your couch.

Web Development and Software development in general is no different. You can find some of the best instructors on YouTube to learn everything about a programming language, build projects, acquire new skills, improve your code quality etc.

Since there are thousands of hours of content one can simply binge watch, it is most important to focus on only those videos which will help you achieve your goals. Whether you are a student or an employee or a freelancer, the best way to improve your skills and achieve your goals is to build projects. If you are a web developer, I cannot stress this point enough.

Among ocean of resources on YouTube, there is only bucketful of full fledged, project focused web development tutorials. This is because coming up with an idea for a project is hard. A content creator needs to spend considerable amount of time working on the idea, translating the idea into code, polishing the content and finally delivering it as a tutorial.

My blog post aims to make a curated list of best web development tutorials on YouTube. You will end up creating tangible projects at the end of each tutorial which you can showcase in your portfolio.

I aim to keep this list up to date and weed out any outdated tutorials.



Full Websites / Landing Pages







MERN Stack




I hope you will find this curated list of Best Web Development Tutorials on YouTube very helpful . There are still hundreds of good creators and thousands of awesome tutorials. So I apologize if I have missed any good content creator or any good tutorial. You can always share them in comments.

Keep Coding, Keep Smiling !

PS: If I have helped you and made a difference in your life, considering supporting my blog.