DEV Community 👩‍💻👨‍💻

Cover image for React Tutorial - Part 01 - Full Shopping Cart By React & Redux

React Tutorial - Part 01 - Full Shopping Cart By React & Redux

Watch Video




Welcome to my coding course to build an fully-functional shopping cart using react and redux. In this course, you will learn the essential tools and skills to design, develop and deploy a fully-function shopping cart using React, Redux, Node, Express, and MongoDB.

My name is Basir and I’ll be your instructor in this course. After 15 years of coding in international companies like ROI Vision in Montreal, I found my passion in teaching programming. For the last 5 years, I have been tutoring hundreds of successful students around the world.

I designed this course for anyone seeking to develop a fully-functional shopping cart using react and redux. By the end of this course you’ll be able to design a responsive shopping cart, implement a user-friendly frontend and develop a simple backend.

You need to open a code editor along with me and start coding throughout this course. I teach you creating products list, shopping cart and checkout components using React, adding animation using react-reveal, create modal by react modal, managing state by Redux, building backends using Node, and MongoDB.

I designed this course for non-coders or juniors who want to be a professional web developer to get a job in 22 million job opportunities around the world. This is no requirement necessary for this course and having a passion for coding is enough.

What you’ll learn

  • Design Shopping Cart Using HTML and CSS
  • Implement React Components For Product List, Filter, Cart
  • Managing Component State using Redux, React-Redux and - Redux-Thunk
  • Creating Animations Using React-Reveal and Add Routes using React-Routers
  • Build Backend using Node, Express, MongoDB and Mongoose
  • Publish Project on the Heroku and MongoDB Atlas


  • Basic HTML and CSS
  • Basic JavaScript

Who this course is for

  • Javascript developers
  • Web Developers
  • Freelancers
  • Programming Students

Video Topics

  1. Fully-Functional Shopping Cart
  2. Instant Feedback
  3. Animated and Intuitive Design
  4. List Products
  5. Sort Products By Price High or Low
  6. Filter Products by Size
  7. Open Modal By Click on Product
  8. Add Product To Cart using Animation
  9. Handle Multiple Click By Adding More Items
  10. Remove Product
  11. Show Checkout Form
  12. Create Order with user friendly id
  13. Admin Section to see list of products
  14. Using postman to add or remove products and orders

Top comments (0)

Take a look at this:


Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠