01 / Overview
Spotify Neo is a near-complete Spotify clone built in TypeScript. It goes well beyond basic search — the app ships a custom audio engine, AI DJ, Music DNA analysis, playlist creation, artist profile pages, a library, and both desktop and mobile player UIs.
The goal was to replicate every surface of the real Spotify experience while using it as a vehicle for learning modular TypeScript architecture, advanced Redux state management, and building a polished audio playback system from scratch.
02 / My Role & Tech
My Role
Sole Developer. I architected the full TypeScript codebase — state management, audio engine, AI DJ, Music DNA, modular feature structure, and every player UI from mini-player to full-screen.
Stack
03 / Architecture & State
Modular TypeScript Architecture
The codebase is split into modules, containers, services, providers, hooks, and a dedicated store layer. TypeScript types flow through every boundary, making the complex state across playback, queue, search, and playlists safe and refactorable.
Audio Engine
A custom AudioEngine component handles playback mechanics — loading tracks, managing play/pause/seek state, and syncing the progress bar — keeping audio logic isolated from the UI layer.
Redux & API Layer
Redux keeps search results, queue, favourites, and playback state synchronized across the Desktop Player, Mini Player, Now Playing Panel, and Bottom Nav simultaneously. Debounced search inputs and Axios interceptors minimize redundant API calls.
04 / UI/UX Decisions
The app mirrors Spotify's content-first aesthetic — dark surfaces, album art as the primary visual element, and multiple player modes that adapt from desktop to mobile without a jarring layout shift.
- • AI DJ feature generates curated sessions with contextual commentary
- • Music DNA visualizes a track's audio characteristics (energy, tempo, mood)
- • Full artist pages, library view, and playlist creation mirror the real product surface
- • Horizontal shelves, bottom sheets, and a sidebar provide context-appropriate navigation on every viewport
- • Desktop Player, Mini Player, and Full Player cover every interaction mode
- • Favourites system with a dedicated section for saved tracks
05 / Performance & Animation
Lazy-loading keeps media-heavy grids snappy. SCSS modules scope styles without runtime overhead, and the custom audio engine decouples heavy playback logic from the React render cycle. Smooth transitions between views — list to artist, track to full player — were tuned to feel native rather than web-like.
06 / What I Learned
Spotify Neo taught me what it takes to build a production-quality media app in TypeScript — from architecting an audio engine and syncing multi-surface player state, to designing AI-powered features like DJ and Music DNA that feel purposeful rather than bolted on. It also sharpened my understanding of when to reach for Redux versus local state in a large, interconnected UI.