> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.clubedge.live/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Understand how environments, flags, and SDK keys work together before you provision your first environment or write a line of integration code.

Feature Flags lets you ship code paths behind a flag, then turn them on or off per environment without a redeploy. These docs walk through the three things every integration touches — **environments**, **flags**, and **SDK keys** — and then hand you off to the SDK guide that matches your stack.

The examples throughout reuse three seeded flags from this repo: `new_dashboard`, `welcome_message`, and `checkout_experiment`. You'll see them again in [Getting started](/feature-flags/getting-started) and in every SDK guide.

## The mental model

An environment is the container everything else attaches to. Flags get attached to an environment; each environment has exactly one SDK key; your app uses that key to evaluate flags at runtime.

```mermaid theme={null}
flowchart LR
    subgraph Dashboard
        ENV["Environment\n(e.g. production)"]
        FLAGS["Flags\nnew_dashboard, welcome_message,\ncheckout_experiment"]
        ENV --> FLAGS
    end
    ENV -->|"SDK key\n(copied once)"| APP["Your application"]
    FLAGS -->|"evaluated via the key"| APP
    APP -->|"isEnabled() / useFeatureFlag()"| USERS["End users"]
```

<Tip>
  One SDK key per environment, one environment per stage of your pipeline (development, staging, production). If you need different flag states for staging vs. production, that's two environments, not one flag with extra logic.
</Tip>

## Core concepts

| Concept            | What it is                                                                                            | Where it's managed                                  |
| ------------------ | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| **Environment**    | A named container (e.g. `production`, `staging`) that scopes flags and holds one SDK key.             | Dashboard → Environments                            |
| **Flag**           | A key like `new_dashboard` with a type (boolean, string, etc.) and a value per environment.           | Dashboard → Flags                                   |
| **SDK key**        | The credential your app uses to fetch flag state for one environment. Shown once at creation.         | Environment settings                                |
| **Rule / rollout** | Optional targeting logic (percentage rollout, user attributes) layered on top of a flag's base value. | See [Admin workflow](/feature-flags/admin-workflow) |

## Three steps to a live flag

<Steps>
  <Step title="Provision an environment">
    Create an environment and copy its SDK key immediately — it's only shown once. Then attach the flags this environment should evaluate (start with the seeded `new_dashboard`, `welcome_message`, and `checkout_experiment` if you're just testing the waters).

    Full walkthrough: [Getting started](/feature-flags/getting-started).
  </Step>

  <Step title="Integrate an SDK">
    Install and initialize the SDK that matches your runtime — Node.js and NestJS for backend services, Browser or React for client-side apps, Next.js if you need both, or Direct HTTP for anything else. Every SDK is initialized with the environment's SDK key.
  </Step>

  <Step title="Evaluate a flag">
    Call `isEnabled()` (server/browser SDKs) or `useFeatureFlag()` (React) with the exact flag key. Flag keys are case-sensitive and must match the dashboard exactly — `new_dashboard`, not `New_Dashboard` or `newDashboard`.
  </Step>
</Steps>

## Try it

Here's the same flag, `new_dashboard`, evaluated from a backend service and from a React component. Package names and setup are covered in each SDK's own guide — this is just the shape of the call.

<CodeGroup>
  ```javascript Node.js theme={null}
  import { FeatureFlagsClient } from "@clubedge/feature-flags-node";

  const client = new FeatureFlagsClient({
    sdkKey: process.env.FEATURE_FLAGS_SDK_KEY,
  });

  const dashboardEnabled = await client.isEnabled("new_dashboard", {
    userId: user.id,
  });
  ```

  ```jsx React theme={null}
  import { useFeatureFlag } from "@clubedge/feature-flags-react";

  function Dashboard() {
    const dashboardEnabled = useFeatureFlag("new_dashboard");

    return dashboardEnabled ? <NewDashboard /> : <LegacyDashboard />;
  }
  ```
</CodeGroup>

<Note>
  If `isEnabled()` returns a default value instead of the value you set in the dashboard, double-check the flag is attached to the environment behind your SDK key — see [Admin workflow](/feature-flags/admin-workflow).
</Note>

## Continue setup

<Columns cols={2}>
  <Card title="Getting started" icon="rocket" href="/feature-flags/getting-started">
    Create an environment, save the SDK key, and ship a first flag end to end.
  </Card>

  <Card title="Admin workflow" icon="settings" href="/feature-flags/admin-workflow">
    Manage flags, targeting rules, rollouts, and what to do if an SDK key leaks.
  </Card>
</Columns>