Focus Companion
- 3 Devlogs
- 1 Total hours
A vibrant 25-minute Pomodoro study timer built with HTML, CSS, and JavaScript. Features a glowing animated background, centered timer, and cute study visuals.
Ship #1
Changes requested
@atharvmahajan
on
Focus Companion
I built Focus Companion 🌸, a modern dark-themed web dashboard designed to eliminate distractions and help students lock into deep work. My biggest challenge was the initial design—my first attempt was way too messy with cluttered buttons, and setting up the JavaScript countdown logic for the dual display took a lot of trial and error. To make things harder, the Hackatime server crashed mid-project, so all my tracked coding hours disappeared. Instead of getting hung up on lost stats, I pushed forward to finish the app. What makes Focus Companion unique is its visual-first approach: I intentionally skipped loud sound effects to protect your flow state, making it completely silent and ideal for quiet spaces like libraries. I am really proud of upgrading a messy prototype into a smooth workspace featuring flexible timer modes (like a 50-minute Deep Focus session) and live task tracking. To try it out, open the live link, choose your session mode on the left sidebar, type in your goal, and hit Start!
@atharvmahajan
on
Focus Companion
16m 38s logged
My first attempt at making Focus Companion 🌸 didn’t turn out great. The old design was way too messy and crowded with too many buttons everywhere.
So, I decided to redo the whole UI from scratch. The new design looks so much better! It has a clean dark blue theme, big easy-to-read numbers for the timer, and a neat sidebar on the side.
Here are the best parts about the new version:
Better Timer Options: Added a 50-minute Deep Focus mode alongside short and long breaks.
Live Task Tracker: You can type in what you’re working on and see it right under the timer.
No Clutter: Simple layout that helps you stay focused instead of getting distracted. Here you can try https://atharvmahajan-ux.github.io/Focus-companion2.0/
@atharvmahajan
on
Focus Companion
16m 8s logged
I tried adding more option in my ui but it ended up being too overcrowded so now I decided to make a complete new ui which is cute sweet and user friendly….
@atharvmahajan
on
Focus Companion
16m 48s logged
After the Hackatime site crashed, I had to start my work again in a new folder, which was really frustrating and difficult. A lot of the progress I had already made had to be redone, and I had to push through several problems to get everything working again.Even though it was challenging, I kept working on the project and made many improvements along the way. I changed the background, added more options, added audio, and made several other updates to improve the overall look and functionality of the project.Starting again was definitely difficult, but it also gave me the opportunity to improve parts of the project that I might not have changed otherwise. I learned that even when things go wrong, it is important to keep pushing through the problems and continue improving the project. Please Try it!!!! https://atharvmahajan-ux.github.io/Focus-Companion2/
