When I first built SongWalk, it was a desktop-first Flask app with a retro Windows Media Player aesthetic. That was intentional — the whole idea was to evoke the feeling of classic music library software. But here is the thing about 2026: if your web app does not work on a phone, it might as well not exist.
So began the journey of turning a server-rendered Jinja2 app into something that installs on a home screen, works offline, and feels like a native music player on mobile.
The Starting Point: Zero Mobile Support
SongWalk was a vanilla Flask app. No frontend framework. No build step. No service worker. No manifest. The CSS had two breakpoints at 1100px and 720px, but touch targets were tiny (28px buttons), and double-click was the only way to play a track. On a phone, it was technically functional but practically frustrating.
Phase 1: PWA Foundations
The minimum viable PWA only needs three things: a manifest.json, a service worker, and some meta tags. That took about an hour to implement. Once done, SongWalk became installable — users could add it to their home screen and it would open in standalone mode without browser chrome.
The service worker uses a cache-first strategy for static assets (CSS, JS, favicon) and network-first for pages, with an offline fallback page. It is not full offline playback yet, but it is a solid foundation.
Phase 2: Touch Targets and Mobile UX
This was the real meat of the work. Every interactive element needed to hit the 44x44px minimum. The track table needed horizontal scrolling instead of squishing. The title bar buttons had to collapse into an overflow menu at 720px. Single-tap-to-play replaced the desktop-only double-click. Swipe gestures on the transport bar enabled prev/next track navigation.
None of this required a frontend rewrite. All CSS media queries and JavaScript event handlers layered on top of the existing code.
Phase 3: The Spinning CD
Because every music player needs a little bit of soul, I added a pixel-art spinning CD disc that rotates when a track is playing. It uses a repeating conic-gradient for the rainbow prismatic reflection, CSS animations for the spin, and a pixel shimmer effect for that retro CRT vibe. Album art floats transparently on top when available.
The disc is pure CSS — no images, no canvas, just gradients and keyframes. It runs at 60fps on modern phones and stops spinning the moment you hit pause.
What I Learned
You do not need React to build a good mobile web app. A well-structured vanilla JS codebase with careful CSS can deliver an experience that feels native. The key is treating mobile as a first-class target, not an afterthought — 44px touch targets, responsive layouts, service worker caching, and real device testing.
SongWalk now installs on iOS and Android, works offline for cached pages, and feels like a real music player on a phone. Not bad for a Flask app with zero frontend dependencies.
Open SongWalk on your phone and see for yourself.
Leave a Reply