This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
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.
Core Features
🎯 Habit Tracker
- GitHub-style 84-day contribution heatmap
- Streak tracking with fire badges 🔥
- Emoji + color customization per habit
- Confetti celebration when you hit 100% for the day 🎉
- Daily/Weekdays/Weekends frequency options ⏱️ Pomodoro Focus Timer
- Animated SVG countdown ring with glow effect
- Web Audio API chimes — no audio files needed
- Session history log with weekly focus stats
- Keyboard shortcuts: Space / R / S from any page
- Auto-switches between work and break sessions 📋 Kanban Task Board
- Full drag-and-drop via @dnd-kit (mouse + touch)
- Priority badges: 🔴 High / 🟡 Medium / 🟢 Low
- Live search + priority filter
- Three columns: To Do → In Progress → Done 📊 Unified Dashboard
- Real stats pulled from all three modules
- Weekly focus bar chart (Recharts)
- Daily motivational quote
- Quick-action buttons to jump into any module And more: Dark/Light/System theme, PWA installable, full keyboard shortcuts, data export/import, mobile bottom nav, glassmorphism UI.
Demo
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
The Comeback Story
Where It Started (The "Before")
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:
- A broken timer that reset on every page navigation
- A habit list with no streak logic whatsoever
- A Kanban board with hardcoded placeholder tasks that couldn't be deleted
- Zero mobile support
- An index.css file that was 47 lines of chaos I pushed it to GitHub, opened 11 issues I never closed, and abandoned it. The repo sat untouched for months.
What Changed (The "After")
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.
My Experience with GitHub Copilot
GitHub Copilot was the difference between "I'll finish this someday" and "it's shipped."
Where It Helped Most
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.
What I Still Had To Do Myself
Copilot isn't magic. I had to:
- Review every generated function for correctness (especially date logic)
- Architect the Context structure myself before Copilot could fill it in
- Write the validation prompt to catch bugs across the whole app
- Make design decisions about layout and UX
- Test everything manually and catch edge cases The mental model I settled on: Copilot is a very fast junior developer who needs clear instructions and code review. When I gave it precise comments and clear function signatures, it was extraordinarily fast. When I was vague, it guessed wrong.
Tech Stack
- React 18 + Vite — UI + build
- @dnd-kit — Drag and drop
- Recharts — Weekly analytics chart
- Lucide React — Icons
- react-hot-toast — Notifications
- canvas-confetti — Habit celebrations
- vite-plugin-pwa — PWA + offline support
- Web Audio API — Timer sounds (no files!)
- localStorage — All persistence, zero backend
What's Next
- Cloud sync option (optional, privacy-first)
- Habit templates (Morning Routine, Fitness, etc.)
- Timer integrations with task list (focus on specific task)
- Browser extension version
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.
Top comments (0)