This is a submission for the GitHub Finish-Up-A-Thon Challenge
FlowDesk is a fully offline, production-quality productivity dashboard that combines three tools I always wanted in one place — a habit tracker, a Pomodoro focus timer, and a Kanban task board — all in a single beautiful React app with zero backend and zero accounts required.
🔗 Live Demo: https://flow-desk-lovat.vercel.app/
💻 GitHub: https://github.com/red-coder-27/flow-desk
Everything runs entirely in your browser via localStorage. Your data never leaves your device.
🎯 Habit Tracker
Works best in Chrome. Install as a PWA for the full experience (look for the Install button in the top nav).
Screenshots:
Loom walkthrough video here: https://www.loom.com/share/f3c750d782694baf876229ab598695dc
I originally started FlowDesk about 6 months ago during a weekend hackathon. The idea was simple: I was tired of switching between three different apps — one for habits, one for a Pomodoro timer, one for tasks. I wanted them all in one dashboard.
What I had after that hackathon:
When the Finish-Up-A-Thon challenge dropped, I knew FlowDesk was the project. Here's what I shipped in this revival:
| Before | After |
|---|---|
| Timer reset on navigation | Timer persists globally via React Context |
| No streak logic | Bulletproof streak calc across timezone boundaries |
| Hardcoded tasks | Full drag-and-drop Kanban with localStorage |
| No heatmap | Pixel-perfect 84-day GitHub-style heatmap |
| Desktop only | Fully responsive + PWA installable |
| 0 animations | Glassmorphism, micro-animations, confetti |
| Broken build | Clean Vercel deploy, 0 console errors |
The biggest technical challenge was the timer persistence — React state resets on component unmount, so navigating away killed the timer. The fix was lifting all timer state into a React Context that wraps the entire app, using a useInterval
custom hook that only lives at the context level. Once I understood that, everything clicked.
The heatmap was the most satisfying piece to build — calculating 84 days of data, mapping completions across all habits per day, and rendering it in an SVG grid with correct month labels and tooltips took way more thought than I expected.
GitHub Copilot was the difference between "I'll finish this someday" and "it's shipped."
1. Boilerplate elimination
The moment I described the useHabits
hook structure in a comment, Copilot generated the entire localStorage read/write pattern, the streak calculation logic, and the heatmap data transformation in one autocomplete. What would've been 45 minutes of typing was done in 3.
2. The streak algorithm
I described what I wanted in plain English as a comment:
// Calculate current streak: consecutive days ending today or yesterday
// Use local timezone toDateString() comparison, NOT UTC timestamps
Copilot wrote the correct algorithm on the first try, including the edge case where today isn't checked yet (streak = consecutive days ending yesterday). I verified it, it was right.
3. Web Audio API sounds
I had zero experience with the Web Audio API. I described "ascending 3-tone chime using OscillatorNode, no audio files" and Copilot generated a working playWorkComplete() function using AudioContext, GainNode, and scheduled oscillator timing. I tested it — it played a perfect chime.
4. SVG timer ring
The animated stroke-dashoffset trick for the circular countdown was something I knew conceptually but hadn't coded before. Copilot filled in the exact math:
const circumference = 2 * Math.PI * radius
const offset = circumference * (1 - progress)
...and wired it to the timeLeft state automatically.
5. Unsticking moments
Whenever I hit a wall — like the @dnd-kit DragOverlay not rendering correctly, or the confetti only firing on refresh — I described the bug to Copilot in a comment and it suggested the fix. The DragOverlay issue was a missing createPortal
wrapper. Copilot caught it immediately.
Copilot isn't magic. I had to:
Thanks for reading! If you try FlowDesk, I'd love to hear what you think.
Drop a comment or a ❤️ if the heatmap made you smile.