There are currently no items in your shopping cart.

User Panel

Forgot your password?.

A Complete Guide to the JAMstack and React E-Commerce [2021]

Video Introducing this tutorial

Introduction :
Course Overview
E-Commerce Application Architecture
What is the JAMstack?
Our JAMstack
Project Overview
Project Overview Part 2
Environment Setup
How To Get Help
Project Files & GitHub Repository

Headless CMS: Strapi :
Section 2 Intro
Traditional vs Headless CMS
Strapi Overview
Creating a Strapi Project
Content-Types + Collections
Roles and Permissions
MongoDB Retail Architecture
Creating Our Content-Types
Creating Our Collections
Creating Our Collections Part 2

Gatsby and GraphQL :
Section 3 Intro
GraphQL vs REST
GraphQL Overview
Static Site Generators
Gatsby Overview
Creating A Gatsby Project
Creating A Gatsby Project Part 2

Layout, Styles, Theming, and Responsive Design :
Section 4 Intro
Material-UI + The Default Theme
Creating A Custom Theme
Creating A Custom Theme Part 2
Creating A Custom Theme Part 3
Creating A Custom Theme Part 4
Creating A Header
Creating A Header Part 2
Creating A Header Part 3
Adding Fonts
Customizing Material-UI Components
Customizing Material-UI Components Part 2
Querying Backend Data In Gatsby
Responsive Design Overview
Responsive Design Overview Part 2
Responsive Design With Material-UI
Using Responsive Design
Using Responsive Design Part 2
Navigation In Gatsby
Navigation In Gatsby Part 2
Set The Active Tab
Set The Active Tab Part 2
Grid System Overview
Grid System Overview Part 2
Creating A Footer
Styling The Footer
Footer Refactor
Footer Refactor Part 2
Hero Block
Promotional Products Block
Create Promo Carousel
Create Promo Carousel Part 2
Create Promo Carousel Part 3
Featured Products Block
Create Featured Product Slide
Create Featured Product Slide Part 2
Create Featured Product Slide Part 3
Displaying A Star Rating
Displaying A Star Rating Part 2
Marketing Buttons
Marketing Buttons Part 2
Call To Action
Hero Block Responsive Design
Promotional Products Responsive Design
Featured Products Responsive Design
Marketing Buttons Responsive Design
Call To Action Responsive Design
Using Mobile Simulator
Building A Contact Page
Styling The Contact Page
Styling The Contact Page Part 2
Customizable SVG Icons
Finishing Contact Info
Using TextFields
Using Text Fields Part 2
Input Adornments
Form Validation
Form Validation Part 2
Form Validation Part 3
Contact Page Responsive Design
Contact Page Responsive Design Part 2
Contact Form Refactor
Contact Form Refactor Part 2
Contact Info Refactor

Categories, Products, and Apollo :
Section 5 Intro
Page Queries Overview
Using Page Queries
Using Page Queries Part 2
Dynamic Toolbar Overview
Starting The Dynamic Toolbar
Adding The Filter/Sort Buttons
Switching To Sort
Switching To Sort Part 2
Adding Filter Options
Switching To Filter
Switching To Filter Part 2
FunctionContainer Clean Up
Adding Category Description
Adding Layout Button
Adding Layout Button Part 2
Dynamic Toolbar UI Wrap Up
Dynamic Toolbar UI Wrap Up Part 2
Category Products Page Query
Product Frame Grid
Product Frame Grid 2
Product Frame Grid 3
Grid Quick View
Grid Quick View Part 2
Quick View Info
Quick View Price
Sizes Part 2
Selecting A Size
Selecting A Color Swatch
Add To Cart Button
Styling Add To Cart Button
Styling Add To Cart Button Part 2
Product Frame List
Product Frame List 2
Product Frame List Continued
Product Frame List Continued Part 2
Go To Top Button
Paginate Products
Paginate Products Part 2
Product List Page Clean Up
Product List Page Clean Up Part 2
Product List Page Clean Up Part 3
Fixing Shirts Bug
Dynamic Toolbar Responsive Design
Grid View Responsive Design
Grid View Responsive Design Part 2
List View Responsive Design
Finalizing Responsive Design
Selecting Product Filters
Filtering Products
Filtering Products Part 2
Multiple Filters Fix
Multiple Filters Fix Part 2
Multiple Filters Fix Part 3
useEffect Introduction
Fixing Pagination
Sort Functions
Sort Functions Part 2
Selecting Sort Option
Sorting Products
Product Detail Page Overview
Product Detail Query
Product Detail Images
Product Info Container
Product Details And Description
Product Details And Description Part 2
Product Detail Actions
Product Detail Actions Part 2
Product Images Shirts Fix
Product Images Shirts Fix Part 2
Active Tab Product Detail Fix
LocalStorage Overview
Store Recently Viewed Products
Display Recently Viewed Products
Display Recently Viewed Products Part 2
Recently Viewed Navigation Setup
Scrolling Through Recently Viewed
Scrolling Through Recently Viewed Part 2
Product Detail Responsive Design
Product Detail Responsive Design Part 2
Apollo Overview
Apollo Setup
Run-Time Inventory Query
Display Run-Time Inventory
Adding Inventory To ProductList
Connect QtyButton To Inventory
Only Show Colors Of A Size
Only Show Colors Of A Size Part 2
Colors Of A Size Fix

Authentication + React Context :
Section 6 Intro
Authentication UI Walkthrough
Building AuthPortal
Building Login Page
Building Login Page Part 2
Styling Login Page
Adding Login Validation
Adding Login Validation Part 2
Build Forgot Password Page
Build Sign Up Page
Styling Sign Up Page
Reusable Email And Password
Reusable Email And Password Part 2
Building Sign Up Complete
Google Fonts Fix
Strapi Authentication
JSON Web Tokens
Sign Up New User
Sign Up New User Part 2
Login Returning Users
React Context Overview
React Context Structure Setup
Using React Context
Using React Context Part 2
Managing Stored User
Handling Token Expiration
User Feedback Overview
Loading Spinner
Feedback Context Setup
Using Feedback Context
Using Feedback Context Part 2
Logout User
Logout User Part 2
Handle Forgot Password
Configuring Strapi Email
Configuring Strapi Email Part 2
Reset Password Fields
Reset Password Fields Part 2
Reset User Password
Reset User Password Part 2
setTimeout Gotcha
Social Auth Flow
Facebook Auth Config
Facebook Authentication
Facebook Authentication Part 2
Auth Responsive Design
Auth Responsive Design Part 2
User Settings Overview
Build Settings Portal
Animating Components Intro
Animating Components Intro Part 2
Animate SettingsPortal
Animate SettingsPortal Part 2
Animate SettingsPortal Part 3
Better Repeating Background
Animate Between Settings
Animate Between Settings Part 2
Build User Settings
Styling User Settings
Styling User Settings Part 2
Change Field Color
Build Payment Settings
Build Location Settings
Finish Settings UI
Finish Settings UI Part 2
Strapi Lifecycle Hooks
Strapi Lifecycle Hooks Part 2
Load Existing Settings
Load Existing Settings Part 2
Track Changes
Track Changes Part 2
Consolidate Settings State
Custom Controllers
Custom Controllers Part 2
Save Changed Settings
Confirmation Dialog
Confirmation Fields
Confirmation Fields Part 2
Change User Password
Change User Password Part 2
Settings Validation
Settings Validation Part 2
Zip Code API
Get City From Zip Code
SettingsPortal Responsive Design
User Settings Responsive Design
User Settings Responsive Design Part 2

Cart + Checkout :
Section 7 Intro
Cart Design Overview
Cart Context Actions
Cart Context Reducer
Cart Context Reducer Part 2
Connect The Cart
Add Items To The Cart
Cart Feedback
Create Cart Page
Display Cart Items
Display Cart Items Part 2
Styling Cart Items
Styling Cart Items Part 2
QtyButton For The Cart
Remove Items From Cart
Checkout Design Overview
Build CheckoutPortal
CheckoutPortal Navigation
CheckoutPortal Navigation Part 2
Checkout Contact Info
Styling Contact Info
Styling Contact Info Part 2
Checkout Address
Checkout Shipping Options
Styling Shipping Options
Checkout Payment Methods
Checkout Confirmation
Confirmation Fields
Confirmation Fields Continued
Styling Confirmation Fields
Styling Confirmation Fields Part 2
Confirmation Button
Checkout Validation
Billing Info
Connect Confirmation Values
Preserving Billing Info
Preserving Billing Info Part 2
Billing Info Validation
Billing Info Validation Part 2
Billing Validation Fix
Billing Info Confirmation
Billing Info Confirmation Part 2
Save And Delete Icons
Save Info At Checkout
Delete Info At Checkout
Create Order Content-Type
Create Order Controller
Server-Side Cart Validation
Server-Side Cart Validation Part 2
Place An Order
Place An Order Part 2
Order Feedback
Order Feedback Part 2
Show Expected By Date
Show Order ID
Show Order ID Part 2
Cart Responsive Design
Checkout Responsive Design
Checkout Responsive Design Part 2
Checkout Responsive Design Part 3

Stripe Payment Processing :
Section 8 Intro
Stripe Payment Flow
Stripe Account Setup
Stripe Elements Overview
Using Stripe Elements
Styling Stripe Input
PaymentIntent API Overview
Generate Stripe Customer ID
PaymentIntent Setup
Generate PaymentIntent
Generate PaymentIntent Part 2
Confirm Payment
Prevent Card Unmount
New Approach Fixes
Finalize Order
Saving Payment Methods
Saving Payment Methods Part 2
Fix Payment Settings
Using Saved Payment Methods
Using Saved Payment Methods Part 2
Remove Cards Controller
Removing Saved Cards
Sending Email Receipts
Sending Email Receipts Part 2
Payment Responsive Design
Display Order History
Data Grid Overview
Data Grid Columns
Data Grid Columns Part 2
Data Grid Rows
Data Grid Rows Part 2
Styling Rows
Order History Navigation
Order Details Drawer
Order Details Info
Order Details Info Continued
Order Details Prices
Order Details Items
Order History Responsive Design
Order Details Responsive Design
Order Details Responsive Design Part 2

Reviews, Favorites, and Subscriptions :
Section 9 Intro
Product Reviews
Build Review UI
Build Review UI Continued
Rating Hover Effect
Rating Hover Effect Part 2
Select A Rating
Review Controllers
Product Average Rating
Leave Reviews
Display Reviews
Display Reviews Part 2
Display New Reviews
Edit Reviews UI
Edit Reviews UI Part 2
Edit Reviews Functionality
Delete Reviews
Delete Reviews Part 2
Paginate Reviews
Reusable Styled Components
Connect Reviews
Connect Reviews Part 2
User Product Favorites
Favorites Controllers
Add Favorites
Customize /me
Delete Favorites
Delete Favorites Part 2
Reusable Favorites
Connect Favorites
Favorite Variant Fix
Favorites Columns
Favorited Product Details
Favorites Rows
Favorites Sizes And Swatches
Favorites Selected Variant
Favorites Selected Variant Continued
QtyButton Zero Fix
Reusable DataGrid
Delete Favorite From List
Subscriptions Overview
Subscription Dialog
Subscription Quantity
Subscription Frequency
Add Subscription To Cart
Dialog Responsive Design
Checkout Fix
Subscription Cart UI
Subscription Checkout Controller
Subscription Payment Validation
Subscription Payment Validation Part 2
Reusable Frequency Select
Subscription Cart Frequency
Subscription Cart Icon
Subscription Cart Toggle
Schedule Tasks With Strapi
Make Recurring Charges
Place Subscription Order
Place Subscription Order Part 2
Subscription History
Retrieve Subscriptions
Subscriptions Columns
Subscriptions Rows
Styling Subscriptions Rows
Styling Subscriptions Rows Continued
Styling Subscriptions Rows Finished

Deployment + SEO :
Section 10 Intro
Shipping Cost Bug Fix
Billing Switch Bug Fix
Miscellaneous Bug Fixes
Amazon AWS Setup
Launch EC2 Instance
Create S3 Bucket
Configure EC2
Configure Git
Push Project To GitHub
Clone Project To EC2
Configure PM2
Strapi GitHub Webhook
Custom Domain with NGINX
Enable SSL
Enable HTTP/2 & TLSv1.3
Netlify Gatsby Deployment
Netlify Window Error
Netlify Window Error Part 2
S3 Image Upload
Netlify Rehydration Error
Netlify Rehydration Error Part 2
Rehydration Errors Continued
Netlify Form Handling
Netlify Custom Domain
Production Facebook Login
SEO Overview
SEO Component Overview
SEO Component Overview Part 2
Using SEO Component
Gatsby SEO Plugins
Image Optimization Overview
Gatsby Image Optimization
Gatsby Image Optimization Part 2
Gatsby Image Optimization Part 3
What's Next?