https://github.com/open-feature/toggle-shop
ToggleShop is a demo e-commerce app for showcasing OpenFeature
https://github.com/open-feature/toggle-shop
Last synced: about 1 year ago
JSON representation
ToggleShop is a demo e-commerce app for showcasing OpenFeature
- Host: GitHub
- URL: https://github.com/open-feature/toggle-shop
- Owner: open-feature
- License: apache-2.0
- Created: 2024-09-20T19:21:52.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-28T11:29:48.000Z (over 1 year ago)
- Last Synced: 2025-03-28T12:29:02.093Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://openfeature.dev
- Size: 10 MB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Welcome to ToggleShop
This is a silly e-commerce demo app called ToggleShop.
The purpose of the demo is to experiment with new OpenFeature functionality in an app that mimics real-world use cases.
## Getting Started
The demo app is completely self-contained but can be configured to send telemetry to an [OTLP](https://opentelemetry.io/docs/specs/otel/protocol/) compatible endpoint.
Follow these steps to get up and running:
1. install dependencies: `npm install`
2. configure OTLP export (optional):
1. copy env: `cp .env.example .env.local`
2. update `.env.local` with OTLP information
3. start the app: `npm run dev`
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Feature Flags
ToggleShop leverages a number of feature flags for various technical and business-related use cases.
| Feature Flag | Type | Default Variant | Variants |
| ------------------- | ------- | --------------- | -------- |
| offer-free-shipping | boolean | on | on, off |
| sticky-header | boolean | off | on, off |
| use-distributed-db | boolean | off | on, off |
| use-secure-protocol | boolean | off | on, off |
> The flag configuration for local development can be found [here](./flags.json).
### Free Shipping
The `offer-free-shipping` flag controls a banner on the landing page that teases free shipping on orders over $50.
The flag is also used on the checkout page to calculate the total cost.
The purpose of this flag is to demo using a client-side feature flag with the React SDK.
It's also pairs nicely with the event tracking to calculate the business impact.
### Distributed DB
The `use-distributed-db` flag controls which database is used to fetch the list of products.
The databases themselves are mocked for simplicity and have the following characteristics.
The SQLite database offers low latency but do not support concurrent access.
The Postgres database is the inverse.
It offers slightly higher latency but supports concurrent requests.
### Secure Protocol
The `use-secure-protocol` flag is only evaluated when `use-distributed-db` is set to `true`.
It simulates a connection issue with one of the four nodes.
## Scenarios
### Database Migration
The ToggleShop team has noticed that SQLite isn't able to keep up with demand.
To remedy the situation, they've decided to switch to Postgres.
A feature flag is used to ensure a smooth transition.
To simulate the migration yourself, follow these steps:
- configure OTLP export (see getting started)
- start the load generator: `make run-load-gen`
- observe the logs and metrics
- update the `use-distributed-db` flag fractional distribution to be `["true", 25]` and `["false", 75]` in the [flags.json](./flags.json).
- observe the logs and metrics.
- update the `use-distributed-db` flag fractional distribution to be `["true", 50]` and `["false", 50]` in the [flags.json](./flags.json).
- observe the logs and metrics.
- update the `use-distributed-db` flag fractional distribution to be `["true", 75]` and `["false", 25]` in the [flags.json](./flags.json).
- observe the logs and metrics.
- update the `use-distributed-db` flag fractional distribution to be `["true", 100]` and `["false", 0]` in the [flags.json](./flags.json).
- observe the logs and metrics.
If all goes well, you should see the migration complete without any issues.
## Kubernetes
To run the ToggleShop in a Kind cluster:
Create the cluster with the supplied definition:
```sh
kind create cluster --config kubernetes/cluster.yaml
```
Install cert manager in the cluster (required for the OpenFeature operator):
```sh
kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.13.2/cert-manager.yaml && kubectl wait --timeout=60s --for condition=Available=True deploy --all -n 'cert-manager'
```
Install the nginx controller:
```sh
kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml && kubectl wait --timeout=60s --for condition=Available=True deploy --all -n 'ingress-nginx'
```
Install the OpenFeature operator:
```sh
helm repo add openfeature https://open-feature.github.io/open-feature-operator/ && helm repo update && helm upgrade --install open-feature-operator openfeature/open-feature-operator
```
Deploy the ToggleShop and supporting infrastructure:
```sh
kubectl -n default apply -f kubernetes/toggle-shop.yaml && kubectl wait --timeout=60s deployment --for condition=Available=True -l 'app=toggle-shop' -n 'default'
```