{"id":20607701,"url":"https://github.com/open-feature/toggle-shop","last_synced_at":"2025-04-15T04:02:22.415Z","repository":{"id":261801162,"uuid":"860616122","full_name":"open-feature/toggle-shop","owner":"open-feature","description":"ToggleShop is a demo e-commerce app for showcasing OpenFeature","archived":false,"fork":false,"pushed_at":"2025-03-28T11:29:48.000Z","size":10506,"stargazers_count":6,"open_issues_count":3,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T12:29:02.093Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://openfeature.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/open-feature.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-20T19:21:52.000Z","updated_at":"2025-03-28T11:29:31.000Z","dependencies_parsed_at":"2025-01-17T19:33:32.724Z","dependency_job_id":"c40454e6-0ea5-46fb-9c17-8a704f37f653","html_url":"https://github.com/open-feature/toggle-shop","commit_stats":null,"previous_names":["beeme1mr/toggle-shop"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-feature%2Ftoggle-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-feature%2Ftoggle-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-feature%2Ftoggle-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-feature%2Ftoggle-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/open-feature","download_url":"https://codeload.github.com/open-feature/toggle-shop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249003952,"owners_count":21196793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T10:08:21.681Z","updated_at":"2025-04-15T04:02:22.389Z","avatar_url":"https://github.com/open-feature.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to ToggleShop\n\nThis is a silly e-commerce demo app called ToggleShop.\nThe purpose of the demo is to experiment with new OpenFeature functionality in an app that mimics real-world use cases.\n\n![ToggleShop screenshot](./public/img/screenshot.png)\n\n## Getting Started\n\nThe 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.\n\nFollow these steps to get up and running:\n\n1. install dependencies: `npm install`\n2. configure OTLP export (optional):\n   1. copy env: `cp .env.example .env.local`\n   2. update `.env.local` with OTLP information\n3. start the app: `npm run dev`\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Feature Flags\n\nToggleShop leverages a number of feature flags for various technical and business-related use cases.\n\n| Feature Flag        | Type    | Default Variant | Variants |\n| ------------------- | ------- | --------------- | -------- |\n| offer-free-shipping | boolean | on              | on, off  |\n| sticky-header       | boolean | off             | on, off  |\n| use-distributed-db  | boolean | off             | on, off  |\n| use-secure-protocol | boolean | off             | on, off  |\n\n\u003e The flag configuration for local development can be found [here](./flags.json).\n\n### Free Shipping\n\nThe `offer-free-shipping` flag controls a banner on the landing page that teases free shipping on orders over $50.\nThe flag is also used on the checkout page to calculate the total cost.\nThe purpose of this flag is to demo using a client-side feature flag with the React SDK.\nIt's also pairs nicely with the event tracking to calculate the business impact.\n\n### Distributed DB\n\nThe `use-distributed-db` flag controls which database is used to fetch the list of products.\nThe databases themselves are mocked for simplicity and have the following characteristics.\nThe SQLite database offers low latency but do not support concurrent access.\nThe Postgres database is the inverse.\nIt offers slightly higher latency but supports concurrent requests.\n\n### Secure Protocol\n\nThe `use-secure-protocol` flag is only evaluated when `use-distributed-db` is set to `true`.\nIt simulates a connection issue with one of the four nodes.\n\n## Scenarios\n\n### Database Migration\n\nThe ToggleShop team has noticed that SQLite isn't able to keep up with demand.\nTo remedy the situation, they've decided to switch to Postgres.\nA feature flag is used to ensure a smooth transition.\n\nTo simulate the migration yourself, follow these steps:\n\n- configure OTLP export (see getting started)\n- start the load generator: `make run-load-gen`\n- observe the logs and metrics\n- update the `use-distributed-db` flag fractional distribution to be `[\"true\", 25]` and `[\"false\", 75]` in the [flags.json](./flags.json).\n- observe the logs and metrics.\n- update the `use-distributed-db` flag fractional distribution to be `[\"true\", 50]` and `[\"false\", 50]` in the [flags.json](./flags.json).\n- observe the logs and metrics.\n- update the `use-distributed-db` flag fractional distribution to be `[\"true\", 75]` and `[\"false\", 25]` in the [flags.json](./flags.json).\n- observe the logs and metrics.\n- update the `use-distributed-db` flag fractional distribution to be `[\"true\", 100]` and `[\"false\", 0]` in the [flags.json](./flags.json).\n- observe the logs and metrics.\n\nIf all goes well, you should see the migration complete without any issues.\n\n![telemetry](./public/img/telemetry.png)\n\n## Kubernetes\n\nTo run the ToggleShop in a Kind cluster:\n\nCreate the cluster with the supplied definition:\n\n```sh\nkind create cluster --config kubernetes/cluster.yaml\n```\n\nInstall cert manager in the cluster (required for the OpenFeature operator):\n\n```sh\nkubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.13.2/cert-manager.yaml \u0026\u0026 kubectl wait --timeout=60s --for condition=Available=True deploy --all -n 'cert-manager'\n```\n\nInstall the nginx controller:\n\n```sh\nkubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml \u0026\u0026 kubectl wait --timeout=60s --for condition=Available=True deploy --all -n 'ingress-nginx'\n```\n\nInstall the OpenFeature operator:\n\n```sh\nhelm repo add openfeature https://open-feature.github.io/open-feature-operator/ \u0026\u0026 helm repo update \u0026\u0026 helm upgrade --install open-feature-operator openfeature/open-feature-operator\n```\n\nDeploy the ToggleShop and supporting infrastructure:\n\n```sh\nkubectl -n default apply -f kubernetes/toggle-shop.yaml \u0026\u0026 kubectl wait --timeout=60s deployment --for condition=Available=True -l 'app=toggle-shop' -n 'default'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-feature%2Ftoggle-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-feature%2Ftoggle-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-feature%2Ftoggle-shop/lists"}