Habbit: build better habits

Habbit turns your habits into an adventure: earn steps, keep your streak, open chests and grow with your avatar. Bad day? Shields protect your progress. Consistency without guilt. iOS & Android.

Comment

Inspiration

My girlfriend was reading Atomic Habits and wanted to put its ideas into practice, but she couldn't find a habit app that fit. Most looked either too serious or just bad. They were also harder to use than they should be.

We wanted one app that we could both use, that is easy from the first minute, and that motivates you by itself instead of just nagging you. The dream was to share habits, cheer each other on and see our progress together.

I built Habbit while she read the book, so she could apply its principles as she went. Every habit you complete earns steps, streaks multiply them, and shields and protectors absorb the days you miss, so one bad day doesn't erase weeks of effort.

What it does

Habbit turns habits into a game that feels good to use every day.

  • Track positive habits ("meditate") and resist habits ("don't smoke"). Both earn steps.
  • Streaks, per-habit milestones and multipliers reward consistency.
  • Gems, free and weekly chests, shields, protectors and x2 boosts keep it fun and forgiving. A missed day doesn't erase your progress.
  • An animated avatar reacts to your day: its mood changes depending on how many habits you complete.
  • Suggested habit templates, reminders, notes and time tracking make setup easy.
  • Habbit Pro unlocks unlimited reminders, advanced statistics and an ad-free experience, with a free trial.

How we built it

  • App: Vue 3 (Composition API) + Pinia + TypeScript + Quasar 2, shipped to iOS and Android from one codebase with Capacitor 8. The avatar and animations use Rive.
  • Backend: Firebase Auth, Firestore with offline cache, Remote config, Analytics and Crashlytics. Users start anonymous and can upgrade to Google or email without losing data.
  • RevenueCat: handles Habbit Pro (annual plan with free trial, or monthly) and consumable gem packs.

Challenges we ran into

  • Gem packs and transferred purchases. RevenueCat transfers a purchase to the last appUserID that posts it, and anonymous users get a new uid on every reinstall. A "new" transaction could be credited twice, and alternating between two accounts could mint gems forever. I added a global gemGrants/{transactionId} lock, created together with the gem credit in a single Firestore transaction, so a transaction can only ever be credited once. Transactions bypass Firestore's local cache, so I force a server read afterwards.
  • Subscription lapses. When Pro expires, extra reminders must stop counting and notifications must resync without deleting the user's habits.
  • Native WebView quirks. The app has to work on Android WebView (Chrome 85+) and with VoiceOver and TalkBack.

Accomplishments that we're proud of

  • A full RevenueCat integration: entitlements, trials, localized pricing, restores, pending payments and consumable gem packs.
  • A purchase-idempotency design that makes it impossible to credit the same gem transaction twice, even across accounts and reinstalls.
  • One codebase running on iOS and Android, with offline support and anonymous-to-account upgrades that keep all user data.
  • An app built with accessibility in mind, following WCAG 2 guidelines, with screen reader support (VoiceOver and TalkBack), and fully available in English and Spanish.
  • Most of all: an app that my girlfriend and I both actually want to open every day.

What we learned

Accessibility is easy to skip and hard to bolt on later. Inside a Capacitor app, the screen reader sees the whole HTML tree, so every clickable div without a role and label is invisible to it. Even the framework can get in the way: Quasar's layout was focusable, so VoiceOver landed on a full-screen invisible element until I removed it. Building accessible from the start was much cheaper than fixing it afterwards.

Rive was completely new to me. I'm a developer, not an artist, but I'm happy with the result: the character concept made the app feel alive.

Offline-first and payments also pull in opposite directions. Firestore writes can queue locally, but a purchase can't. Each flow needs an explicit answer to "do I know for sure this happened?"

What's next for Habbit: build better habits

The next step is the idea that started it all: sharing habits with your partner or friends, to motivate each other and see your progress together. Making the app and the process of building habits more social.

Built With

Share this project:

Updates

Submission history