I Finally Shipped FlowDesk — My All-in-One Productivity Dashboard Built with GitHub Copilot ⚡

A developer has shipped FlowDesk, a fully offline productivity dashboard built with GitHub Copilot that combines a habit tracker, Pomodoro timer, and Kanban task board into a single React application. The app runs entirely in the browser via localStorage, requires no backend or accounts, and is deployable as a Progressive Web App. The developer used GitHub Copilot to generate the localStorage read/write patterns, streak calculation algorithm, Web Audio API sounds, and SVG timer ring animation, reducing development time from months to a shipped product.

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/ https://flow-desk-lovat.vercel.app/ 💻 GitHub: https://github.com/red-coder-27/flow-desk 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: js 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.