English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 41 Lessons (6h 22m) | 959 MB
Learn to create a full E-Commerce App With React and Next.js
The Full Stack React Course
The long awaited Full Stack course is here! In this course, I will teach you how to build a full stack application in an smooth, straightforward way. Learning full stack sounds hard, but in this course, I’ve ensured to keep it fun, easy to understand and informative. You will have a great understanding of all concepts, whilst also having a stylish full stack application to use in your portfolio at the end.
When learning code, it’s easy to get overwhelmed with the masses of information out there. Many videos, blogs, and courses give way too much (irrelevant) details, meaning we are left feeling overwhelmed and defeated. This course was created specifically to help you learn in a streamlined way, having some laughs along the way and building your confidence to become a better developer.
Here’s a little bit about the e-commerce project we will build and deploy!
Our E-commerce site will have the following features:
- User Authentication (including Google Signin)
- Secure Payments (including Apple and Google Pay)
- Email Invoicing
- Users can interact with products, see their order history, and more!
Front End
- Next.js / React
- URql for fetching data
- Styled Components for styling
- Framer Motion for animation
- React Hot Toast for pop up notifications
Back End
- Strapi
- Postgres
- GraphQL
Other
- Auth0 for authentication
- Stripe for payment, invoicing etc
- Cloudinary
Table of Contents
1 Our Project Intro
2 Getting Started With Github
3 Tech That We Will Use
4 Setting Up Strapi
5 Creating a product
6 Adding GraphQl
7 Cloudinary Integration
8 Heading over to the Front End
9 Intro to Next.js Files
10 Routing System in Next.js
11 Loading Our Data on the Frontend
12 Creating our first component
13 Adding Styled Components
14 Building Dynamic Pages
15 Styling up our Product Details
16 Adding Navigation Between Pages
17 Fixing Server Class Styling
18 Adding Our Global State
19 Adding our Products to Cart
20 Creating our Cart
21 Toggling our Cart
22 Add Remove Items from Cart
23 Total Price and Quantities
24 Adding Framer Motion
25 Staggering Animations
26 Layout Animation
27 Setting Up Stripe
28 Sending a Payment
29 Adding More to Checkout
30 Fixing our coupons
31 Success Page
32 Adding Auth0
33 Adding the User
34 Linking Auth0 to Stripe
35 Profile Page
36 Format Money
37 Checkout With and Without Auth
38 React Hot Toast
39 Quality of life Improvements
40 Backend Deployment
41 Front End Deploymen
Resolve the captcha to access the links!