• 

  landing page

• 

  main layout

• 

  started the goal

• 

  when we get distracted

Building ToxiGotchi: When Productivity Has Consequences

What Inspired Us

It started during a late-night study session. My teammate and I kept opening new tabs, checking Instagram, and completely ignoring our Pomodoro timers. The timers were just numbers—silent, passive, easy to dismiss.

We realized the problem: there's no emotional attachment to a countdown clock.

That's when we had the idea—what if your focus had consequences? What if getting distracted actually hurt something you cared about? The digital pet trend from the 90s (Tamagotchi) came to mind. Suddenly, the idea clicked: a Pomodoro timer where your pet dies if you fail to focus.

ToxiGotchi was born.

What We Learned

Building this in 7 hours taught us more than any week of tutorials ever could.

1. Firebase is magical (and terrifying). We had never used Firestore before. Setting up real-time leaderboards and user authentication in hours felt like cheating. But we also learned the hard way that Firestore rules matter—we accidentally gave everyone admin access for the first hour.

2. Neo-brutalism is harder than it looks. Making something look intentionally broken while keeping it functional is an art. We spent way too long getting the shadows to look just off-kilter.

3. Duolingo streaks are psychological warfare. Implementing the streak system made us realize why Duolingo is so addictive. The fear of losing a streak is a powerful motivator. Our streak logic:

$$ \text{Streak} = \begin{cases} \text{streak} + 1 & \text{if lastActive = yesterday} \ 1 & \text{if lastActive = today and first session} \ 0 & \text{if lastActive > yesterday} \end{cases} $$

4. CSS animations can be violent. The screen-shake effect on failure was supposed to be subtle. It is not subtle. We kept it.

How We Built It

The Stack:

• HTML, CSS, JavaScript (no frameworks—keep it simple)
• Firebase Auth (Google Sign-In)
• Firestore (real-time database)
• Vercel (deployment)

The Process:

Hour 1: Ideation and sketching. We knew we wanted a pet, a timer, and consequences. The neo-brutalist aesthetic came from a shared love of ugly 90s websites.

Hour 2: Firebase setup and authentication. This took longer than expected because we kept forgetting to enable Google Sign-In in the console.

Hour 3: Building the core timer logic. We made it drift-proof using absolute timestamps:

targetEndTime = Date.now() + (timeLeft * 1000);

This ensures the timer doesn't slow down when the browser throttles background tabs.

Hour 4: The pet health system and failure state. This is where ToxiGotchi got mean. Every distraction costs 25 HP. Hit zero and it's game over.

Hour 5: Leaderboards and streak tracking. We wanted real competition. The Hall of Shame shows who gets distracted most—public humiliation as motivation.

Hour 6: The apology mechanism. We made users type at least 15 words with "sorry" or "apologize" to unlock the timer. It's petty. It's perfect.

Hour 7: Polish, bug fixes, and deployment to Vercel.

The Challenges We Faced
1. The Runaway Button
Making the Start button physically dodge the mouse cursor was a nightmare. The button kept escaping the viewport. We finally contained it with margin boundaries:

const maxX = window.innerWidth - startBtn.offsetWidth - MARGIN;
const maxY = window.innerHeight - startBtn.offsetHeight - MARGIN;

2. Streak Logic
Getting the streak to reset only after a missed day (not multiple sessions on the same day) required careful date comparison. We learned that toDateString() is your friend.

3. Background Tab Detection
We needed to catch users switching tabs during focus mode. The visibilitychange API was simple, but we had to ensure breaks were exempt—users deserve to check Instagram during their 5 minutes of freedom.

4. Mobile Vibration
The vibration pattern was supposed to be annoying but not phone-destroying. We settled on [300, 100, 300, 100, 500] milliseconds. It's just annoying enough.

5. The Apology Wall
We wanted the apology requirement to feel genuinely frustrating. Fifteen words was the sweet spot
—long enough to be annoying, short enough to not be impossible.

What's Next
ToxiGotchi is functional, but we have big dreams:

Multiple pet types that evolve with your streak

Weekly challenges and competitions

Sound design (aggressive alarms for failure, soothing tones for focus)

Mobile app version with push notifications

Final Thoughts
In 7 hours, we built something that made us laugh, frustrated us, and actually helped us focus. ToxiGotchi is mean, petty, and unfair—just like real life. And that's exactly why it works.

Your focus keeps your pet alive. Don't fail.
Built with spite and caffeine by a team of two.
-Dhruv Malu
-Malakonda Chaitanya Bhargav

Built With

• css3
• firebase
• html5
• javascript