Image Upload & Preview

What you’ll build / What this tests

This premium front-end system design system design focuses on Image Upload & Preview. You’ll apply images and upload thinking with intermediate level constraints. The prompt emphasizes Design an Image Upload & Preview flow for a real product (e.g., profile photo). This is….

Learning goals

• Decompose Image Upload & Preview into front-end components, state, and data flow.
• Apply images, upload, validation constraints to a real client architecture.
• Define performance budgets and UX trade-offs for the interface.
• Plan instrumentation and resilience for user-facing failures.

Key decisions to discuss

• Choose a data model that matches UI reads and writes.
• Pick a pagination + caching strategy to keep the UI fast.
• Select a realtime transport and reconnection policy.
• Set performance budgets (LCP/INP) and validate with telemetry.

Evaluation rubric

• Architecture: clear client data flow and component boundaries.
• Performance: budgets + caching/virtualization where needed.
• Resilience: offline/error states and retries defined.
• Observability: metrics/logs to validate UX and perf.

Constraints / Requirements

• Design an Image Upload & Preview flow for a real product (e.g., profile photo). This is…
• Requirements exploration
• Architecture / High-level design
• Data model
• Interface definition (API)
• Optimizations and deep dive
• Assume real users and real latency; budget for perceived performance.
• Define client-side caching and invalidation strategy.
• Plan pagination or windowing for large UI lists.
• Batch UI updates and handle reconnection/backoff.

Mini snippet (architecture sketch)

Constraints:
- P95 UI response < 200ms
- 1k+ events/sec during peak
- Focus: images, upload

Components:
- Client cache + pagination
- Realtime updates (SSE/WebSocket)
- Observability + error states

Endpoints:
- GET /feed?cursor=
- POST /events

Common pitfalls

• Ignoring pagination/virtualization for long feeds.
• Underestimating client performance budgets.
• Overfetching data or failing to cache responses.
• Skipping failure states and retry UX.

Related questions

• Multi-step Form with AutosavePremium