Case study 09 · Personal · Jun 2025 – Present
SyntaxilitY Media Player
A cross-platform desktop media player with playlists, subtitles and lyrics, and a glass interface whose colors adapt to whatever is playing.
Creator & Architectsyntaxility.vercel.app
The problem
A modern desktop media experience needed advanced playback, playlists, subtitles, lyrics and an interface that adapts to what's playing.
Architecture
- 01Electron + React with a modular application architecture
- 02Floating, mini-player and full-screen modes with multiple aspect ratios
- 03Dynamic theming derived from the current media
- 04Centralized state for playback, playlists and real-time UI updates
Player UIReact · Vite · glass
Dynamic themingColors from media
App stateZustand
Media engineHTML5 video / audio
Electron IPC bridge
Main processNode.js
LibraryPlaylists · subtitles · lyrics
WindowsMini · floating · full-screen
Step through how a request moves through this system.
What I owned
- 01Architected the Electron + React desktop application
- 02Implemented video / audio playback and playlist management
- 03Implemented subtitles, lyrics and multiple aspect ratios
- 04Built mini-player, floating and full-screen modes
- 05Designed centralized state and dynamic media-driven theming
Outcome
A modular cross-platform media application with advanced playback and real-time UI.
Stack
- Electron
- React
- Node.js
- TypeScript
- Zustand
- Vite
- Electron IPC
- HTML5 Media