Todo — Sit with Todo

• 

  Meet Todo — a cozy focus companion. Artwork from our animated product overview.

Inspiration

Starting work can be harder than doing it. A timer alone does not always make studying or working feel less lonely. I wanted to build a welcoming place where a little companion works beside you, and friends can join your table.

What it does

Todo is a desktop-first focus website with an animated penguin companion. Choose your companion, enter your room, write your tasks, and start a focus session. Todo writes alongside you while the countdown runs. When the session ends, a celebration leads into a break or another round of focus.

The room brings together notes, adjustable session lengths, weather and sound choices, and an AI chat for questions, explanations, and summaries. Shared tables let friends work together with text chat and voice. Break activities offer a playful change of pace before returning to work.

The goal is a simple rhythm: arrive, choose something to work on, focus together, and rest.

How I built it

The interface uses React, Next.js, TypeScript, Tailwind CSS, and shadcn components. GSAP and Lenis support the motion and scrolling. Custom penguin artwork and layered room elements give the experience its identity.

Firebase handles account sign-in and realtime shared-room features. WebRTC supports voice communication, with a TURN relay to help connections across restrictive networks. AI requests go through the backend so provider credentials stay off the client. Vercel hosts the public website, with supporting backend services for data and AI.

I developed Todo iteratively with AI-assisted coding and tested the experience in the browser, including real voice calls with a friend.

Challenges I ran into

The hardest part was keeping a richly animated interface calm and usable. Eye tracking, blinking, writing flippers, lighting, and transitions needed to work together without visual glitches. I also simplified panels so the focus session remained the center of attention.

Shared rooms brought another challenge: microphone permission, browser audio playback, connection recovery, and network restrictions all affect whether people can hear one another. Testing with another person helped uncover problems that a solo preview could not reveal.

Accomplishments that I'm proud of

Todo has grown from a character idea into a working website with accounts, focus sessions, AI chat, shared rooms, and two-way voice. I am particularly proud of bringing the companion into the work-and-break flow rather than leaving it as a decorative mascot.

What I learned

Animation needs to communicate what is happening. A successful transition makes the next action clearer. I also learned that a polished product depends on state management, authentication, persistence, readable controls, and testing across browsers and networks.

What's next for Todo

Improve accessibility and performance, refine the shared-room experience, and build a thoughtful mobile layout. I also want to keep testing with new users so the interface becomes easier to understand without adding more clutter.

Built With

• firebase
• next.js
• react
• typescript