{"slug": "i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with", "title": "I Finally Shipped FlowDesk — My All-in-One Productivity Dashboard Built with GitHub Copilot ⚡", "summary": "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.", "body_md": "*This is a submission for the GitHub Finish-Up-A-Thon Challenge*\n\n**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.\n\n🔗 **Live Demo:** [https://flow-desk-lovat.vercel.app/](https://flow-desk-lovat.vercel.app/)\n\n💻 **GitHub:** [https://github.com/red-coder-27/flow-desk](https://github.com/red-coder-27/flow-desk)\n\nEverything runs entirely in your browser via localStorage. Your data never leaves your device.\n\n**🎯 Habit Tracker**\n\nWorks best in Chrome. Install as a PWA for the full experience (look for the Install button in the top nav).\n\n**Screenshots:**\n\n**Loom walkthrough video here:\nhttps://www.loom.com/share/f3c750d782694baf876229ab598695dc**\n\nI 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.\n\nWhat I had after that hackathon:\n\nWhen the Finish-Up-A-Thon challenge dropped, I knew FlowDesk was the project. Here's what I shipped in this revival:\n\n| Before | After |\n|---|---|\n| Timer reset on navigation | Timer persists globally via React Context |\n| No streak logic | Bulletproof streak calc across timezone boundaries |\n| Hardcoded tasks | Full drag-and-drop Kanban with localStorage |\n| No heatmap | Pixel-perfect 84-day GitHub-style heatmap |\n| Desktop only | Fully responsive + PWA installable |\n| 0 animations | Glassmorphism, micro-animations, confetti |\n| Broken build | Clean Vercel deploy, 0 console errors |\n\nThe 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`\n\ncustom hook that only lives at the context level. Once I understood that, everything clicked.\n\nThe **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.\n\nGitHub Copilot was the difference between \"I'll finish this someday\" and \"it's shipped.\"\n\n**1. Boilerplate elimination**\n\nThe moment I described the `useHabits`\n\nhook 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.\n\n**2. The streak algorithm**\n\nI described what I wanted in plain English as a comment:\n\n```\n// Calculate current streak: consecutive days ending today or yesterday\n// Use local timezone toDateString() comparison, NOT UTC timestamps\n```\n\nCopilot 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.\n\n**3. Web Audio API sounds**\n\nI 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.\n\n**4. SVG timer ring**\n\nThe animated stroke-dashoffset trick for the circular countdown was something I knew conceptually but hadn't coded before. Copilot filled in the exact math:\n\n``` js\nconst circumference = 2 * Math.PI * radius\nconst offset = circumference * (1 - progress)\n```\n\n...and wired it to the timeLeft state automatically.\n\n**5. Unsticking moments**\n\nWhenever 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`\n\nwrapper. Copilot caught it immediately.\n\nCopilot isn't magic. I had to:\n\n*Thanks for reading! If you try FlowDesk, I'd love to hear what you think.*\n\n*Drop a comment or a ❤️ if the heatmap made you smile.*", "url": "https://wpnews.pro/news/i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with", "canonical_source": "https://dev.to/red-coder-27/i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with-github-copilot-2oie", "published_at": "2026-06-05 18:35:56+00:00", "updated_at": "2026-06-05 18:41:42.510464+00:00", "lang": "en", "topics": ["ai-products", "ai-tools"], "entities": ["FlowDesk", "GitHub Copilot", "GitHub", "React", "PWA", "Vercel", "Loom", "Kanban"], "alternates": {"html": "https://wpnews.pro/news/i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with", "markdown": "https://wpnews.pro/news/i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with.md", "text": "https://wpnews.pro/news/i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with.txt", "jsonld": "https://wpnews.pro/news/i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with.jsonld"}}