Pokémon Feature Flags demo

Here's a demo for integrating feature flags into a React project! Built with React, Vite, the PokeAPI, and LaunchDarkly!

When the feature flag is off, only Normal type Pokémon can be searched for in the app. When the flag is turned on, then any Pokémon can be queried!

Deploy your own

LaunchDarkly setup

Once you've signed up for LaunchDarkly, create a feature flag. I call mine testaroni, and you should too if you want this to work out of the box. Otherwise, you can change it in the isAllowed function in Pokemon.jsx. Under Flag variations, make it a String type and add an "all" type, and any other Pokémon types you'd like to include:

After that, you're all set! You can toggle it on and off in the LaunchDarkly UI, set the default rules, segment which users get which types, and more.

Netlify setup

Click this button to deploy your own version of this project to Netlify!

You'll need to add your environment variables after cloning. Structure your .env.local file like so (you can find your client ID under Account Settings => Projects):

VITE_LD_CLIENT_KEY=your_key

...and then plop it into Netlify, and you're done!