Data Driven Development: A/B Testing for Product Engineers

Explore a mock sunglasses store built with React, Redux, and React Router to practice setting up A/B tests. See how in-browser checkout and frontend features support product experiments.

Clone the repo from GitHub, install dependencies with npm, and start the dev server to explore the code, assets, and a local JSON API for products and reviews.

Learn how React Router routes render within a shared app template using a root path and outlet, with dynamic segments like category and product IDs via useParams.

Design and implement your first A/B test by building a framework to split traffic into two variations, show cart or keep original, and measure impact on the checkout flow.

Build an Express back-end server to bucket users in AB test variations, track checkout events, and analyze results to identify the better variant, coordinating front-end and back-end.

Enable post requests for A/B testing tracking by parsing json and url-encoded data in express, enabling cross-origin requests, and logging bucketing and purchase events for analysis.

Save tracking data locally using csv files, with a file system interface, per-event csvs like purchase.csv and add_to_cart.csv, and include a uuid user id and epoch timestamps.

Track which variation users see by sending bucket events from the client to the server and appending the variation name as extra fields in the CSV.

Learn to implement a purchase event, track it in your ab testing setup, and use automated, simulated traffic to compare variations and identify the winner.

Learn to extract real data from the ABBIE testing platform to build per-variation results with users, purchases, and conversion rate, then assess statistical significance.

Determine when to stop ab testing by applying statistical significance, using a null hypothesis and chi-square or t tests to confirm a new variation outperforms the original.

Learn how to perform the chi-square test of independence by hand, using a show cart vs original example to assess independence of conversions and understand degrees of freedom.

Install the chi-square A/B testing library, input two variations with sample sizes and completions, read the p value and confidence level to determine statistical significance.

Learn to fix double counting by tracking unique user IDs per variation, implement experiment-scoped bucketing, and pass dynamic experiment names and metrics to the results API for multi-experiment a/b testing.

Review the simple track function that mimics major analytics concepts—universal user identifiers, events, and data—so we can bucket users, measure a metric, and test for statistical significance in A/B experiments.

Organize experiments in a dedicated object and map each experiment name to its selected variation for dynamic a/b testing in the cart workflow.

Set up configuration-driven test variations by replacing hardcoded strings with a variations object that maps names to data, and randomize selection to support multiple variants and robust bucketing.

Clean up the client side of the A/B test by moving variation checks into a run experiment function, returning a boolean show cart decision from configuration.

Activate experiments by bucketing users only after they trigger the test, keeping a constant variation for the session; click add to cart to activate with show cart test for significance.

Targeting enables running tests on specific urls via pattern matching, such as product pages, with configurations in test objects and data-driven run experiments triggered by location changes.

Organize your A/B testing experiments by modularizing each test into its own file, importing them via a central experiments index, and automating variation selection for scalable, version-controlled testing.

Apply real production-ready A/B testing to boost conversions by iterating on a show-cart test, moving from a slide-out to a modal with recommendations, and permanently integrating it.

Learn to set up an A/B test by integrating an add to cart modal into the cart state using Redux patterns, including actions, reducers, and component wiring.

Scaffold an add-to-cart modal with a blurred backdrop, product header, thumbnail, checkout button, and placeholder recommendations, and wire in the cart state and last item added.

Implement a recommendations flow by fetching products via API, selecting three random items, and rendering thumbnails in an add-to-cart modal, setting up the test in a follow-up video.

Create and style an add-to-cart modal by adding a new component, importing it, and overlaying a centered, fixed modal with a translucent background, flexible columns, a no-list layout, and plan click-to-close.

Close the cart modal by clicking the overlay. Navigate to a product page from a recommended for you link via React Router, dispatching the toggle cart modal action with Redux.

Configure and run the add to cart modal test by activating the experiment, selecting the variation, and defaulting to the original to protect user experience.

Choose the right metric by turning purchases into a categorical 'more than one item' event, then compare conversion and multi-item purchases across A/B test variations to gauge impact.

Learn how to interpret AB test results by analyzing conversion rates and other metrics, gauge statistical significance, and balance purchases, revenue, and add-to-cart effects across experiments.

Explore how to analyze behavioral data in python to link viewed product images to purchases using pandas in a Jupyter notebook, and set up an AB test.

Explore the long gallery test: remove thumbnails and show all product images at full size to drive scrolling and reveal how image exposure relates to conversion on mobile.

Set up the long gallery test with a default variation and automatic activation on product pages, then emphasize keeping test logic in the gallery component to avoid separate templates.

Set up a single gallery component with a boolean flag to toggle original and long gallery versions for an a/b test, map images into items, and optimize the mobile view.

Adjust the page structure by moving the buy bar below the first image and adding a second gallery for mobile view, guided by a boolean flag and ternary logic.

Analyze the A/B test results across desktop and mobile, with purchase as the primary metric and add-to-cart monitored for layout changes, and note that visuals drive decisions more than text.

Plan A/B tests to address no dead ends on the checkout success page and design engaging options to keep users returning after purchase.

Examine the checkout success test in e-commerce to avoid dead ends, boost engagement, and measure time between visits or repeat purchases via a product feed with voting and alert emails.

Set up scaffolding for the checkout success test with the voting digest component wired to a test configuration file and manage variations via state.

Data from the checkout success test flows into the voting module to decide the new variation. Use page targeting and useEffect to drive a data-driven UI and manage race conditions.

Create a vote card for the checkout success test, including up/down vote buttons using feather icons, image integration from assets, and a local vote function to simulate ab testing results.

Learn to style vote cards with CSS by building a wrapper, using flex layout, sizing images, adding borders, and adjusting button padding for a usable UI.

Create a dedicated data file for vote card data, import it into tests, and render multiple product images with ids to drive voting and track analytics.

Wrap up the a/b test by validating the default to the original variation and how data-driven rendering selects variations. Voting on products drives engagement and future conversions.

Explore an A/B test challenge that compares review ordering, preserving the original order in one variation while sorting by best reviews first in the other.

Sort product reviews by rating to show top reviews first using an A/B test. Build a reviews test with variations, run on product pages, and use the reviews API.

Rename all product names across the whole website for all 12 products, ensuring the new names appear everywhere—from category pages to cards and checkout.

In this lecture, product engineers learn to run an A/B test to rename all website products by applying a centralized variation through the API, ensuring consistent naming across pages.

Implement a desktop-only mouse-over effect on the category page to switch to the third gallery image, creating a subtle turn that invites users to explore more.

Learn a data-driven hover solution for a product card that swaps to the last gallery image using React state, with mouse enter and leave events controlled by an a/b flag.

Run an A/B test to show scarcity cues: a bottom category-banner when inventory is under ten, and an 'only X remain' notice above add to cart on product pages.

Demonstrate an a/b testing approach to display a low inventory banner on category and product pages for product engineers, using product data, variations, and a run experiment workflow.

This course wrap up invites engineers to integrate AB testing into all product cycles, fostering better developers and ongoing learning, with open reminders to ask questions and request more videos.

Use create-react-app to scaffold a mock ecommerce store with simulated data, categories, and checkout, hosted by an express web server for real-time ab testing of front-end experiences.

Set up react-router-dom routes for products, categories, and checkout, wrap the app in a browser router, and add a header with category links and basic styling.

Explore how React router renders nested routes within a shared template using an outlet, enabling category pages to appear inside a consistent header layout.

Create a category component and render it via a new route, using React Router's useParams to extract a category name from the URL and display category-specific content.

Refactor the app by relocating routing information into a dedicated roots folder with an index.gsx component and update dependencies to keep routing clean.

Demonstrate using git to stage all changes, commit with a descriptive message about routing and a new category component, and verify status and log.

Publish product data and image assets for a category page by uploading a products file, creating an assets folder in the public directory, and exposing data via web links.

Explore how to fetch and display product data on a category page using React useState and useEffect, manage immutable state, and filter results by category with params.

Create a reusable product card component, align content with the header, and render cards by mapping product data with props in a components folder.

Style a product gallery using flexbox, add image thumbnails and product cards, import category data and CSS, and refine borders, spacing, and responsive sizing for a polished storefront.

Refactor the category template to use a global Redux store, create a product slice, and dispatch actions to share product data across the app.

Create a product detail page by adding a product route with a URL parameter, retrieving the product by id from state, and linking product cards to the new page.

Learn the difference between abstract (double equals) and strict (triple equals) comparisons, ensuring string and integer types match when validating product ids from URL params.

Learn to style a two-column product page with a left image gallery and a right side for name, price, description, features, and an add-to-cart button, using modular components and flexbox.

Debug a gallery app by inspecting the console, fix list key props in React using unique keys or indices, and implement on click as a function to prevent infinite re-renders.

Debug and resolve an undefined product error by loading all products at app startup in a mock store, using a debugger, dispatching actions, and ensuring rendering waits for state updates.

Implement a cart feature by creating a cart slice with items and totals, wiring add-to-cart actions to the dispatch function, and updating subtotal and grand total.

Add a header cart icon with an item count, styled as a red circle, reflecting cart length via useSelector from the cart slice, displaying the count only when items exist.

Implement a right-side cart drawer in a Redux app that slides in and out when clicked, displaying the item list and totals, with a toggle cart reducer and 0.5s transition.

Render cart items by mapping the cart state to item rows with image, name, and price, and provide a remove item control, using flexbox and desktop styling.

Learn to add and style the cart totals, displaying the subtotal and grand total, and implement delete buttons to remove items, setting up the upcoming checkout step.

Implement remove from cart functionality by adding a cart reducer in Redux Toolkit, dispatching a remove from cart action with the item index, and updating totals and items array accordingly.

Create a reusable gsx button component with text and type props, wire a click event, and style a base button with gradients and an active state for add to cart.

Add a hide cart action dispatched to close the cart when header or main is clicked, and move the cart outside the main content to prevent closes.

Add a checkout button to the cart that uses the shared primary button style, wire a click to navigate to a new /checkout route, and create a checkout template component.

Create a two-column checkout template, with left billing and shipping panel and a right cart panel, and extract the cart items into a reusable component for both cart and checkout.

Create a cart totals component from the cart's totals, reuse the cart items list structure, and integrate it into the checkout by passing the cart prop and updating imports.

Add an address panel to the checkout and connect fields to the cart slice, updating name, street, city, state, and post code with a single update address action via onChange.

Style the checkout address panel by resetting borders, spacing, and font sizes, then align fields on their own lines and prepare to add panel navigation in the next video.

Add a next button to drive checkout flow by tracking active panel with React useState, updating the button text from address to shipping method to payment and submit order.

Create a shipping method panel with radio options for standard and express, wired to the cart slice via update shipping method and dispatch, ensuring exclusive selection and state-driven rendering.

Build a fake credit card payment panel in the checkout flow, with a CC form panel for card number and expiration, and manage state with Redux.