system-design

A micro-frontend architecture decomposes a monolithic frontend into smaller, independently deployable applications owned by autonomous teams, using integration techniques like Webpack Module Federation, Single-SPA, or Web Components, while sharing a design system and communicating through custom events or a shared state bus.

A food delivery tracking page uses WebSocket connections for real-time driver location updates on a live map, a state machine to model order lifecycle (placed through delivered), and Server-Sent Events or polling as fallbacks, with careful attention to mobile battery optimization, offline resilience, and animated map transitions.

An offline-first web application uses Service Workers for asset caching and IndexedDB for local data storage, enabling full functionality without network connectivity. Synchronization is handled through a queue-based system with conflict resolution strategies like last-write-wins or CRDTs, while optimistic UI ensures instant feedback for user actions.

A real-time chat application uses WebSocket connections with heartbeat and exponential backoff reconnection for message delivery, optimistic UI for instant message display, virtualized message lists for performance, and features like typing indicators (debounced broadcasts), read receipts (intersection observer), and file uploads (presigned URLs with progress tracking).