DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.
DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.DowngradedOur downstream service providers are currently experiencing outages, and our engineering team is actively working on a resolution. Some services—including the Solver, Partner, and Tools—are temporarily degraded with higher latency and lower bandwidth. Rest assured, Intervipedia, Solutions, and the Question Bank features are not impacted and remain fully operational.
The Question
FE Design

Design a Scalable Podcast Streaming Web Application

Design a mobile-first podcast application that supports persistent audio playback during navigation, offline listening via PWA technologies, and cross-device synchronization. Address how you would manage the complex state of an audio player, optimize for SEO in discovery pages, and handle the storage of large binary audio files in the browser. Explain your strategy for integrating with system-level media controls and ensuring high performance during long-duration audio sessions.
React
Next.js
Zustand
TanStack Query
Service Workers
IndexedDB
Cache API
Tailwind CSS
PWA
Questions & Insights

Clarifying Questions

Scale and Platform: Is this a cross-platform web app (PWA) or a desktop-focused web app?
Assumption: A mobile-first PWA to leverage background playback and offline capabilities, as most podcast consumption is mobile.
Content Delivery: Are we hosting the audio files directly or aggregating third-party RSS feeds?
Assumption: Aggregated RSS feeds via a backend proxy/cache to handle CORS and normalization, but the frontend will handle the direct audio stream from the source URL or proxy.
Offline Requirements: Is full offline listening (downloading episodes) required for MVP?
Assumption: Yes, "offline-first" is a core podcast expectation. We will use Service Workers and IndexedDB.
Playback Persistence: Does the audio need to persist across page navigations?
Assumption: Yes, a "Persistent Mini-Player" pattern is required to ensure uninterrupted listening while browsing.

Crash Strategy

Core Bottleneck: Maintaining audio playback state and synchronization with the system media controls while navigating a Single Page Application (SPA).
Progressive Walkthrough:
How do we ensure the audio player doesn't unmount? (App Shell Architecture).
How do we handle offline audio storage without crashing the browser? (Cache API + IndexedDB for metadata).
How do we sync playback progress across devices efficiently? (Debounced persistence strategy).
How do we optimize for SEO while keeping a rich, app-like feel? (Hybrid Rendering: SSR for discovery, CSR for the library).

Elite Bonus Points

Media Session API Integration: Connecting the web player to OS-level media controls (lock screen, notification tray, Bluetooth devices).
Web Workers for Audio Metadata: Offloading ID3 tag parsing of large audio files to a background thread to prevent UI jank.
Intelligent Pre-fetching: Using Intersection Observer to pre-load the next episode's metadata or start a low-priority stream buffer for the next item in the queue.
Design Breakdown

Requirements

Functional Requirements:
Search and discover podcasts.
Subscribe to shows and manage a library.
Continuous audio playback with speed control (0.5x - 2x).
Download episodes for offline listening.
Track playback progress (resume where you left off).
Non-Functional Requirements:
Performance: < 2s Initial Load (LCP); < 100ms interaction latency for play/pause.
Offline-First: Functional library and player without network connectivity.
Accessibility: WCAG 2.1 Level AA compliance, specifically focusing on keyboard navigation for the player.
Responsiveness: Adaptive layout for mobile, tablet, and desktop.

Design Summary

Concise Summary: A PWA built on an "App Shell" architecture featuring a persistent global audio state and a localized offline storage engine.
Major Components:
Audio Engine: A headless singleton manager wrapping the HTML5 audio element to handle playback logic, buffering, and Media Session API.
Offline Manager: Orchestrates Service Worker Cache API for audio blobs and IndexedDB for episode metadata.
Sync Engine: Manages debounced playback position updates to the backend to ensure cross-device consistency.
CUJ Walkthrough:
Discovery: User searches -> Search Page (SSR) -> Clicks Podcast -> Detail Page (SSR/Hydration).
Playback: User hits Play -> Audio Engine fetches stream -> Player UI (Global) updates -> Progress saved locally.
Offline: User hits Download -> Offline Manager triggers Service Worker -> Blob stored in Cache API -> UI updates to "Downloaded".
Simplicity Audit: This architecture avoids complex stream-fragmentation (HLS) for MVP, favoring standard progressive downloads which are simpler to cache and play.
Architecture Decision Rationale:
Why this architecture?: The App Shell pattern is non-negotiable for media apps to prevent playback interruption. Decoupling the Audio Engine from the UI ensures state remains consistent even if the view layer crashes or re-renders.
Requirement Satisfaction: Meets performance targets via SSR, offline needs via PWA standards, and user expectations via persistent playback.

System Diagram

Architecture Deep Dive

Presentation Layer

Component Hierarchy: The Root Layout wraps the entire app. The Global Audio Player sits outside the MainView (where routing happens) to ensure it never unmounts. Pages are swapped inside the MainView based on the Router state.
Interaction Layer:
Media Session API: Updates the OS with current track info, album art, and handles previoustrack/nexttrack events.
Optimistic UI: When a user subscribes, the UI updates immediately before the API call finishes.
Rendering Layer: Use SSR (Next.js/Remix) for the Discover and Podcast Detail pages to maximize SEO and social sharing (OpenGraph tags for episodes). Use CSR for the Library and Player components where user-specific data and real-time state are paramount.
UI Frameworks: React for component management, Tailwind CSS for lightweight styling, and Radix UI for accessible primitives (Sliders for progress bars).

Application Layer

Data Fetching Layer: TanStack Query manages API state. It handles "Stale-While-Revalidate" patterns for podcast feeds. Parallel requests are used to fetch the current episode's metadata and the user's playback history simultaneously.
State Management Layer: Zustand manages the global Audio State (playing, paused, current time, volume). This is preferred over Redux for its lower boilerplate and ease of use outside of React components (e.g., inside the Audio Engine service).
Routing: Nested routing allows the Podcast Detail page to persist the episode list while viewing a specific episode's show notes in a slide-over/modal.

Domain Layer

Business Rules:
Playback Logic: If remaining_time < 5s, mark episode as "Finished".
Download Logic: Only allow downloads on Wi-Fi (optional setting).
Entities: Podcast, Episode, PlaybackSession, UserPreferences.
Mapping: API DTOs are mapped to Domain Models to decouple the frontend from backend RSS-parsing quirks (e.g., normalizing different date formats from various RSS generators).

Infrastructure Layer

API / Network: Standard REST API for metadata. Audio is streamed via progressive GET requests with Range header support for seeking.
Storage:
IndexedDB: Stores episode metadata and "User Progress" for offline retrieval.
Cache API: Managed by a Service Worker (Workbox) to store the actual .mp3 or .m4a blobs. This allows the app to serve audio files directly from the local cache when offline.
Wrap Up

Wrap-up

Trade-offs: We chose progressive downloads over HLS/DASH for MVP. While HLS handles adaptive bitrate better, progressive downloads are significantly easier to implement for offline caching and seeking in a v1.
Scalability: As the library grows, virtualization (e.g., react-window) will be critical for the "All Episodes" list to maintain 60fps scrolling.
Future-proofing: The architecture allows for a seamless transition to a "Native Wrapper" (Capacitor/Electron) because the core logic is decoupled from the DOM in the Domain/Application layers.