All sidework
SIDEWORK / Daily habits

Quran Habit Tracker

A private Quran reading companion where two people grow an animated garden through a shared reading habit.

Independent projectDesign & development
The local Quran habit tracker with an animated garden, two growing trees, and reading progress.
The original garden interface rendered locally with synthetic reading sessions for two profiles.
THE IDEA

A little reading, a little growth.

Tumbuh is a Quran habit tracker for two people, connecting the quiet routine of reading with a garden that reflects their progress.

WHAT I BUILT

Turn a daily habit into a shared garden.

Built a Next.js application with an interactive SVG garden, private accounts, and a two-person pairing flow. Reading sessions are saved to Neon PostgreSQL, with unique-verse progress tracked separately from rereading activity. Quran text, Indonesian translations, transliteration, and recitation audio come from EQuran.id. Interrupted saves enter a device queue and are retried without creating duplicate sessions.

  • Private accounts with username or email sign-in and a shared garden for two.
  • An animated SVG garden connected to reading activity.
  • Quran text, Indonesian translations, transliteration, and six reciters through EQuran.id.
  • Explicit reading-session confirmation, daily activity, and unique-verse khatam progress.
  • Streak achievements retained after a missed day.
  • Installable PWA, cached visited Quran text, and retryable session saves.
THE TOOLKIT
Next.jsReactTypeScriptNeonPostgreSQLBetter AuthSVGEQuran.id
A CLOSER LOOK

Inside Quran Habit Tracker.

02 SCREEN VIEWS
The local Quran habit tracker with an animated garden, two growing trees, and reading progress.

Quran Habit Tracker overview

The original garden interface rendered locally with synthetic reading sessions for two profiles.

The local Quran tracker’s surah browser with names, verse counts, and a search field.

Find a surah

The surah directory captured from the local application components.