A Complete Guide to the JAMstack and React E-Commerce

Explore the headless CMS as the backbone of a jamstack architecture, learn how Strapi addresses data organization and back-end creation, and apply best practices to structure data for streamlined development.

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.

Understand how models, the M in MVC, define data structures through content types and collections, generate Mongo DB models in a strappy project, and use lifecycle hooks to run logic.

Explore how endpoints power a headless CMS API, exposing content types as REST endpoints, enabling get, post, put, and delete operations, with filtering, pagination, and custom endpoints.

Explore roles and permissions in Strapi to control authentication and access to article data, configure default public and authenticated roles, and set permissions for routes and actions.

Learn how satrapy controllers define endpoints and how to extend default controllers with custom logic to manage content, routes, and author-based permissions in an MVC framework.

Learn how policies in the framework execute pre and post controller logic to secure routes, using global and scoped policies like is authenticated and admin, and understand performance implications.

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.

Define category, product, and variant content types in the dashboard, including fields like name, description, filter options, featured, images, and relations: category has many products and product has many variants.

Create categories, products, and variants in the Strappy admin dashboard using defined content types, then enter three designs for hats, hoodies, and shirts to populate your store.

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.

Learn how to access Strapi backend data from the front end and build the interface using GraphQL, Gatsby, and the JAMstack approach.

Compare REST and GraphQL, showing how GraphQL uses a single endpoint to query multiple resources and return only the information we want, reducing bandwidth and data transfer in e-commerce setup.

Navigate the GraphQL documentation to understand fields, queries, and mutations. Create and fetch data by using fields, arguments, and variables, and explore a graphical editor for building valid queries.

Explore how schemas define data structure and query results in GraphQL, and how Strapi models map to GraphQL schemas for automated, plug-in driven integration.

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.

Create a Gatsby project, install the Gatsby CLI, set up a front-end folder, start the dev server, and connect Gatsby to Strapi using GraphQL and the Gatsby source Strapi plugin.

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.

Build the front end by connecting Gadsby with Satrapy, then master layout, grid, styling, and theming to create responsive, centralized designs for header, footer, landing, and contact pages.

Learn how Material UI speeds front-end development with a reusable component library, grid layout, styling, and a default theme featuring breakpoints, palette, and typography for responsive design.

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.

Discover how to merge a custom Material UI theme with the default theme, customize palette and typography, and apply global overrides in a React e-commerce JAMstack project.

Convert a design file into a cohesive Material UI theme by establishing a monochromatic neutral palette, defining primary and secondary colors, centralizing tokens, and building rem-based typography.

Create a custom theme for a jamstack React e-commerce site by wiring typography and color tokens—Montserrat and Monstercat fonts, rem-based sizes, weights, and headers—into a material UI design system.

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.

Import material UI components—app bar, toolbar, typography, button, and tabs—to build a header, render the logo as a typography-wrapped home button, and adjust color and elevation.

Build a responsive header in a JAMstack React e-commerce project using Material UI components, add tabs for app routes, and integrate icon buttons with accessible images.

Learn how to add custom and Google fonts in a Gatsby project using the web font loader plugin, prefetch fonts into static assets, and configure font families and variants.

Learn to customize Material-UI components by using the classes prop and make styles, override the tab indicator color, and apply root and indicator styles via the theme.

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.

Query backend data from Strapi using a Gatsby static query, then generate header tabs by mapping over category edges and include a contact us route.

Learn how responsive design, the modern solution, adapts front-end styles to any screen size, contrasting fixed and adaptive approaches, and delivering a seamless user experience without separate mobile styles.

Apply responsive design using rem, percent, vh, and vw with media queries and a grid system; test across devices to ensure look and function on all sizes and orientations.

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.

Apply responsive design by swapping header tabs for a mobile drawer using Material UI and use a media query. Build the drawer with a list and manage its open state.

Learn how to implement responsive design in React by mapping routes to a dynamic tab list and a drawer, toggling open state with useState, and adapting icons across breakpoints.

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.

Implement clean navigation in Gatsby by conditionally rendering icon buttons, wiring them with a link component for cart and account, and applying responsive header styles and active tab behavior.

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.

Wire up the active tab by reading window.location.pathName, finding the matching route from the routes list, and passing the computed index to the tab components.

Master the Material UI grid system overview built on a 12-column flexbox layout, learn responsive breakpoints, and apply container, item, and item-container patterns for precise, scalable layouts.

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.

Create a footer using a main grid container split into a links section and a social icons section, with links in rows and icons stacked in a column.

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.

Refactor the footer by programmatically generating link columns from a roots object, mapping object keys to render internal and external links with proper keys and no underlines.

Build the landing page hero block using a responsive grid in React, combining left text with typography and a right-side Lottie animation, centered with proper alignment and animation control.

Build a promotional products block with a left 3-D carousel and right detail text, using a grid layout and Strapi promo flags, and render three featured products via Gatsby GraphQL.

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.

Create a promo product carousel by mapping promo nodes to slides, rendering images and the product name on the selected slide, and configure Gatsby to load images from Strapi.

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.

Create a featured product slide by fetching backend data and rendering a grid of product frames with images and slides, using Material UI grid, typography, and styles.

Learn to build a featured product slide under a frame using box sizing, borders, and precise height; align with grid and justify, then use absolute positioning and spacing for elevation.

Create a featured product slide in a React e-commerce page using useState to track the open slide, translate transforms, and a transition for smooth sliding behind the image.

Create a reusable star rating component for product frames in a JAMstack and React e-commerce app, supporting a five-star system with full, half, and empty stars.

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.

Design marketing buttons on the landing page to drive conversions, linking to a store page or social channels. Use a grid with left-to-right and space-around justification, mapping icons to labels.

Map over the marketing buttons array to render each button in a grid with icon and label, applying a background image and hover grow with link behavior.

Build a landing page call to action with a left image and right text in a grid layout, featuring typography and two material ui buttons linked via Gatsby.

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.

Implement responsive design for promotional products section by adjusting padding, switching to a column layout at medium, centering text, and sizing the carousel and images for small and extra-small screens.

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

Tune the home page marketing buttons for responsive design across breakpoints to prevent overlap. Debug overflow by adjusting margins, icon sizes, and typography for small and extra small screens.

Develop a responsive landing page by implementing a medium breakpoint column layout for the call to action, centering text and buttons, with padding adjustments to prevent edge contact.

Use chrome device simulator to test mobile views and adjust breakpoint styles. Tweak icon and button sizing, hover behavior, and overflow for a mobile-friendly JAMSTACK and React ecommerce landing page.

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.

Style the contact page with a green background, a full-height main container, and a responsive grid using useStyles and the theme palette. Center typography and button sections.

Style the contact page by composing shared and distinct css classes, using flexbox for alignment, adjusting typography and icon sizes, and planning a reusable svg icon approach for color consistency.

Learn to build reusable, customizable SVG icons in React by converting SVGs into components, passing a color prop, and using viewBox for scalable, distortion-free sizing.

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.

Use Material UI text fields to build a four-field contact form (name, email, phone, message) with placeholders and a multiline message input, wired to useState and onChange for controlled inputs.

Style text fields in Material UI by customizing hover and focus colors, borders, and padding with global styles and class overrides, achieving white text and consistent spacing.

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.

Explore building reusable form validation for a JAMstack storefront, validating email, phone, name, and message on a contact form, showing errors on blur and disabling the send button until valid.

Wire up form validation in a React JAMstack e-commerce course by using a validation function, managing errors, and showing error styling and helper text for name, email, phone, and message.

learn real-time form validation in a react e-commerce form by validating on every character, updating an errors object, and disabling the submit button until all fields are valid.

Apply responsive styles to the contact page using breakpoints to switch the main container from row to column. Adjust heights and margins so the form and info stack cleanly on all sizes.

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.

Explore page queries in Gatsby to add dynamic, variable-driven data requests using the create page API, build product and category pages, and render templates with context.

Learn to programmatically build category and product pages in Gatsby using page queries, GraphQL, and createPage, wiring templates and page paths like hats, shirts, and hoodies.

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 the dynamic toolbar for the product list page, displaying category name and description, toggling between grid and list views, and enabling filter and sort options to refine displayed products.

Develop the dynamic toolbar for the product list by scaffolding a Material-UI grid, styling a bordered, centered toolbar, and integrating it into the product list page.

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.

Build the sort user interface for the product list, featuring a left sort icon, a middle options panel with chips, and a right close icon, ready for future sorting logic.

Learn how to toggle the sort option in the user interface, render the sort component, and adjust grid layout and chip styling to reflect the selected sort.

Implement category-specific filter options in the dynamic toolbar, adding size filters for hoodies and shirts and color labels for hats, using Strapi to define the filter JSON structures.

Add a functional filter UI to the top dynamic toolbar by querying and wiring filter options (size, style, color) into the product list through context, and render checkboxes in chips.

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.

Learn to add a category description to the bottom half of the dynamic toolbar in a JAMstack React e-commerce app by building a reusable description container with name and description.

Add a layout button to toggle list and grid views on category pages. Convert SVG icons to React components with a default green color prop and style the button group.

Build a layout toolbar in React that toggles between grid and list views. Use useState and CLX to apply a green selected state and white icons for the active option.

Finish styling the dynamic toolbar by using absolute positioning for the button group to keep category, name, and description centered, and lift option state to the common ancestor as props.

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.

Build category-specific product list by creating a Gatsby page query with a category id variable that fetches products, variants, prices, and images, and passes data to the product list component.

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.

Explore a programmatic grid layout for product frames, using a 95 percent container, 25rem items, and calc-based spacing with nth-child to keep four items per row and even gaps.

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.

Learn to implement a product quick view using a Material UI dialog, showing rating, stock, price, size and color variants, and add-to-cart in a responsive grid layout.

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 the quick view bottom toolbar for a product showing name, rating, stock, and a details button with an explorer icon. Arrange with grid layouts, theme colors, and precise padding.

Add the product price to the quick view and refactor chips for reusable styling. Apply default material-ui chip styles via theme overrides to keep chips consistent across the app.

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.

Pass the product sizes as a prop, derive actual sizes from the possible sizes with the dot every check, and render circular size buttons in a Jamstack React e-commerce app.

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.

Create color swatches as circular color buttons from a mapped colors array in a grid, sorted alphabetically for consistency, with overlapping swatches and toolbar padding.

Learn to implement color swatch selection by lifting state for selected color, passing it to swatches, updating on click, and visually indicating the chosen color via a conditional border.

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.

Build a product frame list that shows a left image and right information in a list view, with a dynamic toolbar and shared layout state for grid or list layouts.

Create a reusable frame helper to render product frames as either a grid or a list by passing the frame component and layout prop, sharing data.

Build a responsive product frame that renders variant images, centers them in a grid, and uses state lifting to manage sizes and colors across quick view and product frames.

Refine the product frame list by adjusting sizes, frame height, and padding to achieve a balanced grid and list view, with dynamic props for sizes, colors, and quick view.

Add a go-to-top floating action button to a product list using material ui fab, use ref and scrollIntoView to smoothly return to the top marker at the dynamic toolbar.

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.

Paginate products by slicing content per page and product count, rendering only current items in list and grid views. Reset to page one on layout change and refine pagination styling.

Improve the product list by fixing the key prop for swatches and centering the price with absolute positioning inside a relative toolbar; toggle visibility during quick view.

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.

Link product list items to individual product pages using category-aware paths with Gatsby Link. Enable image, title, and quick view clicks to navigate to each product page.

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.

Implement responsive design for the product list page by refining the dynamic toolbar across breakpoints. Stack the description and layout button on mobile and adjust widths to prevent overlap.

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.

Design a responsive list view by adapting product frames, info blocks, and spacing across breakpoints from large to small, ensuring seamless mobile layout and pagination alignment.

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.

Enable filter option selection on the product list by turning filter options into state, wiring checkboxes, and building a handle filter to toggle checked values for dynamic filtering.

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

Learn to filter products in a jamstack react e-commerce app by size and style, fix value-label mismatches in strapi, manage an is_filtered flag, and adjust pagination.

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.

This lecture shows how to implement a multi-filter system that builds a master list from active filters, prevents duplicates, and enforces all-category matches while allowing OR within categories.

Implement a multi-filter system that narrows a master product list using active size, color, and style filters. Validate that items pass all filters and showcase examples like hats and shirts.

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.

Sorts products by name, created at, and price in JavaScript, handling ascending and descending order. Extracts node properties, lowercases names, and uses the first variant price for sorting.

Store sort options in state, render selectable chips, and activate the chosen sort to drive product sorting via a dynamic toolbar and corresponding alphabetic, newest, oldest, and price options.

Sort the master product list using the active sort option and apply sorting before filtering, so the displayed products reflect newest, oldest, price, and alphabetical order.

Learn to build a product detail page with a left image gallery and a right information panel, including thumbnails, favoriting, reviews, and a recently visited products slider.

Builds and configures the product detail page by querying product data, including description, variants, and images, and wiring it through page context with a reusable layout and components.

Render a product image gallery with a main image reflecting the selected variant and clickable thumbnails beneath, using a responsive grid to balance layout.

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.

Enhance the product details section by padding the details container, aligning a price chip to the right, and making the description container scrollable for long text.

Build a product detail section with size and color selection and an add to cart action by wiring up size swatches, quantity controls, and stock indicators in a responsive grid.

Learn to craft the product detail actions layout, style the quantity button, and align items with CSS while syncing color selection to the displayed image via useEffect.

Use a query string to pass the chosen shirt style from the list to the detail page, ensuring the male or female variant image renders for shirts with multiple styles.

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.

Fixes active tab highlighting on product detail pages by adjusting the header's active index logic to derive the category from the path name, ensuring the correct category remains highlighted.

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 the product detail page's viewed products in local storage, keep the last 10 items without duplicates, and show them as a recently viewed recommendations list.

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.

Learn to persist recently viewed products with their selected variant in local storage, ensure safe updates, and render the correct variant by tracking the variant index.

Create a navigation system for recently viewed products using left and right arrows and a small prop to shrink the product frame grid for compact display.

Wire navigation for a recently viewed list by slicing four products and using state to move forward or backward. Add boundary checks to prevent negative indices or overflow.

Learn to refresh product variants on query string changes with useEffect in a Gatsby React e-commerce app, and fix chip sizing and button alignment for recently viewed items.

Polish a product detail page by implementing responsive styles across breakpoints, switching to a mobile column layout, resizing images, and adjusting widths and heights for optimal viewing.

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.

Learn how Apollo provides a runtime data layer to query live inventory from Strapi, avoiding Gatsby's build-time queries, and compare it to axios or fetch for dynamic data.

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.

Query runtime stock with Apollo using a GraphQL getDetails query to fetch each product variant's quantity by id and display current stock on the product detail page.

Update the product page to display run-time inventory by wiring Apollo query data to component state. Handle loading and errors and show per-variant stock.

Replace the hard coded inventory on the product list with an Apollo query to fetch current stock for each product, using a shared get details query.

Connect the quantity button to the selected variant's stock, enforcing a minimum of 1 and maximum stock, and reset to the max when the variant changes.

Filter color options by the selected size to show only in-stock variants. Use useEffect to reset color and select a matching variant when the size changes.

Learn how to manage color, size, and variant logic in a JAMstack and React e-commerce app, including frame helper usage, swatches, and dynamic image and stock updates.

Debug the color display for each size by gating the useEffect with a null default for selected size, ensuring colors update only after a real size selection.

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.

Build the auth portal as authentication container for the account page, using a Material UI paper surface and grid. Implement a stateful, multi-step login flow drawn from a steps array.

Build a functional login page for the JAMstack and React e-commerce app by wiring a login component with Material UI text fields, input adornments, and state for email and password.

Build a login page by adding email and password fields with adornments, implement show/hide password icons, and arrange login, sign up, forgot password, and Facebook login in a spaced grid.

Publish and style the login page per the design file, applying theme-driven input and button styles, spacing above the account icon, and a password visibility toggle.

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.

Add dynamic login validation with key props, on change, and reusable text fields. Enforce password rules with a regex (min 8 chars, uppercase, number, special) and show real-time errors.

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.

Generalize and reuse email and password fields by creating a fields component that renders text fields with validation and error handling for sign-up and login pages.

Create a reusable email and password fields component and integrate it into login and sign-up pages, enabling multi-step navigation, validation, and dynamic visibility.

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 a Strapi authentication flow by defining public, authenticated, author, and editor roles with permissions, configure email signup, providers, and password hashing.

Discover how JSON Web Tokens power authentication in a Strappy setup, handling signup and login, with token expiration and a secure header, payload, and signature.

Sign up new user by wiring Axios post requests to the authentication server, posting name, email, and password to the register route and handling the returned user profile and JWT.

Implement real-time sign-up form validation by tracking an errors object and validating on change and blur. Enable the sign-up button only when all fields are valid, mirroring contact page validation.

Log in returning users by posting email and password with axios to the strappy backend, returning the user profile and JWT. Enable the login button only when inputs are valid.

Learn how React context provides an application-wide store to share authentication data and UI state across components without prop drilling, using provider, consumer, actions, and reducers.

Set up a react context structure to manage the user state with actions, reducers, wrappers, and action types, and persist the user and JWT in local storage.

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.

Add a loading spinner to the authentication workflow using Material UI CircularProgress and useState, showing the indicator during login or signup and disabling the button to prevent duplicates.

Build a centralized react context for snack bars, enabling any component to set status, message, and open, with automatic error or success color cues.

Implement a feedback context in React using a reducer, context provider, and a Material UI snack bar to display messages globally, with open, message, background color, and onClose dispatch.

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.

Use the user context to implement logout by checking a valid JWT and showing a logout button when logged in, otherwise the auth portal, and clear local storage on logout.

Implement onboarding state with a useEffect cleanup to set onboarding true when leaving the complete page, manage JWT in context, and reveal the logout button after signup.

Wire the forgot password flow by posting the email to reset endpoint, show a loading state, display a 'reset code sent' message, and navigate back to login after six seconds.

Configure strapi to send forgot password emails via sendgrid by installing the strapi provider, creating a sender identity, obtaining an api key, and wiring it into the backend environment.

Configure strapi email by editing backend config to use the SendGrid provider with API key and environment variables. Test reset password emails in the admin panel.

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.

Demonstrate reset password flow by locating the reset step by label, duplicating password fields, and wiring them with a reusable component and use state to render password and confirm password.

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.

Install ngrok to tunnel localhost for development Facebook authentication. Create a Facebook app, obtain id and secret, enable login, and set the redirect URI to your front end and Strapi.

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.

Build a user settings portal and dashboard, display a welcome back message from the user context, and render dynamic category buttons (settings, order history, favorites, subscriptions) with a styled background.

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.

Learn how to create and map multiple springs with react-spring to animate a group of buttons, revealing and hiding items with scale transforms based on selection.

Learn to animate the settings portal using react spring, shrinking other buttons first and expanding the clicked button to fill space. Use resize-aware for live pixel values and synchronize animations.

Control spring animations with to and from, using async next to sequence timing. Split animations into scale and size to expand and reveal buttons on click.

Animate a settings portal with sequenced scale and size transitions, using delays to run actions in order and toggle display none to remove hidden buttons and avoid empty space.

Switch to a small svg pattern for the repeating background and use min-height with auto height, then apply background-size and repeat for a smooth, performant animation.

Animate the transition from the settings button to the user settings panel using a single spring, fading out the icon and label and fading in the settings component.

Learn to choreograph multi-step animations for a settings panel by adding delays, fading icons and labels, and gating component reveal with useEffect timers to ensure smooth transitions between clicks.

Learn to build a four-quadrant user settings panel in a React JAMstack app, featuring a details component with name, phone, email, and password fields, adornments, and three saved-info slots.

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.

Style user settings with hover states, spacing between fields, slot buttons with white circles, and themed text by tweaking containers, borders, and colors.

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.

Develop location settings in the user portal to save three shipping or billing addresses, with street and zip fields, a city/state chip, and regex validation.

build and polish the settings ui for saving, editing, and returning to the settings dashboard, adding edit and save icons and ensuring the layout matches the design file.

Build a two-panel settings UI by applying conditional borders, centering content, and using absolute positioning for bottom-left slots in relative containers, then wire back navigation to the settings dashboard.

Explore Strapi lifecycle hooks to initialize user settings with three empty slots, using before create and after create events on the user content type, and manage JSON fields.

Learn how to implement Strapi lifecycle hooks in the user model to initialize three empty slots—payment methods, contact info, and locations—when a new account is created.

Wire the settings interface to load user profile slots, implement a logout button, and manage slot selection with state and conditional styling to visualize the active slot.

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.

Develop a custom controller to safely update user profiles by validating details and location inputs, applying hashing for passwords, sanitizing responses, and exposing an authenticated route to save settings.

Post updated settings to the set settings route with axios, separating password from details, authenticate with the user JWT, and update the user context with a success notification.

Implement a secure password update with a Material UI confirmation dialogue that opens when changes occur, requiring the old and new passwords and saving via an Axios request.

Build a confirmation dialogue with old and new password fields by reusing the email password component, refactoring to the style prop, and managing values, errors, and visibility with state.

Implement confirmation fields in a password change dialog. Wire up do not change and yes change my password with authenticated requests, snack bars, and a loading indicator.

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.

Build an authenticated change password flow that posts to the user change password route, returns a 200 status, and shows a 'password changed successfully' message.

Add robust settings validation by aggregating detail and location errors, pass them as props, and prevent saving until all fields are valid, displaying an error snackbar when needed.

This lecture demonstrates enforcing form validation on settings, clearing slot-specific errors with useEffect, validating password and confirmation, and disabling the change password action until inputs are valid.

Translate a zip code into a city and state using a postal code API from data.opendatasoft.com, refining by country code for a single location.

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 design for the settings portal using Material UI breakpoints to resize buttons and icons, switch to a vertical layout at medium, and adjust padding and spacing.

Design a responsive user settings page on the settings dashboard by adjusting text field sizes, stacking panels at medium and below, and adding borders for a clean, consistent layout.

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 add to cart, persist the cart across visits, display the cart page, and build a custom checkout with server-side validation using Strapi.

Design a cart page layout with a left image and right details, showing product name, price, id and variant id, quantity controls, and item actions.

Set up a cart context in a React e-commerce app and implement add to cart, remove from cart, and clear cart actions with payloads and action creators.

Set up a cart reducer that handles add to cart, remove from cart, and clear cart actions, tracks stock from Apollo, and saves the cart to local storage for persistence.

Add or remove items in the cart by updating quantities when items exist, capping at stock, and persisting changes in React context and local storage.

Wire up the cart context with a reducer, load from local storage, and expose cart state and dispatch. Show a responsive cart item count badge in the header.

Wire up the cart context and add to cart action to enable adding product variants with quantity from the product list, quick view, and product frames.

Implement real-time add-to-cart feedback by switching the cart icon to a checkmark with a bright green background, using state and a timed useEffect to revert.

Build a cart page that displays all cart items and a checkout portal, wire up the user context to show the correct username's cart, and set up left-right grid layout.

Access the cart with React context, map cart items to a dedicated item component, and render a responsive grid splitting items and checkout portal with variant data and images.

Build a cart item display by rendering a quantity button, price chip, and variant label, using arrays to simulate stock and a single selected variant.

Style the cart items by converting svg icons to resizable React components, applying theme colors and viewBox, and ensuring a grid item key fixes layout.

Learn to style cart items using grid and flex, align the id and actions on one line, and center the price chip with absolute positioning and spacing tweaks.

Modify the cart quantity button by removing the add-to-cart element, using an is cart prop for styling, and syncing the counter with cart updates via dispatch actions.

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.

Create a checkout portal with navigation through contact info, address, shipping, payment, confirmation, and thank you screen, pass the user, and manage the selected step with state using back-forward controls.

Explore how the checkout portal centers the top navigation and dynamically hides back and forward buttons based on the current step, including first, last, and confirmation screens.

Reuse the contact info component from user settings to build the checkout contact info section, render it in the checkout portal, and wire up values, slot state, and errors.

Adjust contact info styles for checkout by switching to a full-width, single-column layout, applying conditional classes and a billing switch using Material UI form controls.

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.

Reuse the location component from settings to collect the shipping address in checkout, wiring location values, slot, and billing state, and adapt styles and fields for the checkout context.

Learn to implement free shipping, two-day shipping, and overnight shipping options in the checkout flow, store the selected shipping in the checkout portal, and pass it to the confirmation screen.

Style shipping options in a React e-commerce interface by standardizing button size and color, adding hover effects, and using conditional classes to reflect the selected option.

Integrate the checkout payment ui by wiring the payments component, lifting slot state to the parent, and adding a save-card switch for future payments with the Strib API.

Builds the checkout confirmation screen with a new confirmation component that lists all collected order details, using a grid layout and adornment icons for name, email, phone, and address.

Create a reusable checkout confirmation layout by defining a fields array with adornments, mapping to generate name, email, phone, and address fields, and align pricing details with promo code handling.

Build the checkout confirmation screen by adding a promo code text field, managing field state and errors with useState, and displaying subtotal, shipping, and tax in a responsive grid.

Style the confirmation screen by adding dollar signs to prices, applying alternating dark and light green rows, and right-aligning price values. Center content and set row height to 2.5 rem.

Style confirmation fields in a Jamstack and React e-commerce checkout by centering icons, aligning adornments and values with flex, adjusting spacing, and adding a promo field.

Add a full-width place order button at the bottom of the confirmation screen, displaying the total price with a styled Material UI chip.

Implement checkout validation with per-field checks using a validate function and an error helper to disable navigation, update city and state from zip, and reset errors when slots change.

Learn to handle billing info during checkout by adding optional billing steps when no slot is marked, wiring billing details and billing address, and filtering steps accordingly.

Wire the checkout values to the confirmation screen by passing billing, location, and shipping data, then compute subtotal, tax, and total with cart context and formatted prices.

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.

Implement robust billing info validation across all checkout states, including when billing and shipping slots differ, by updating the error helper to validate billing details with the current shipping slot.

Learn how to validate billing and shipping information across slots, handle no-slots scenarios, and ensure the forward button enables only when both billing and shipping fields are valid.

Fix billing validation by preventing overwriting saved values when switching billing on or off in the details component, preserving slot data across forward and backward navigation.

Add a billing confirmation section to the checkout flow that displays billing info when it differs from shipping, using a new billing confirmation component and conditional rendering.

Render and align billing information in checkout, showing shipping and billing addresses on a confirmation screen with field mapping, hidden-field handling, and spacing under the checkout portal.

Add save and delete icons to the checkout header as icon buttons, with precise sizing, alignment, and absolute positioning, then conditionally show them on steps with has actions.

Learn to save checkout information to a slot by posting authenticated data with axios, manage loading states, provide snackbar feedback, and update the user profile with new slots.

Learn how to delete saved checkout information by resetting details and location slots when values are omitted, and clear user interface fields while updating success and error messages.

Define an order content type in the back end, configuring fields for items, addresses, shipping, totals, and a user relation; then validate server-side to prevent front-end price tampering.

Create an order controller that validates cart prices and stock, supports authenticated and guest users via a guest account, and uses async functions and Promise.all to securely create orders.

Implement server-side cart validation to prevent tampering, verify item availability, compute accurate totals with shipping and tax, and update stock as checkout proceeds.

Validate the cart server-side, handle invalid cards or unavailable products with 404 bad request or 409 conflict, create and sanitize the order via strappy.

Wire up the place order flow on the front end, handle guest versus logged-in users, and post order data to the Strappy server using Axios with a loading indicator.

Explore placing orders in a JAMstack e-commerce app: pass JWT for authenticated users, omit authorization for guests, manage loading states, and verify order totals and responses on the confirmation screen.

Display order errors to users via a feedback context and snack bar, handle 400 and 409 responses, show unavailable items with stock, and reassure customers they were not charged.

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.

Style the order row in the checkout UI by aligning the order id left and the details button right, with width driven by the expected by date.

Master responsive cart design for a JAMstack and React ecommerce site by implementing mobile-first breakpoints, reflowing items and the checkout, fixing overflow with margins, and refining typography and controls.

Apply responsive checkout design by using Material UI media queries, adjust breakpoints to small and extra small, and responsively resize the checkout portal, navigation, and slot labels for mobile-friendly experience.

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.

Learn to implement responsive checkout design by truncating long emails with ellipsis, controlling grid and typography wrapping, and aligning billing details for mobile, with a preview of integrating stripe payments.

Ignite payments with Stripe in your JAMstack and React e-commerce app, handling credit card input, payment processing, saving payment methods, and viewing order history.

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.

Set up a Stripe account, obtain publishable and secret API keys, and configure backend and frontend to test Stripe payments with environment variables.

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.

Learn to integrate Stripe elements in a React app by loading Stripe with a publishable key and wrapping checkout components in an Elements provider for card payments.

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.

Learn to implement Stripe's payment intent API to create and confirm payments, handle client secrets, and enable saving cards for future use with idempotency keys and server–client coordination.

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.

Learn to build a server-side processing controller that validates cart data, generates or updates a Stripe payment intent, and returns the client secret on the JAMstack storefront.

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.

Confirm the card payment on the client using the client secret, stripe elements, and an idempotency key, then finalize the order in Strapi after a successful charge.

master the jamstack and react e-commerce checkout by keeping the stripe element mounted and toggling steps by hiding and showing them, preventing errors on the confirmation screen.

Fixes errors in the checkout flow by using optional chaining operator to guard undefined shipping price and order ID, and keeps the Stripe card element mounted on the confirmation screen.

Finalize the order by confirming the payment with stripe using the client secret, then save the order in Strapi with the transaction id and update stock.

Save payment methods for future use by wiring the checkout flow with stripe, capturing card details, creating a payment method, and persisting brand and last four on the user profile.

Learn how to save a payment method to a user’s strappy account and React context during checkout, update the order with that method, and reflect it in confirmation.

Fixes a stripe integration error by wrapping the payment section with the stripe elements provider and loading stripe with the publishable key to enable saved payment methods.

Learn to leverage saved payment methods in checkout by automatically enabling forward navigation when a saved card exists, and manage card state and payment intents with Stripe.

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.

Enable the authenticated route to remove a saved card, implement an axios-based network request to Stripe and strappy, show loading feedback, and update the user profile and local storage.

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.

Fetch a user's order history via a Strapi controller. Build a React component that retrieves orders with axios using the user context and JWT, and displays them in account settings.

Display a user's order history in a sortable, paginated data grid using Material UI, with expandable order details and a quick buy option to re-add items to cart.

Build an order history table with a data grid. Define columns for shipping, order, status, date, and total, set header names, and use flex for responsive sizing.

Customize the data grid by bolding column labels, centering titles, removing dividers, and adding a blank actions column with a date type for proper filtering and shipping sorting disabled.

Map retrieved order history to data grid rows by creating mapping function that converts each order into a row with shipping, order id, status, date, and total, then update grid.

Explore styling data grid rows and cells to display shipping addresses clearly by adjusting white-space, max-height, line-height, and padding, and by formatting timestamps into readable dates.

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.

Show how to fill the order details drawer by selecting an order, display the last 10 characters of the ID, and guard against undefined orders with the conditional chaining operator.

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.

Display purchased items in order details by mapping order items, rendering image, name, style, size, and a price chip, and implement a responsive order history view.

Learn to implement order history responsive design by switching from fluid flex widths to fixed column widths, enabling scrolling inside the table while preventing page-wide horizontal scrolling across breakpoints.

Develop responsive order details in the order history by sliding the drawer from the bottom on mobile, adapting width and typography for small screens, with clear swipe-to-exit cues.

Master responsive order details design in a Jamstack e-commerce app, using Material UI drawer, spacing, and a light green background, while wiring the Strib API for checkout and order history.

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.

Create a product review feature by defining a review content type with text and rating, linking reviews to products and users, displaying existing reviews, and updating the product’s average rating.

Build a product reviews interface on the product detail page with two components: a reviews list and a single review form. Integrate user context for usernames, rating, and date formatting.

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.

Explore how to implement an interactive rating hover with a five-star component in React, using onMouseMove and boundingClientRect to calculate hover percentage and illuminate the appropriate star and half-stars.

Explore implementing a rating hover in a React e-commerce app by mapping hover width to a 0–5 star scale, rounding to the nearest half, and syncing state.

Make the star rating clickable to lock in the value, with a pointer cursor. Show the larger of the locked or hovered stars, and reset on mouse leave.

Learn to implement review controllers with Satrapy: enforce owner policy, create, update, and delete reviews by the authenticated user, and extend core controllers for secure operations.

Compute and persist a product’s average rating when reviews are created, updated, or deleted. Implement a reusable service to calculate, round to the nearest half, and update the product.

Wire up the leave review feature by posting text and rating to /reviews with authenticated headers and product id, show a loading spinner, then update the product average review.

Fetch and display product reviews at runtime using Apollo and a get_reviews query, rendering each review's id, text, created at, and username for the product on page load.

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.

Display existing reviews and wire up a new review field on the product page. Enforce login checks, scroll to the review form, and support editing or adding reviews on top.

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.

Learn to refine the product reviews user interface by filtering the user's review, enforcing one review per user per product, and switching the action button to edit review when needed.

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.

Learn to implement delete review functionality in a JAMstack and React e-commerce app by adding a delete button, performing an axios delete to /reviews/{id}, and updating the list.

Fix delete reviews flow by placing authentication headers correctly for axios.delete, handle empty reviews to avoid division by zero, and update list and average rating after changes.

Learn to paginate product reviews by setting reviews per page, calculating total pages, and slicing the list to show the current page with a pagination component.

Learn how to create a reusable styled pagination component with Material UI, enabling default styles via a styled version that respects the theme and avoids global styles.

Learn how to wire real-time product ratings from the average rating into a React e-commerce app with Apollo queries, useState, and useEffect, and fix hooks rules by extracting per-item components.

Refactor the home page featured section by creating a featured product component, passing props, moving queries and state, and wiring actual ratings from the product review system.

Create a favorite content type linking a user to a single product. Enable a user to have many favorites and view them in settings.

Implement favorites controllers that auto-assign the creating user from the JWT and ensure owner can delete. Extend controllers per Strapi docs and enable authenticated users to create and delete favorites.

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.

Learn to customize the me endpoint to attach a user’s favorites to the returned profile by mapping favorites to product id and favorite id, enabling remove actions.

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.

Implement reusable delete and add-to-favorites logic across the app. Update success and error messages and synchronize the user’s favorites between backend and frontend, refreshing the UI icons.

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.

Create a reusable favorites icon component and connect it to the cart, wiring props to add or remove products from favorites with consistent styling.

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.

Transform favorites data into table rows by formatting each item with name, image, variants, quantity, and price, then render the favorites table with a delete icon.

Learn to manage per-row size and color selections in the favorites list by storing selections in a single state object keyed by row id, using sizes and swatches components.

Initialize per-favorite variant state (variant index, size, color) and map favorites to this state in a Jamstack and React e-commerce app, ensuring UI updates after data loads.

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.

Build a reusable data grid in React with Material UI, applying styles to order history and settings tables. Include a header with a back button and configurable rows per page.

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.

Learn how to implement subscriptions for a jamstack e-commerce app by creating a subscriptions content type in the strappy dashboard, defining frequency, deliveries, and linked orders.

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.

Configure a subscription quantity button with stock and selected variant props, add white and hide cart options, and refine hover and rounding for the subscription dialog.

Create a Material UI select to choose subscription frequency, displaying options as chips and syncing with state, including one week, two weeks, one month, three months, six months, and year.

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.

This lecture teaches how to implement responsive dialog design for a subscription component using Material UI media queries and breakpoints. It shows adaptive layouts for small and extra-small screens.

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.

Show how to indicate subscription items in the cart with a frequency chip, adjust layout and margins for alignment across breakpoints, and prepare checkout to handle subscriptions.

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.

Ensure that subscription purchases require saving a card, prevent removing the last saved card with an active subscription, and require login to access the subscription dialog.

Validate subscriptions and payment flow in a React JAMstack app by removing user data from subscriptions, ensuring login for subscription actions, and preventing out-of-stock items from being added to cart.

Learn to build a reusable frequency select for a JAMstack React e-commerce app, enabling cart frequency changes via a standalone Material UI select with value and setValue.

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.

Toggle subscription status from the cart by dispatching a toggle subscription action that sets or removes the subscription and its frequency, persisting changes to local storage and syncing the UI.

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.

Update the order history to indicate subscription items with a frequency chip under the price, using a column grid, and update the next and last delivery dates for recurring orders.

Retrieve a user's subscriptions by building an async controller, exposing a subscriptions/me route, sanitizing each subscription, and fetching and displaying them in the settings page.

Create a subscriptions data grid by configuring columns (details, item, quantity, frequency, next order, total) with headers mapped to subscription fields, set per page, and navigate back via settings grid.