Featured

Build a FULLSTACK React Ecommerce App that is fully Responsive with Stripe Payment



Published
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/getting-started
material ui: https://mui.com/material-ui/getting-started/installation/
formik: https://formik.org/docs/overview#installation
yup validation: https://github.com/jquense/yup
google fonts: https://fonts.google.com/
react responsive carousel: https://github.com/leandrowd/react-responsive-carousel
redux toolkit: https://redux-toolkit.js.org/tutorials/quick-start
strapi: https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html
stripe dashboard: https://dashboard.stripe.com/test/dashboard
stripe quickstart: https://stripe.com/docs/billing/quickstart
stripe code: https://stripe.com/docs/checkout/quickstart
stripe api ref: https://stripe.com/docs/api/checkout/sessions/create
stripe api keys: https://dashboard.stripe.com/test/apikeys

github completed app: https://github.com/ed-roh/react-ecommerce/tree/master
images: https://github.com/ed-roh/react-ecommerce/tree/master/client/src/assets
data for strapi items: https://github.com/ed-roh/react-ecommerce/blob/master/client/src/assets/strapi-mock-data/strapi-item-inputs.json

———————————

Subscribe to my channel: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1
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
Category
Management
Be the first to comment