Prompt: Design a SaaS Dashboard
Prompt
Design the frontend architecture for a multi-tenant SaaS dashboard used by support, finance, and account managers. It includes login, dashboard home, customer detail, search/filter tables, exports, notifications, and role-based actions.
Clarifying questions
- Which routes are public, authenticated, tenant-specific, or role-specific?
- What data must be fresh versus eventually fresh?
- What interactions are performance-critical?
- Which teams own customer, billing, orders, exports, and shared platform?
- What are the accessibility and security requirements for tables, dialogs, and sensitive actions?
Model answer outline
Use a hybrid authenticated workspace:
- SSR or thin server-rendered login/auth callback routes with no-store policy.
- Server-rendered workspace shell with tenant and role context.
- Panel-level data loading and independent degraded states on dashboard home.
- Client-heavy search/table route with URL state and server-state cache.
- Export workflow as a background job with progress island, cancellation, and idempotency.
- Feature slices by product capability, not technical layer.
- Design-system primitives for table, dialog, filters, notifications, and empty/error states.
Architecture diagram
Key tradeoffs
| Decision | Option | Tradeoff |
|---|---|---|
| Dashboard rendering | server shell plus client panels | faster first structure, more boundary design |
| Search route | client-heavy with server query API | responsive filters, needs INP budget |
| Data access | BFF | simpler frontend contracts, backend ownership required |
| Feature boundaries | capability slices | migration cost, better long-term ownership |
Weak answers
- One global Redux store for all route, server, form, and UI state.
- SSR everything without hydration budget.
- Frontend role checks treated as authorization.
- Single dashboard API blocks the whole route.
- No plan for large table INP.
Scoring
Strong answer: route matrix, state ownership, cache strategy, module boundaries, accessibility contracts, performance budget, observability, and failure matrix.
For a complete calibrated answer, read worked-answer-saas-dashboard and compare it with capstones/capstone-solution-pack-production-saas-dashboard.