DEV Community

Cover image for Feature Factions Mobile - Cooperate and Battle with DevCycle Feature Flags πŸ€–πŸ§‘β€πŸ­πŸ§β€β™€οΈ
Lem Dulfo
Lem Dulfo

Posted on

Feature Factions Mobile - Cooperate and Battle with DevCycle Feature Flags πŸ€–πŸ§‘β€πŸ­πŸ§β€β™€οΈ

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

For this challenge, I built a role-playing game in React Native where players remit their mined gold to their faction's bank and collectively unlock features. The more players a faction recruits, the faster that faction can buy feature upgrades.

Feature Factions game banner

Welcome to Feature Factions, where the fate of three ancient races rests in your hands! Will you join the precise and mechanical Aetheron, the resilient and cunning Bessari, or the mystical and graceful Calenwyn? Mine resources to fuel your faction’s treasuryβ€”the Aetheron Central Node πŸ€–, the Bessari Guild Vault πŸ§‘β€πŸ­, or the Calenwyn Sylvan Reliquary πŸ§β€β™€οΈ. Work with your allies to unlock powerful upgrades and strategize for the ultimate showdown. The war is comingβ€”#StopPretending πŸ§™and #StartShipping πŸš€

Demo

Screenshots of the 3 factions in Feature Factions game

These are original sprites I designed, inspired by Realm of the Mad God.

For the first "upgrade", all Factions get a baseline option.

Screenshot showing feature varations in DevCycle

I used Permission Feature Flags, and gated based on the UserFaction property. The Bessaris get Configuration 2:

screenshot showing targeting in DevCycle

My Code

https://github.com/bytehala/feature-factions-rpg

My DevCycle Experience

A rocky start, but overall good.

I followed the React Native quickstart, and I kept getting UserError: Invalid SDK key provided when I used the mobile SDK key.

To debug this, I installed the DevCycle CLI and worked to rule out React Native as the source of the error. This led me to discover the dvc keys get command, which showed the same keys I was seeing in my dashboard. Interestingly, the client key worked in my React Native app, but the mobile SDK key did not.

A screenshot of the DevCycle CLI command dvc keys get

The DevCycle documentation that I needed for React Native, CLI, and the Management API are quite thorough. I like that the CLI is available, as well as the Management API. These allowed me to quickly test features and contextualize DevCycle feature flags outside of my Feature Factions code without having to scaffold a brand new app.

# Getting an auth token in the command line via cURL:
curl --request POST \
  --url "https://auth.devcycle.com/oauth/token" \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=client_credentials \
  --data audience=https://api.devcycle.com/ \
  --data client_id=<client id> \
  --data client_secret=<client secret>
Enter fullscreen mode Exit fullscreen mode

I also like that the client app can identify with DevCycle using custom data. It opens up possibilities such as the app "asking" for features because of an on-device trigger or threshold that gets reached, for example, if the user has interacted enough times with the app, it can ask the backend if there are newly configured features or rewards.

The diagram below illustrates how a backend service would enable features for Factions when they reach a Gold threshold or other conditions:

flowchart describing how the backend generates features for Feature Factions

Since this is a proof of concept (POC), I didn’t create an actual backend. However, I was able to simulate the backend functionality by using a cURL command to enable features for the Factions, thanks to the DevCycle Management API.

This was a fun challenge overall, and the prompt really made me think of feature flags in a new light.

Top comments (0)