Build a FULLSTACK React Ecommerce App that is fully Responsive with Stripe Payment
EdRoh EdRoh
80.5K subscribers
245,697 views
0

 Published On Nov 2, 2022

React Responsive, Fullstack, Ecommerce App Tutorial from scratch. We will be using React, Material UI, Stripe, Formik, Yup, Strapi, and Redux Toolkit to build this entire application. This application will allow you to add products into a cart, have a form to fill out information and make payments through Stripe with a backend supported by Strapi.

Links:
create react app: https://create-react-app.dev/docs/get...
material ui: https://mui.com/material-ui/getting-s...
formik: https://formik.org/docs/overview#inst...
yup validation: https://github.com/jquense/yup
google fonts: https://fonts.google.com/
react responsive carousel: https://github.com/leandrowd/react-re...
redux toolkit: https://redux-toolkit.js.org/tutorial...
strapi: https://docs.strapi.io/developer-docs...
stripe dashboard: https://dashboard.stripe.com/test/das...
stripe quickstart: https://stripe.com/docs/billing/quick...
stripe code: https://stripe.com/docs/checkout/quic...
stripe api ref: https://stripe.com/docs/api/checkout/...
stripe api keys: https://dashboard.stripe.com/test/api...

github completed app: https://github.com/ed-roh/react-ecomm...
images: https://github.com/ed-roh/react-ecomm...
data for strapi items: https://github.com/ed-roh/react-ecomm...

———————————

Subscribe to my channel:    / @edrohdev  
for more web development and web 3.0 blockchain tutorials!

———————————


Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.

I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.



Chapters:
0:00 Create a Complete React Ecommerce Website from Scratch
4:04 Strapi Installation and Setup for Backend
13:11 React Ecommerce Frontend Installation and Setup
17:24 Theming Setup
24:50 React Router Setup
27:28 React and Redux File and Folder Architecture
34:15 Navbar
44:44 Redux and Redux Toolkit Setup building CartMenu
1:23:55 Individual Item Component
1:39:19 Home Page
2:22:17 Footer
2:30:56 Item Details Page
2:54:24 Checkout Pages and Forms with Formik and Yup
3:45:27 Stripe Setup and Integration
4:10:03 Final Complete Ecommerce Demo and Summary
4:11:40 Complete Ecommerce Website Built Fully in React

show more

Share/Embed