A Sale and Simulation system demonstrating the power of feature flags from Devcycle. The blog post can be read here at dev.to
This application consists of a website and a system of modification of its UI and data coming from backend using feature flags. The changes range from subtle color changes to entire layouts and combination of feature flags.
There is a simulation pane in the application where a user can experience feature flags in real time while making decisions for a sample company's business.
There are two separate components in the application, namely frontend and dashboard. They can be run together when credentails are of same project and can also be of different projects on devcycle's platform.
git clone --depth 1 https://github.com/mr-loop-1/devcycle-commerce
I have use Node v20.18.0 to develop them.
The dashboard is stateless and hence everytime it is run or gets an error, it would need a new project to start with and create all features with default variations.
The reason for being stateless is, otherwise the dashboard would have to validate the state of devcycle data before it can proceeed which is very complex.
npm install
npm run dev
it will start at port 5174.
The dashboard requires an api key to authenticate which can be obtained using
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>
the website requires an env variable VITE_SDK_KEY. It can be get from the Devcycle dashboard in the project's client sdk key in development environment.
Since, the website requires the features and variations to be already present, hence the dashboard needs to be run first and initialize a new project. Its key is incrementing ecom-[number] and displayed on dashboard too. Then, that project can be used with the website. It is not necessary to keep the dashboard runnning but it will give an easy way to update the flags and see the changes on website.
npm install
npm run dev
it will start at port 5173
A Full Reference of all feature flags, variables and variations used in the project can be seen at both website and dashboard. The website also features the current state of variations used in the selected country while the dashboard has the same for all countries.
Feel free to create an issue or PR
