A Complete Guide to the JAMstack and React E-Commerce

Explain the differences between traditional CMS and headless CMS, showing how traditional systems couple content to presentation while headless CMS decouples front end and data via APIs.

Explore Strapi, a headless open-source CMS that manages content and users, self-hosted with rest or GraphQL APIs, and MongoDB backing for React apps.

Create a Strapi project from setup to running locally by configuring Node, installing MongoDB, connecting to MongoDB Atlas, editing environment variables, and launching the admin dashboard with npm run develop.

Explore content types and collections in the back end, and define fields and relations to structure article data with validation and a user relationship.

Master how strappy services create reusable functions to simplify controller logic, extend default services, and build custom services for cart pricing and email delivery.

Enable real-time communication across apps by using webhooks to trigger HTTP callbacks on content events, automating builds and deployments in a JAMstack React e-commerce workflow.

Learn to configure and upload 60 product variants across colors and sizes in a headless jamstack e-commerce setup, using media library, content types, and variant attributes.

Discover how static site generators pre rendering, compare SSR and client-side rendering, and use rehydration for dynamic inventory updates in a jam stack React ecommerce.

Gatsby serves as a fast static site generator for React, detailing code splitting, image optimization, and rich plugin ecosystem; it covers static and page queries and runtime data with Apollo.

Initialize a Gatsby front-end connected to Strapi via the Gatsby source plugin, configure content types (product, category, variant), and set public permissions to enable data queries.

Set up a custom Material UI theme in a Gatsby app by wrapping the entire site with a theme provider and configuring the browser and SSR files.

Create the app header using material ui, featuring a text logo, route links, and icons for cart, account, and search, forming the site's ui skeleton.

Use makeStyles to style html elements and material-ui components, access the theme palette, and override classes like root and typography variants. Learn organizing styles with patterns or external header styles.js.

Use Material UI to implement responsive design with theme breakpoints from extra small to extra large, and apply the media query hook to adjust styles across screen sizes.

Explore how to implement header navigation in Gatsby using link and navigate, enabling both click-driven and programmatic routing, with a reusable actions pattern and material-ui integration.

Set the active tab to match the current route and highlight the corresponding nav item. Ensure accessibility by placing onClick on the icon button and using proper link props.

Learn to control grid layouts with container props, direction, justify, and align items, using real-time examples to design precise footers for JAMSTACK and React e-commerce sites.

Style the footer using a theme color, remove body margins, and fix grid width by wrapping containers in grid items; apply responsive spacing and centered social/icon layouts across breakpoints.

Refactor the footer by turning repeated grid items into a single, programmatic social icons section using an array, icon button components, external links, hover styles, and ripple removal.

Build a promo carousel in a React front end using a third-party carousel. Style with Material UI makeStyles and CLX, and drive slides from promotional product data.

Master building a complex promo carousel by configuring environment variables, applying dynamic styling, and enabling slide navigation with hover effects, responsive images, and right-aligned descriptions.

Design a featured products block on the homepage using a grid layout, with a sliding green info box and Strapi-driven GraphQL data for featured items.

Demonstrates rendering a star rating by computing full, half, and empty stars from a numeric score using an array mapping and a rating component, with examples like four.

Master responsive hero block design by applying breakpoint-based widths, adjusted margins, and grid-based spacing with material ui styles and media queries to adapt the landing page to all screen sizes.

Master responsive design for the featured products block by adjusting layouts across breakpoints, centering content, and sliding the product cards down for mobile screens.

Build a responsive contact page using Material UI grid and typography, with a left form and right contact info laid out in a two-column grid.

Convert the contact grid items into a clickable button. Set borders on icons with a dedicated icon container, using height, width, and flex alignment to form a continuous border.

Learn to add input adornments to text fields with Material UI, use start and end adornments, and color svg icons like dollar signs and kg via the theme.

Apply theme breakpoints to make the contact page responsive across devices. Resize inputs, icons, and typography for mobile, using 100 percent widths and line breaks for the address.

Refactor the contact form to reduce repetition by converting state to an object and rendering fields dynamically from a fields map. Learn concise validation, styling, and adornment of inputs.

Refactor a contact form to dynamically render fields with a single values object, using computed property names and bracket notation for dynamic validation and multi-line message handling.

Refactor the contact info section into a data-driven render by mapping an array of icon-label objects, applying middle-info styling, and using keys with Material UI.

Learn to generate category and product pages from Strapi data using a single template, build with Gatsby, and switch from build-time to runtime queries with Apollo to show live inventory.

Learn to build dynamic product list and detail pages with Gatsby and strappy by creating templates, passing data via page context, and generating programmatic routes from category and product queries.

Build a toolbar for filter and sort in a JAMstack and React e-commerce app by creating a function container, wiring state with useState, and rendering icon buttons that switch content.

Convert the filter options object to an array of property names, filter out empty values, and render chips and checkboxes for color, size, and style using material UI.

Clean up function container to auto-expand for filter options while preserving a six rem default, add padding for the filter grid, and refine checkbox styling for white text on green.

Leverage React state to wire a dynamic toolbar, conditionally render description container when option is null, and use Material UI props to customize border radii for filter and sort states.

Learn to build a grid-based product gallery in a React e-commerce interface by creating a product frame grid, mapping product variants to framed items, and styling frames with background images.

Render product images in a frame grid using product and variant data from a Strapi server via environment variables, then style the title with a green background.

Build a grid of product frames with a click-to-open quick view dialog showing the selected frame image and a toolbar, while overriding material-ui paper for full width and zero padding.

Build a sizes component for the quick view that renders all variant sizes as buttons, passing the full product to collect sizes and support a scalable, order-agnostic solution.

Build an interactive size selector in a React e-commerce app by managing selected size in quick view state, passing it to size buttons, and highlighting the choice.

Build a reusable add-to-cart button component with a quantity control, featuring plus and minus buttons in a vertical material ui button group and an add-to-cart button, per the design file.

Finish styling the add to cart button with a dark green background, rounded corners, and white borders to match the design file using CLX class composition.

Style the add-to-cart button with proper spacing and a white cart icon badge using an svg component and material ui badge; wire plus and minus buttons to update quantity.

Learn to paginate products in a jamstack react e-commerce app by using material ui lab, calculating pages from variants, and rendering products with per-page limits across grid and list views.

connect color swatches to product images by selecting a color to update the variant image in real time, using a color index function and mapped variants.

Remove duplicate color swatches across product variants and align images with the same color and style to fix the shirts bug, improving catalog accuracy and scalability.

Build a responsive product grid that adapts from four items per line at large to two at medium, and switches to a column layout on small screens with centered alignment.

Optimize responsive product grid by disabling the quick view at medium and smaller breakpoints and navigating to the product detail page, using media queries and navigate for smooth transitions.

Refine the product list page with a mobile device simulator, shrinking the frame, image, and titles, while adjusting sort and filter layouts to prevent overflow.

Wire up the product list to apply selected filter options, using an array filter on content and variant checks to display only matching products.

Refine multi-filtering by building per-category active filters and cross-referencing them to show only items that match all selected values, including color label considerations.

Fix a pagination bug by using the use effect hook to reset to page one when filters or layout change, illustrating a dependency array and lifecycle concepts.

Fix the product list pagination by basing page counts on filtered products instead of total variants, and move filtering logic to the product list to update pagination.

Explore how the JavaScript sort function orders arrays from numbers to strings and objects with a custom comparator, and implement alphabetical sorting alongside newest, oldest, and price up or down.

Build a right-side product info container beside product images using a two-column grid, passing name, description, and variants as props, and align with absolute and flex positioning.

Build a responsive product details page with favorite and subscribe icons, a three-section layout featuring a dark description panel, rating, leave a review, and add-to-cart.

Learn to read the style from the URL query string, filter the variant, and load the correct shirt images on the product detail page using useEffect.

Learn how to use the browser’s local storage to persist recently viewed products across sessions by storing and retrieving simple key-value data with json stringify, setItem, getItem, and clear.

Store recently viewed products in local storage and display them as recommendations on the product detail page. Handle variants and styles, and disable quick view to ensure smooth navigation.

Develop product detail responsive design for a JAMstack React e-commerce app by refining action spacing, left alignment, and breakpoint-driven recently viewed displays, with runtime stock queries for accuracy.

Install and configure the Apollo client to connect a React e-commerce app to a satrapy database, set up http link and in-memory cache, and build an Apollo wrapper.

Explore authentication with JSON web tokens and React context replacing Redux. Enable login, signup, logout, and Facebook sign in, plus a settings dashboard for shipping, payment, and password with feedback.

Design and wire the authentication user interface, including email/password login, Facebook login, forgot password, sign-up with name and email, and a password visibility toggle inside a persistent authentication portal.

Refactor the login form to render email and password fields from a fields object and reuse contact page validation logic, including one uppercase letter, one number, and one special character.

Integrate a forgot password page into the login flow by toggling a forgot state, hiding the password field, updating the reset button label, and applying dynamic styling for proper spacing.

Build the sign up page to extend the authentication workflow, reuse login components, and add a name field, sign up with facebook, and navigation arrows between steps.

Style the sign up page to match the design file, adjusting the add user icon, text fields, and buttons with reusable styles; enable forward and backward navigation shared with login.

Build the final sign up complete screen that confirms account creation with a checkmark, the text account created, and a shop button to browse products.

Replace the Fvid notation with numeric font weights in the web font loader plugin to fix google fonts, and apply 700, 600, 500, 400, and 300 weights in Gatsby config.

Wire up action creators and a reducer, implement a reusable user context, and wrap the app with a user provider to share and update user state via the reducer.

Export the user context through a central index and wrap the app with the user wrapper to expose it globally. Use the context hook to read and dispatch user state.

Learn to manage user state with React context by dispatching set user, combining user data with a JWT, and persisting it in local storage for login and signup.

Refresh the stored user profile and jwt by requesting Strapi’s /users/me with a bearer token, and reset to default when the token expires, and remove from local storage when expired.

Explore how progress indicators and snack bars communicate app status, using circular and linear progress, determinant and indeterminate variants, and labeled feedback.

Learn to set up and use a feedback context with a snack bar to display error messages during login and signup, dispatching feedback across components.

Create a reset password interface in a React app with password and confirm password fields, read the URL code, and submit the code and new password to satrapy.

Style and validate the reset password form with password and confirmation validators, then post the new password and code to the strappy endpoint using axios, with user feedback.

Submit a password reset request, show success or error snack bar feedback, and navigate to login after the message, with input validation and a loading spinner.

Prevent memory leaks in React by canceling timeouts with a useEffect cleanup. Learn to move setTimeout logic into useEffect and cancel timers on unmount.

Learn the social authentication flow for logging in with Facebook and other providers using Satrapy, including the code exchange, access token retrieval, and user JWT creation.

Link signup and login buttons to a Facebook connect flow, handle the access token, fetch the user profile and JWT, and update onboarding.

Debug and implement Facebook authentication in a JAMstack e-commerce app by addressing CORS issues, switching to server-side redirects, and ensuring Facebook emails register correctly.

Implement responsive design for the off portal after finalizing authentication, adjusting layouts across breakpoints from mobile to extra small. Address sign-up crashes by fixing boolean props with proper ternary expressions.

Apply responsive design techniques to the auth flow by using viewport width calculations with rem units, extra small breakpoints, and adjusted border and field widths to fit on mobile devices.

Explore building a dynamic user settings portal with a responsive dashboard, editable personal info, up to three stored addresses and payments via Stripe, and an intuitive edit-and-save workflow.

Learn to animate a settings portal in react using react spring, making clicked settings expand while others disappear, and implement a responsive navigation flow with animated buttons.

Style the user settings to match the design, replace the animated button with a grid to avoid nested buttons, and add hover and cursor cues for the dashboard context.

Learn to color-consistently style settings page adornments in a jamstack and react e-commerce app by creating reusable svg icon components with color props and applying a white theme.

Build the payment method settings to view saved cards, add a card during checkout, and remove cards, using a half-width grid and a card icon for visual clarity.

Tie the selected slot to the user profile by pulling the user context and passing it to details, payments, and location, then use useEffect to update fields on slot change.

Load saved settings and enable editing with an edit/save toggle, disable fields when not editing, and track changes to trigger a network request to save changes after actual modifications.

Compare the live values to the saved user profile to detect edits, and use an effect to update the changes made flag for contact and location sections.

Consolidate the settings state by lifting detail and location values to a parent and passing them as props to enable saving with axios to Strapi, with a loading indicator.

Create a custom route and controller in strappy to post and update user settings, using async actions, the context object, and sanitize responses.

For the JAMstack and React e-commerce course, validate the old password via a login request, then update the password via a custom Strapi user edit route backed by JWT authentication.

Learn to fetch city and state from a zip code using an API, update and save the location in settings, and handle loading and errors with a snack bar.

Implement responsive user settings layouts using Material UI breakpoints and media queries to switch between row and column, adjust spacing, typography alignment, and center dialogs for extra small screens.

Wire up the delete button to remove items from the cart by dispatching a remove from cart action with the item variant and quantity, updating state and local storage.

Design a custom checkout flow for a jamstack e-commerce app by building a checkout portal with contact info, address, shipping options, and payment steps, reusing settings components for Stripe integration.

Create a two-part checkout portal with top navigation and bottom forms, using grid layout and a dark green nav bar, while setting a 70vh cart page height.

Style the checkout interface by wiring the billing switch with a secondary color, aligning labels, and adjusting spacing, margins, and grid columns for shipping and slots.

This lecture demonstrates enforcing a single billing slot in a JAMstack and React e-commerce app, copying and preserving billing details as users switch slots.

Preserve billing and location values across renders by skipping the initial useEffect run with a mounted flag using useRef, ensuring slots stay populated as billing changes.

Refines order feedback by adjusting snack bar wrapping and disabling checkout when the cart is empty or loading, handles unavailable items, and clears errors during check-out navigation.

Clear the cart after placing an order, move from confirmation to a thank you screen, and display the expected delivery date based on free, 2-day, or overnight shipping.

Show the generated order id on a thank you screen, provide an order details button and a back to shop action, and save the order data for checkout.

Develop responsive checkout by shrinking typography and button sizes with theme breakpoints, aligning icons for mobile readability. Apply media queries to shipping, billing, and promo fields for compact layouts.

Understand the Stripe payment flow by creating a payment intent, obtaining the client secret, and confirming the payment after the user completes checkout to finalize the transaction.

Explore Stripe elements, a pre-built component set wired to the Stripe API that securely handles credit card payments with real-time validation, autofill, responsive design, and customizable styles.

Style stripe card element to match the app with an underline and typography using stripe options. Add a card error state to enable progression only when the card is valid.

Generate a Stripe customer for new users at signup and store the Stripe customer ID on the internal user record. This enables saving cards for future payments.

Explore setting up a Stripe payment intent in a React jamstack ecommerce app, including generating client secrets at confirmation, storing intents, and splitting order processing from finalization.

Generate a Stripe payment intent on the server, return the client secret and intent ID, and manage the payment flow with error handling, local storage, and cart-based updates.

Learn to use saved cards with Stripe by last four, fetch saved payment methods for the Stripe customer, create a payment intent, and confirm orders.

Remove a saved card by detaching it from Stripe and updating the user’s stored payment methods, returning a sanitized updated user profile.

Explore sending email receipts after checkout by using a confirmation html template, hosting images publicly, accommodating fonts, and injecting order data (id, items) into a backend service.

Generate a dynamic HTML order receipt by conditionally injecting item name, size, style, pricing, shipping, tax, and totals, then send it as an order confirmation via strappy.

Explore responsive payment design for a JAMstack and React e-commerce checkout. Leverage Stripe integration, saved card handling, and extra small breakpoints with material UI and media queries.

Style the order history data grid to match the design file by centering cells, using chips for status and total, and updating typography and pagination colors.

Add a top navigation header to the order history with a back button that returns to the settings portal, wiring the button to update the selected setting.

Implement a material UI swappable drawer that reveals full order details from a clicked row in the order history, controlled by an open state and a details button.

Learn to display and format order details, including billing and shipping information, with responsive typography, padding, and dark interfaces, followed by adding the order prices section.

Implement pricing details in the order details by rendering subtotal, shipping, tax, and total, and display payment method with a transaction ID.

Section nine teaches adding product reviews with signed-in users, implementing star ratings, building a favorites list for frequent items, and enabling recurring subscriptions for deliveries.

Expand the review interface by adding a full-width text field for the review and wiring state with a fields component, including placeholder, helper text, and submit and cancel buttons.

Display and manage existing product reviews by loading the review’s user name, rating, and date, disable editing for saved reviews, and prep the user interface for adding new ones.

Learn how to implement edit reviews UI: prevent multiple reviews per user, detect existing reviews, prepopulate text and rating, and disable the live review button until changes are made.

Wire editing reviews to save updates in Strapi using put requests, reuse the same handler for create and update, and refresh the review list with updated data.

Turn the favorite icon into a button on product detail page and add a product to favorites via an authenticated Axios post, with loading spinner and success or error feedback.

Toggle product favorites by showing a filled or outline star, based on existing favorites, and perform create or delete requests to /favorites with conditional headers.

Convert the product detail page's favorite functionality into a reusable independent component that encapsulates the icon, click handling, loading state, and prop-driven sizing for reuse across the app.

Learn how to switch favorites from product-based to variant-based, updating content types, front-end components, and back-end mappings to support selecting and adding variants to the cart.

Develop and display the user’s favorites in settings using a Material UI data grid with columns for item, variant, quantity, price, and a delete action, enabling quick add-to-cart.

Create a backend route to return user's favorites with full product details and variants, then fetch them on the frontend to render name, images, stock, sizes, swatches, in a table.

Update the selected variant in a favorites list when changing size or color by deriving the full variant list, matching style and size, and syncing the cart quantity.

Fixes the quantity button for out-of-stock variants by adding a disabled state and stock-based updates, preventing cart additions when zero and ensuring correct variant handling.

Delete a favorite by tapping the delete icon, show a per-row loading spinner, perform an authenticated axios delete to Strapi, and update the user interface and user profile.

Implement a reusable subscription dialogue in a React e-commerce app, enabling users to choose subscription settings (quantity and frequency) and add the subscription to the cart via an icon button.

Learn to add subscriptions to the cart by updating the cart context, passing the subscription with a quantity override and frequency, and showing success feedback.

Fix the checkout layout by setting details, location, and payments containers to height 100 percent, applying a conditional 30 rem for non-checkout states, and plan a subscription indicator.

Learn how to create subscriptions after checkout for subscription items using strappy. Map front-end frequency labels to backend values and calculate next delivery dates to automate recurring orders.

Learn to implement a reusable frequency select in the cart, update state and local storage on frequency changes, and dispatch a change frequency action to reflect subscriptions.

Set up a subscription icon in the cart using a reusable subscription component, wiring color, item, and size props, and manage alignment with a no padding prop.

Learn to implement scheduled tasks in Strapi using Chron, check daily for subscriptions due that day, auto-create an order, and charge customers through Stripe.

Learn to automate recurring subscription charges by scheduling daily tasks, retrieving upcoming deliveries, and processing Stripe payments with off session charges and robust error handling.

Place a subscription order in strappy using shipping and billing data, add zero-cost shipping, compute tax, send a confirmation email, and update the next delivery date with a reusable frequency.

Set up and test subscription automation by updating next delivery dates, configuring frequencies to run every minute, charging customers via Stripe, creating orders in strappy, and updating subscriptions for payments.

Build the subscriptions rows for a data grid by mapping subscriptions to row objects, destructuring item details, and computing total with tax, then bind the rows to the table.

Launch an EC2 instance in the AWS console to host a strappy project with Ubuntu 18.04 on t2.small, GP2 storage, and a security group for ssh, http, https, and 1337.

Push your project to a GitHub repository to share it, track changes, and collaborate. Initialize a git repo, commit changes, manage branches, and push or pull with https or ssh.

Configure pm2 to keep your strappy project online with zero-downtime reloads on ec2 instances, using an ecosystem.config.js, environment variables, and systemd startup.

Automate updates to your Strapi app by wiring a GitHub webhook on your EC2 instance to pull changes and restart the service with PM2, enabling continuous delivery.

Learn to diagnose and fix the Netlify window error caused by window references during server-side rendering in a Gatsby Netlify static site, using guards, useEffect, optional chaining, and safe fallbacks.

Migrate product images from the local strappy media server to an s3 bucket, update image urls to use the s3 urls, replace assets across components, and deploy the production site.

Identify and fix rehydration errors in a React e-commerce app by debugging the header's active index logic, isolating client vs. server rendering, and validating fixes with local production builds.

Configure production Facebook login by updating app settings with your production domain, valid redirect URLs, and Facebook provider settings; then restart the app and verify sign-in on the production site.

Automate generation of robots.txt and sitemap.xml with Gatsby plugins, configure host and google bot policies, and create these files during the build.

Apply Gatsby image optimization techniques using the new Gatsby image plugin and Gatsby source Satrapy to generate responsive images with blur placeholders, breakpoints, lazy loading, and WebP formats.

Implement dynamic image optimization with the Gatsby image plugin by switching to the Gatsby image component and querying image data.