Islamic Digital Companion
Privacy-first Islamic Digital Companion
Ihsaaan (Personal/Community Project)
Lead Architect & Full-stack Developer - Designed the dual-typography engine, Dhikr tracking system, and offline-first architecture.
Ongoing
2026
Ihsaaan was born from the need for a beautiful, distraction-free Islamic app that respects user privacy. It provides a centralized dashboard for Hadith study (integrated via optimized APIs), real-time Dhikr tracking, and spiritual progress visualization. The app is designed as a PWA to ensure it works reliably on any device, even with flaky connectivity.
Many Islamic apps are cluttered with ads or have poor typography for Arabic text. The goal was to build a "premium-feel" application that balances high-fidelity typography with extreme performance and offline reliability.
How I engineered the system
Dual-Typography Engine: Developed a custom rendering layer for Arabic and English text to ensure perfect readability and alignment across different Hadith collections.
Offline-First Architecture: Leveraged Next.js and Service Workers to cache critical Hadith data and user Dhikr progress locally, enabling full functionality without an internet connection.
Optimized API Proxy: Built a centralized Next.js backend proxy with cache-miss protection (stale-while-revalidate) to ensure lightning-fast data retrieval across 2,000+ daily hits.
Interactive Tracking: Implemented a snappy Dhikr counter using Zustand for state management and Framer Motion for subtle, tactile animations.
What it accomplished in production
Seamless Experience
Delivered an ultra-smooth, ad-free experience that prioritizes content and spiritual focus.
Typography Excellence
Highly praised for its clean, high-fidelity Arabic font rendering and dual-language layout.
Offline Reliability
Fully functional PWA that allows users to read Hadiths and track Dhikr anywhere, regardless of internet status.
Privacy by Design
Zero trackers or data harvest ensuring a secure and private spiritual space for every user.
Built with
Frontend
- • Next.js (App Router)
- • React
- • TailwindCSS
- • Framer Motion
- • shadcn/ui
Core
- • TypeScript
- • Zustand
- • Lucide React
- • TanStack Query
Infrastructure
- • PWA / Service Workers
- • Node.js Fetch API
- • Agile Caching Layer