SAKINAH COMPASS

A digital mindfulness companion, anchored in Surah Ar-Ra'd (13:28), that helps Muslims pause, reflect, and log moments of gratitude and reliance on Allah

Comment

Inspiration

The Quranic Anchor This project is built upon Surah Ar-Ra'd (13:28) :

"Those who believe and whose hearts find comfort in the remembrance of Allah. Surely in the remembrance of Allah do hearts find comfort."

The verse reminds us that peace isn't found in notifications, productivity hacks, or worldly achievements — it's found in turning back to Allah. Every feature of Sakinah Compass is designed to facilitate that moment of turning back.

problem statement

In our fast-paced, digitally distracted world, Muslims often struggle to maintain consistent mindfulness (taqwa) and trust in Allah (tawakkul). We check our phones hundreds of times a day but rarely pause for spiritual reflection. How can technology help us remember Allah, not distract us from Him?

What it does

Time-Aware Reflections — Greets users with prompts tailored to morning, afternoon, evening, or night, encouraging mindfulness at natural pause points in the day

Tawfiq Tracker (Journal) — A private space to log moments of gratitude, reliance on Allah, and personal reflections, stored locally in the browser.

Dua & Intention Reminder — A one-click sincere intention prompt to renew mindfulness.

Visual Anchor — The Quranic verse remains visible as a constant reminder throughout the experience.

Why It Matters for the Ummah

Accessible: Works on any device, no app store required

Private: All journal data stays on the user's device (localStorage)

Barakah-Focused: Not gamified or addictive — designed to be used briefly, mindfully

Universal: Relevant for Muslims of all backgrounds, from new Muslims to lifelong learners

How we built it

HTML5

CSS3 (Flexbox, gradients, backdrop filters — first time using backdrop-blur)

Vanilla JavaScript (LocalStorage API — first time implementing client-side storage)

Responsive design with mobile-first approach

Challenges we ran into

1.Designing for Barakah, Not Addiction One of the biggest challenges was resisting the urge to add "engagement" features—like streaks, notifications, or social sharing—that would increase screen time. The goal of Sakinah Compass is to help users disconnect mindfully, not stay glued to the app. I had to constantly ask: "Does this feature bring the user closer to Allah, or just keep them on the page longer?" The solution was to strip everything down to essentials and trust that less is more when the intention is sincerity.

  1. Balancing Aesthetics with Accessibility I wanted the design to feel calming and spiritually resonant—soft gradients, subtle Arabic typography, a sense of tranquility. However, ensuring full accessibility across devices (especially older phones) required careful testing. Some CSS features like backdrop-filter don't work on all browsers, so I built graceful fallbacks while preserving the peaceful aesthetic.

  2. LocalStorage Limitations This was my first time using the LocalStorage API for persistent user data. I initially ran into issues with data serialization and had to learn how to properly store and retrieve arrays of objects. I also had to consider privacy—making sure users understood that their journal entries remain on their own device and aren't sent anywhere.

  3. Time-Aware Logic Across Time Zones Getting the greeting and reflection prompts to update based on the user's local time—without relying on external APIs—required careful JavaScript logic. I wanted the experience to feel personal whether someone opened the tool at Fajr, Dhuhr, or Isha time.

Accomplishments That We're Proud Of

  1. Staying True to the Quranic Anchor I'm proud that every feature of Sakinah Compass genuinely connects back to Surah Ar-Ra'd (13:28). This isn't just a generic mindfulness app with an Islamic label—it's built from the ground up with the verse as the foundation. The journaling prompts, the Dua button, and even the color palette are all chosen to reflect the tranquility (sakinah) that the verse speaks of.

  2. A Tool That Respects the User Unlike most apps that want to capture attention, Sakinah Compass invites the user to pause and then gently step away. I'm proud that there are no ads, no data collection, no accounts, and no engagement loops. It's designed to be used briefly, sincerely, and privately—a rare thing in today's tech landscape.

  3. Clean, Accessible Code As someone who wanted to push myself technically, I'm proud that I delivered a fully functional, responsive web app with vanilla HTML/CSS/JS—no frameworks, no bloat. The code is readable, commented, and lightweight (under 15KB of actual logic). Anyone can inspect it, learn from it, or even fork it for their own community.

  4. Learning LocalStorage for the First Time This was my first time implementing client-side storage, and I successfully built a persistent journal feature that saves user reflections across browser sessions. It felt like a genuine milestone in my development journey.

  5. Designing for the Global Ummah I intentionally built Sakinah Compass to work on any device, in any language setting, without requiring special permissions or downloads. A Muslim in Indonesia, Nigeria, the UK, or the US can all open it and benefit. That universality feels like barakah.

What's Next for Sakinah Compass

  1. Multi-Language Support Currently the interface is in English with Arabic Quranic text. I'd love to add support for other languages—Urdu, Turkish, Indonesian, French—to make it accessible to more of the Ummah. The reflections and prompts would be translated thoughtfully to preserve the spiritual tone.

  2. More Quranic Anchors While the core is Surah Ar-Ra'd (13:28), users could choose from a selection of verses about patience, gratitude, or reliance on Allah. Each verse would unlock tailored reflection prompts and Dua suggestions.

  3. Optional Daily Email Reminder For users who want a gentle nudge without opening the app, an opt-in email service could send a brief reflection or verse of the day—no tracking, just barakah. This would require a lightweight backend but could extend the project's reach.

  4. Audio Dhikr Integration Adding optional audio for tasbih or gentle Quran recitation could deepen the sensory experience of remembrance. Users could listen to soft dhikr while journaling or reflecting.

  5. Community Feature (Privacy-First) A completely optional, anonymous "community reflections" feed where users can share general gratitude statements (without personal details) to inspire others—think of it as a digital majlis of encouragement.

  6. Open Source Contributions I plan to open-source Sakinah Compass so other Muslim developers can contribute, translate, and adapt it for their communities. The goal isn't to own it—it's to make it a tool of benefit for as many people as possible.

  7. Mobile App Wrapper For users who prefer native apps, I'd like to wrap the web tool in a simple mobile container (using something like Capacitor) and release it on app stores—still with zero data collection, just a simple, sincere tool for remembrance.

What we learned

This was my first time building with LocalStorage for persistent user data, and I explored CSS backdrop filters for a modern, soft aesthetic. More importantly, I learned how a single Quranic verse can anchor an entire product's purpose and user experience.

Built With

Share this project:

Updates