Deep Focus Dashboard

Inspiration

The biggest enemy of effective studying is context-switching. When students have to open one tab for a Pomodoro timer, another for a to-do list, and a third for Lofi study beats, they inevitably get distracted by YouTube recommendations or Reddit. I wanted to build a "single pane of glass" study hub that keeps you in the zone.

What it does

Deep Focus Dashboard is an all-in-one productivity environment. It features:

• Pomodoro Timer: A massive, visual focus timer to track deep work sessions.
• Gamified Task List: As you complete tasks, your "Focus Level" bar fills up, triggering a confetti celebration at 100%.
• Brain Dump: A scratchpad that saves to local storage, allowing you to get distracting thoughts out of your head without leaving the page.
• Focus Beats: An integrated Spotify Lofi player.
• Tab-Shaming: Uses the browser Visibility API to actively change the tab title and yell at you to get back to work if you switch tabs.

How I built it

I built this as a lightweight, lightning-fast Single Page Application (SPA) using HTML, Vanilla JavaScript, and Tailwind CSS.

Because I was under an extreme time crunch, I heavily leveraged GitHub Copilot to "vibecode" the application. By writing clear, plain-English prompt comments, I was able to instruct Copilot to generate complex vanilla JavaScript logic on the fly, including the setInterval timer logic, the localStorage data persistence, the Visibility API event listeners, and the dynamic accent-color theming engine.

Challenges I ran into

Getting the gamified progress bar to sync perfectly with the task deletion logic took a bit of tweaking. I also had to pivot my theming engine; initially, I tried rewriting root CSS variables, but it conflicted with Tailwind's utility classes. Copilot helped me quickly pivot to a safer class-swapping method for the accent colors.

Accomplishments that I'm proud of

I am incredibly proud of how polished the UI looks and feels. Going from zero to a fully functional, highly interactive app with gamification, confetti, and data persistence in under an hour is a massive win.

Built With

• github-copilot
• html
• javascript
• tailwind-css