Foundations & Constraints

14 minsystem designfoundationsconstraints

This guide is part of the FrontendAtlas frontend interview preparation roadmap, focused on interview questions, practical trade-offs, and high-signal decision patterns.

Scope, Constraints, and Trade-offs

The easiest way to stumble in a system design interview is to start drawing boxes and arrows without first asking what you’re actually building. Strong candidates slow down and begin with context: What’s in scope? What limits do we face? Where will we make trade-offs?

Getting this part right sets the tone for the entire interview. It shows you think like a senior engineer who values clarity over speed, and it prevents you from over-engineering features that were never required.

1. Clarify the scope

Interview prompts are almost always vague on purpose—things like “Design an image gallery” or “Build a chat system.” If you jump straight into drawing, you’ll likely design the wrong thing. The first move is to narrow the scope into something concrete by asking:

  • Who are the users? Consumers, admins, or both?
  • What’s the core feature set? The must-haves for v1.
  • What’s out of scope? Call it out so you don’t waste time on extras.

For example: if asked to design a chat app, clarify whether it’s 1-to-1 only or if it needs group chats, file sharing, and reactions. By setting boundaries early, you make the problem manageable and show the interviewer you’re thinking like a product owner, not just a coder.

2. Identify constraints

Every real system has limits—ignoring them leads to designs that look good on a whiteboard but fall apart in practice. Great candidates surface constraints early and use them to shape their design. Common ones to ask about include:

  • Scale: Are we serving a classroom of 100, a startup with 10k, or millions of users worldwide?
  • Performance: Do we need sub-100ms interactions, or is a few seconds acceptable?
  • Devices & networks: Will most users be on fast desktops, or low-end Android phones on 3G?
  • Business context: Is SEO a must? Do we need accessibility compliance (WCAG/ADA)?

For example: if you’re designing an image-heavy site for a global audience, constraints like unreliable networks and mobile usage might push you toward aggressive image compression, CDNs, and lazy loading from day one.

3. Make explicit trade-offs

Every architectural choice comes with downsides. Interviewers don’t expect you to find a “perfect” solution — they want to see that you can recognize trade-offs, say them out loud, and connect them to the problem at hand.

  • CSR vs SSR: CSR (client-side rendering) is easier to build and deploy, but SSR (server-side rendering) gives faster first paint and better SEO. The “right” answer depends on whether fast initial load or simplicity matters more.
  • Global vs local state: Global state ensures consistency across the app (great for auth or user settings), but adds complexity and performance overhead compared to local component state.
  • Offline-first: Designing for offline use creates a great experience for travelers and mobile users, but adds complexity in caching and conflict resolution when syncing back online.

The key is to say the trade-off out loud and tie it to context. For example: “For v1, I’d start with CSR to move quickly. If SEO or first paint becomes a priority, we can layer SSR later.” That shows you understand not just the options, but the timeline and context where each option makes sense.

Putting it together

Before you ever draw a box or arrow, lock in the foundations. Strong candidates pause to set the stage instead of rushing ahead. Your mental checklist should be:

  1. Scope: What’s in, what’s out, and who the users are.
  2. Constraints: The limits you must respect — scale, performance, devices, business needs.
  3. Trade-offs: The options you’ve weighed and why you chose one over the others.

Getting these three right instantly makes the rest of your design more credible. It signals that you can think like a senior engineer who values clarity, context, and pragmatic choices.