This is a submission for the DEV Weekend Challenge: Community
The Community
I know the type because I am the type. I open a new tab to "just focus for an hour" and twenty minutes later I'm deep in a YouTube spiral I didn't ask for. I've got three Spotify tabs open, a lo-fi playlist I've heard so many times it's basically silence, and a deadline that keeps getting closer.
I'm a student pulling late-night study sessions with cold coffee and too many browser windows. I've been the solo developer learning and coding into the midnight. The writer who needs forty-five uninterrupted minutes just to get one good paragraph out and get my thoughts together, I and 4 others most times context-switching between tasks and forgetting what we were actually supposed to be doing.
We have the same problem everyone in my study group at school and developer learning community too . Focus is hard, the internet is everywhere, nothing built for productivity actually feels good to use except the one you build. I needed something that felt like a place. Something I'd actually want to open.
What I Built
focus.radio : a lo-fi focus app built around the way I actually work. I open it and there's music already a lo-fi stream running quietly in the background, a dark ambient interface, a GIF playing behind ,I set an intention before each session. I breathe for a moment. Then I lock in. When the timer ends, I reflect on what I did. Over time it becomes a journal. A record of every late night, every locked-in hour, every project I showed up for. But the feature I keep coming back to is the plant. There's a small SVG plant that lives at the bottom of the app. It starts as a seed. It grows sprout to seedling to young plant to branches to a full flower based on how many sessions I complete. If my streak breaks, it wilts. One session brings it back. Just a quiet little thing that reflects my consistency back at me. My consistency is its water.
Everything it does:
- 24/7 lo-fi stream with an offline audio drone fallback so silence never catches me
- Independent ambient mixer — rain, café, white noise, hearth — runs with or without the radio
- Focus timer with Deep, Focus and Drift modes
- Custom durations from 25 minutes all the way to 6 hours for the really long nights
- Custom session colors — changes the ring, the page gradient, every accent
- Work journal with intent and reflection logged per session
- Work stats time tracked per project, "locked in" badge when I keep showing up
- The plant
- Snake + Dino Run for breaks, with a stretch reminder at 5 minutes
- Timer survives page reloads — calculates drift and picks up exactly where I left off
- Fully installable PWA with lock screen media controls
Demo
https://focus-radio.vercel.app/
Code
A minimalist online radio and productivity app streaming lo-fi beats to help you concentrate, reduce distractions, and maintain workflow momentum. Includes focus timers, micro-break games, motivational prompts, simulated live listener counts and a plant that grows with your consistency.
This project was bootstrapped with Create React App.
focus.radio
A quiet place to do your best work. Lo-fi radio, ambient sounds, focus timers, a work journal, and a plant that grows with your consistency.
Features
Radio + Ambient
- 24/7 lo-fi stream with offline drone fallback
- Independent ambient mixer — rain, café, static, hearth
- Ambient plays without the radio. Radio plays without ambient. Both have their own controls.
Focus Timer
- Three modes: Deep (90m), Focus (50m), Drift (25m)
- Custom durations from 25 minutes up to 6 hours
- Custom session colors — change the ring, gradient and page accent
- Breathing ritual before every session
- Sessions survive page reloads — timer keeps running even if you close and reopen the tab
- Distraction shield for Deep Work mode (fullscreen lockout)
Work Journal
- Every session logged with intent and reflection
- Partial sessions saved automatically if you end early
- Grouped by day with total time…
How I Built It
No backend. No database. No account required. Everything lives in the browser and on the device.
Stack:
- React 18 + Zustand for state : with persist middleware for the journal and streaks
- Framer Motion for every animation : transitions, plant sway, ambient pulse
- Tailwind CSS for the dark, minimal aesthetic
- Lucide React for icons throughout
- Web Audio API : all ambient sounds are generated programmatically. Rain is pink noise through a bandpass filter. Café is brown noise. Fire is pink noise with an LFO tremolo. Static is flat white. No audio files, no network required for ambience, it always works.
- Web Workers : the timer runs entirely off the main thread, immune to tab throttling
- localStorage : timer state saved on every tick with a timestamp. On reload: newElapsed = savedElapsed + Math.floor((Date.now() - savedAt) / 1000). If the session finished while the tab was closed, it clears cleanly. If not, the worker boots with the corrected value and picks right back up.
- Media Session API : lock screen controls on iOS, Android and desktop
- Service Worker : PWA with cache-first for assets, network-only for streams
- Claude helped me think through architecture decisions and debug edge cases, the drift calculation, the AudioContext lifecycle fix, the plant stages.
