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

> Source: <https://dev.to/red-coder-27/i-finally-shipped-flowdesk-my-all-in-one-productivity-dashboard-built-with-github-copilot-2oie>
> Published: 2026-06-05 18:35:56+00:00

*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.*