LaunchDarkly Context Demo App

A React application demonstrating LaunchDarkly's multi-context feature flagging capabilities with real-time context updates and visual feedback.

LD Context Demo - 2 October 2025 - Watch Video

🚀 Features

Multi-Context Support

• User Context: Email-based authentication with customer status classification
• Anonymous User Context: Auto-generated for non-authenticated users
• Office Context: Location-based context for LaunchDarkly employees

User Classification

• Employees: Users with @launchdarkly.com email addresses are classified as "Employee" (not "Customer")
• Customers: All other email addresses are classified as "Bronze Customer"

Interactive Profile Management

• Display Name Editing: Click the pencil icon next to your name to update it, this will call the identify method to update the context. The context that is updated will be highlighted for a short period to call out the update.
• Location Management: LaunchDarkly employees can toggle between "Remote" and "In Office". If you edit the location the identify method is called and the context is updated. The context that is updated will be highlighted for a short period to call out the update.
• Real-time Context Updates: Changes are immediately reflected in LaunchDarkly via identify() calls

Feature Flags

• enable-lunch-order: Shows an orange "Order Lunch" button when employees select the in office button for their location
• release-shiny-banner: Displays a promotional banner for gold customers
• show-newsletter-signup: Shows newsletter signup prompt
• show-limited-time-offer: Green banner offering 50% off Gold upgrade (percentage rollout to bronze/silver customers) to only customers

🔧 Setup

Prerequisites

• Node.js 16+
• LaunchDarkly account with a client-side ID

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Copy the .env.example and update the name to.env in the project root:

   REACT_APP_LD_CLIENT_ID=your-launchdarkly-client-side-id
   

4. Start the development server:

   npm run dev

🔐 Authentication

Note: This is a demo application with no real authentication validation.

• Username/Password: You can use any email and password combination
• No Validation: The app accepts any credentials for demonstration purposes
• Persistent Login: Uses cookies to maintain login state across sessions

Example Logins

• [email protected] / any-password → Employee status
• [email protected] / any-password → Bronze Customer status

🎯 LaunchDarkly Integration

Context Structure

The app creates multi-contexts with the following structure:

{
  "kind": "multi",
  "user": {
    "key": "[email protected]",
    "name": "Display Name",
    "email": "[email protected]",
    "customerStatus": "bronze"
  },
  "anonymousUser": {
    "key": "auto-generated-uuid",
    "anonymous": true
  }
}

Feature Flags

Create these boolean flags in your LaunchDarkly project:

• enable-lunch-order
• release-shiny-banner
• show-newsletter-signup
• show-limited-time-offer

Flag Targeting Examples:

• show-limited-time-offer: Set up percentage rollout to 50% of users where customerStatus is bronze OR silver
• release-shiny-banner: Target only customerStatus equals gold
• show-newsletter-signup: Target all customer types or specific segments -- enable-lunch-order: Create a rule to only serve this button if the office location is In Office

Real-time Updates

• Profile changes trigger ldClient.identify() calls
• Context updates are immediately visible in LaunchDarkly dashboard
• Flag evaluations update in real-time without page refresh

🎨 UI Features

• Resizable Panels: Drag the divider to adjust panel sizes

📝 Notes

This is a demo application and is not intended for production use without proper security implementations.