Build an E-commerce Product Listing Page: React, TypeScript, Tailwind & Stripe

Whatsup guys, In this video you are going to learn how to build out this product listing page challenge from frontend mentor using react, typescript and tailwind css, and we also going to take it a step further by also implementing stripe payments using netlify serverless function.

❤️ Support the channel & Suggest Future Videos:
https://selar.co/showlove/devlawrence

Source code
https://github.com/dev-lawrence/produ...

Frontendmentor challenge
https://www.frontendmentor.io/challen...

Timestamps:
0:00 - Intro
2:25 - Create a new project
3:25 - Install tailwind and tailwind prettier
10:10 - Install react router dom
14:30 - Bringing the data file and assets
18:00 - Creating the home page
26:05 - Product listing Component
46:40 - CartList Component
1:02:46 - CartItem Component
1:11:58 - Context Api
1:57:36 - Local Storage
2:04:49 - Checkout page
2:16:35 - Order Item Component
2:23:03 - Payments with Stripe
2:58:11 - Reset Cart
3:00:41 - Outro

---
🔗 Useful Links
Website: http://devlawrence.netlify.app/
Blog: https://dev.to/devlawrence
Github: https://github.com/dev-lawrence

---
🌎 Follow me on social media
Twitter:   / lawrence_sticks  
LinkedIn:   / lawrence-amrasakpare  
Instagram:   / dev_lawrence1  

---
💼 Need a custom website for your business? I'm available for freelance projects 👇🏼
E-mail: [email protected]

#react #css #WebDevelopment #LandingPage #netlify #localstorage #deployment #html #CodingTips #howto #serverless #sanity #payment #stripe