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 rich reward system with unlockable companions and themes, and comprehensive progress visualization. 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. Implemented comprehensive bilingual support (Arabic RTL/English LTR) using next-intl with proper text direction handling. Integrated multiple Islamic APIs: Aladhan for prayer times and Hijri calendar conversion (with Egypt timezone adjustment), Alquran Cloud for daily Ayah, and HadithAPI for daily Hadith—all with intelligent caching and fallback strategies. Created a gamified reward system with unlockable companions, themes, decorations, and achievements that respond to user progress. Implemented client-side AES-GCM encryption for localStorage data privacy, custom hooks for state management, and a comprehensive logging utility for production error handling. Applied performance optimizations: Next.js 16 Cache Components with custom cache profiles, lazy loading, skeleton screens, and strategic API timeouts. Designed an accessible UI with WCAG 2.1 AA compliance, proper semantic HTML, and keyboard navigation support.
Delivered a fully functional PWA achieving 98/100 performance score, 96/100 accessibility, and 92/100 SEO on Google PageSpeed Insights. Successfully implemented 30+ reusable components following feature-based architecture, comprehensive habit tracking with streak calculations, calendar visualization, and progress analytics. Created a production-ready logging system that eliminated all console errors in production while maintaining full debugging capabilities in development. Demonstrated mastery of modern React patterns, 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 and real-world API integrations.
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
