Progressive Web App that gamifies Ramadan habits with streak tracking, prayer times, daily Quran verses, and Hadith. Features bilingual support (Arabic RTL/English LTR), offline functionality, a 56-item reward system with unlockable companions and themes, and an IDE-style interactive Learn Mode that teaches developers the architecture behind every UI element. Achieved 98/100 performance score with Next.js 16 App Router, client-side encryption, and optimized caching strategies.
During Ramadan, Muslims worldwide struggle to maintain consistent spiritual habits across 30 days. Existing habit trackers lack cultural context, don't support Arabic RTL properly, miss essential features like prayer times and Islamic content, and fail to provide the motivational feedback needed for a month-long commitment. Users needed a unified platform that combines habit tracking with spiritual resources while respecting Islamic aesthetics and bilingual requirements.
Built a production-ready Next.js 16 PWA with App Router, leveraging TypeScript for type safety and feature-based architecture across 22 modules. Implemented comprehensive bilingual support (Arabic RTL/English LTR) using next-intl with Tailwind logical properties for automatic text direction handling. Integrated three Islamic APIs—Aladhan for prayer times, Alquran Cloud for daily Ayah, and HadithAPI for daily Hadith—all with Next.js 16 Cache Components and fallback strategies. Designed a gamified reward system with 56 unlockable items (companions, themes, decorations, patterns, badges, titles) driven by a debounced reward engine and progressive disclosure (Fog of War) mechanics. Implemented client-side AES-256-GCM encryption for localStorage data privacy, a pub/sub event bus for cross-module communication, and split context patterns to prevent unnecessary re-renders. Built an interactive IDE-style Learn Mode with Ctrl+Click navigation, hover peek cards, architecture diagrams, 46+ design pattern case studies, and guided walkthroughs—turning the app itself into a teaching tool for developers.
Delivered a fully functional PWA achieving 98/100 performance score, 96/100 accessibility, and 92/100 SEO on Google PageSpeed Insights. Shipped 100+ components, 20 custom hooks, and 35,000+ lines of TypeScript across 10 feature domains and 12 infrastructure modules. Created an interactive Learn Mode that documents the entire codebase through annotated UI overlays, Mermaid architecture diagrams, and guided code walkthroughs. Demonstrated mastery of modern React patterns (split contexts, event-driven architecture, headless reward orchestration), PWA capabilities, bilingual internationalization, Islamic API integration, and performance optimization techniques. The project showcases ability to build culturally-sensitive, accessible, and performant web applications with complex state management, real-world API integrations, and developer-facing documentation tooling.
Full RTL/LTR support — every component adapts its layout, spacing, and text direction
Each theme transforms the entire UI — colors, gradients, glass effects, and pattern overlays adapt seamlessly
6 unlockable companions with 5 mood states each — hover to see them react to your progress
47+ unlockable rewards including progressive lanterns, achievement badges, and collectible decorations
6 culturally-authentic pattern tiles that serve as unlockable decorations and UI accents
