Skip to content

Design feature flags for a web app (frontend)

Design feature flags for a web app: a team turns a feature on for some people, the page shows the right version from its first paint, and a flag can be turned off fast when something breaks.

System designFrontend and full stackInfrastructure and platformSeniorStaff

What to work through

Work through feature flags for a web app as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Turn a feature on for chosen people, or for a share of everyone
  • Show each person the right version from the first paint, with no flash of the other
  • Pick up a change to a flag on pages that are already open
  • Turn a feature off fast when it breaks
  • Record which version each person saw

Constraints to discuss

  • The first content shows within 2.5 seconds, flags or not
  • Nothing on the page shifts by more than a score of 0.1 when flags arrive
  • An open page picks up a flag change within 30 seconds
  • The page still works, on safe defaults, when the flag service is down
  • A person keeps the same version as a rollout grows
Need a starting point?

Watch for these common gaps as you prepare:

  • Fetching flags after the first paint and letting the old version flash into the new
  • A network call from every component that reads a flag
  • No fallback at each flag read, so an outage of the flag service breaks the page
  • A random draw per page load to place people in a rollout share
  • Sending every rule and targeted id to the browser
  • Never measuring how long the flag call takes or how often fallbacks were used
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.