Treat Yourself

Inspiration

Added sugar hides in a lot of what we eat, and most of us have no idea how much it adds up to. The American Heart Association suggests about 25 g a day for women, and a single boba can be most of that. Most nutrition apps feel like diet apps, full of calorie counts, red warnings and guilt. We wanted something that feels like a cozy journal: easy, cute and kind. Our motto became awareness, not guilt.

What it does

Treat Yourself is a judgment-free sugar tracker that runs right in your browser.

Pick your treats from more than 50 favorites, like cookies, boba, ice cream, candy, drinks and fruit, or add your own. Watch the candy jar fill toward your daily goal. The default is 25 g, and you can change it to whatever you like. A dashed line marks your max, and the jar shifts from mint to rose as you get close. Meet Honey the bear, our original mascot. She sits holding her lollipop, and her face changes as the jar fills, from happy to content to "oh my!" to sleepy. See your week with a 7-day history chart and a sweet streak for days you stay within your goal. Get gentle guidance and see your sugar sources, plus an optional health profile and a sugar glossary. Share your day as a cute card you can download. Keep it private. Everything stays in your own browser, with no account, no server and nothing to download.

How we built it

We kept it simple on purpose: plain HTML, CSS and JavaScript, with no frameworks and no build step. Honey is drawn entirely in code as an inline SVG, so she scales cleanly and changes expression with your progress. The share card is drawn on a canvas, and your data is saved with localStorage. The site is hosted for free on GitHub Pages, so anyone can open it on a phone or laptop. We used Claude Code to help build features and polish the design quickly.

Challenges we ran into

Working in parallel: several of us pushed to the same branch at once, so we had to resolve merge conflicts fast without losing anyone's work. Getting Honey right: our first bear had no arms or legs and looked a little off. We sketched several versions before landing on the lollipop bear. Getting the tone right: we had to find ways to show you've gone over your goal without making anyone feel bad. Every message is written to be kind, and tomorrow always resets. The numbers: sugar values are estimates, so we worked to present them clearly and cite real guidance for the daily limit.

Accomplishments that we're proud of

A fully working, live app that anyone can use instantly Honey the bear, an original mascot drawn entirely in code A design that feels warm and fun instead of clinical Full privacy, since no data ever leaves your device

What we learned

We learned how much design and tone shape whether people actually want to use a health tool. We also got hands-on practice with SVG art, canvas drawing, browser storage, GitHub Pages and coordinating git on a fast-moving team. And we learned a lot about added sugar along the way.

What's next for Treat Yourself

Scanning barcodes or nutrition labels to log treats instantly Optional accounts to sync across devices More treats, including cultural favorites and drinks from popular chains Weekly recaps and gentle swap ideas, like a lower-sugar boba order More Honey outfits and moods to unlock with streaks An installable phone app version