Ramadan Tracker — A Modern PWA Prayer Companion for Ramadan Month and Beyond

What started as a personal need — a simple tracker to keep tabs on my own Tharaweeh prayers during Ramadan — unexpectedly grew into a widely used Progressive Web App (PWA) serving over 200 users. Built with React, Firebase, and IndexedDB, this project quickly evolved into a full-fledged daily prayer companion still used today, especially by Muslims in Sri Lanka and beyond.

Introduction

During Ramadan 2025, I built Ramadan Tracker, a Progressive Web App (PWA) that started as a personal project. I wanted a simple way to track my Tharaweeh prayers, stay motivated, and build consistency throughout the holy month. What began as a tool for my own spiritual discipline unexpectedly resonated with others, and the app organically gained traction.

It quickly evolved into something more than a tracker. Ramadan Tracker became a prayer companion: with streak tracking, motivational messaging, accurate daily prayer times, and push notifications — all delivered in a seamless, mobile-first PWA experience that worked beautifully on both Android and iOS, including support for standalone installation on home screens.

What’s most rewarding? Even after Ramadan, people across Sri Lanka are still using the app daily, for the 5 times prayer time notifications. That kind of ongoing impact is what makes this project so meaningful to me as a developer.

What Problem Was I Solving?

The motivation came from something simple but real — many people lose track of how many Tharaweeh prayers they’ve completed during Ramadan. Others want a little push, some consistency, maybe even a streak system to help them stay motivated. On top of that, accurate prayer times — especially adjusted for specific time zones like Sri Lanka — are scattered across different apps or websites.

So I asked myself:

• Can I give users a simple interface to track their nightly prayers?
• Can I encourage them to build a habit throughout the month?
• Can I send timely reminders just before Isha?
• And can all of this work like a native app, even offline?

The result was a deeply technical yet incredibly lightweight Progressive Web App with a user-first polish — something that could live on your phone’s home screen and feel just like a native app.

Even though I had never built a PWA before, I dove deep, figured it out quickly, and began development. What started as a solution for myself ended up helping hundreds of users across multiple countries.

Tech Stack

• React + TypeScript – for scalable, maintainable components
• TailwindCSS and Shadcn – for quick styling and responsive UI
• IndexedDB (via custom abstraction) – for storing user history offline
• Firebase
  • Firestore: iOS migration sync logic
  • Cloud Messaging: Push notifications
• Google Analytics & Vercel Analytics – user analytics and regional stats
• Vercel – deployment with automatic previews and CI/CD
• PWA Features – offline support, add to homescreen, caching, install banners

The Journey: From Idea to App

I built the original Tharaweeh counter in just four hours on the second day of Ramadan — right before heading out for prayer. At the time, I wasn’t thinking about PWAs or notifications. I just needed a simple way to track how many rakats I had prayed each night. Nothing fancy. Just something that worked.

But then I shared it with a few friends. Word spread. More people started using it, and I realized I wasn’t the only one who wanted this. That’s when I started thinking about how far I could take it.

The original version was built with Vite and React, without any plans for PWA features. But when I saw how many people were visiting the app every night, I knew I had to improve the experience. I dove into PWA documentation for Vite, implemented service workers, and turned it into something users could install directly on their home screen.

Then came the prayer times. Public APIs weren’t giving me accurate times for Sri Lanka, which was frustrating. So, I decided to take control. I set up my own Firebase Firestore database, where I upload verified prayer times manually for Sri Lanka. The app pulls directly from that database, ensuring every user gets accurate prayer timings every day. That level of control was important to me.

For storing data, I initially used localStorage, but later switched to IndexedDB for better reliability — especially for users with larger datasets or iOS users where persistence matters more. On iOS, I even built a secure backup and migration system using Firebase Auth and OTP verification, allowing users to retain their data if they ever reinstalled the app.

Notifications were next. I added Firebase Cloud Messaging (FCM) to send prayer reminders — subtle nudges that help users stay consistent. These notifications are opt-in and configurable based on preference, and they work seamlessly for Android and iOS users.

Only after all this did I start thinking about gamification. I wrote a simple logic engine that tracked prayer streaks and celebrated consistency. If someone prayed 7 rakats last night, the app nudged them to try for 8. If they hit all 10, it congratulated them. It wasn’t about pressure — it was about encouragement.

I took each feature step by step without rushing the development process. I prioritized the important features and tested them on the local environment before pushing them to production. What started as a quick personal tool became something far more valuable — a prayer companion that lives quietly on users’ phones and adds real value, even after Ramadan.

The iOS Challenge — Solved with Firebase + OTP

One of the trickiest parts was supporting iOS PWA installations. Unlike Android, iOS does not share IndexedDB data between Safari and a homescreen-installed PWA. This meant if a user had data in the browser and installed the app, they’d lose it.

To solve this, I implemented a clever workaround:

1. When users clicked Install, I prompted them to migrate their data.
2. I exported their current IndexedDB state and stored it temporarily in Firebase Firestore using a deviceId.
3. On the first load from the homescreen-installed app, I checked if we were in standalone mode using navigator.standalone.
4. If so, I fetched the data from Firebase — but with a twist: to avoid accidental conflicts or misuse, I introduced a simple OTP-based verification before importing the data.
5. After importing, I purged the Firebase document to keep the system clean.

This migration was seamless from a user perspective and completely privacy-respecting — no user accounts or sensitive data was ever stored.

Real Users, Real Stats

In March 2025:
📈 220+ total visitors
🟢 100+ active users during peak nights of Ramadan
🌍 From: Sri Lanka, Maldives, UAE, Australia, Bangladesh, UK

And the numbers didn’t stop after Ramadan ended.

Currently, in April 2025 (Last 7 days):
👤 20+ unique users
📄 90+ page views
🔔 Users are still using it for daily prayer notifications in Sri Lanka

It’s incredibly fulfilling to know that even weeks later, the app is part of people’s routines.

Problem-Solving Highlights

This project was a testament to my engineering flexibility and frontend depth:

• Migrated localStorage to IndexedDB using a backward-compatible fallback strategy.
• Built my own IndexedDB abstraction layer to simplify storage/retrieval with promise-based methods.
• Solved the rare iOS PWA data isolation issue — something many apps don’t handle at all — using Firebase and OTP.
• Designed a motivational UI/UX system that dynamically adjusted messages based on a user’s progress.
• Handled location-aware prayer times that respect timezone shifts without manual intervention.
• Integrated two forms of analytics (Google + Vercel) for both behavioral and real-time usage insight.

Final Thoughts

Ramadan Tracker wasn’t just a project — it was a mission to create something helpful, meaningful, and technically solid. It brought together React engineering, cross-platform UX, browser APIs, cloud infrastructure, and data design in one single app.

Most importantly, it showed me the real power of building something simple, focused, and real. Something that users genuinely return to.

Demo Video of Ramadan Tracker

Screenshots of the PWA App