Waktu Solat - Islamic Prayer Times App for Malaysia
Clean, modern prayer times application with progress visualization, auto-location detection, and Islamic event calendar for Malaysian Muslims.
Project Overview
Minimalist web application providing accurate Islamic prayer times for all zones across Malaysia. Features real-time prayer countdown with circular progress indicator, daily prayer schedule (Subuh, Zohor, Asar, Maghrib, Isyak), automatic location-based zone detection, and upcoming Islamic events calendar (Ramadan, Eid, Hijri dates). Built with Next.js for performance and SEO, integrating with Malaysia's official Waktu Solat API (JAKIM).
- Built responsive UI with Next.js, TypeScript, and Tailwind CSS
- Implemented SVG circular progress indicator with real-time countdown animations
- Integrated JAKIM Waktu Solat API with error handling and data caching
- Developed automatic zone detection using browser Geolocation API
- Created Islamic events calendar with Hijri date conversions
- Optimized SEO with Next.js metadata, Open Graph tags, and structured data
- Deployed on Vercel with serverless functions for API data fetching
- Ensured accessibility with semantic HTML and keyboard navigation
Project Journey
Existing prayer time apps were cluttered with ads, featured confusing interfaces, and lacked clear visual indicators for upcoming prayers. Users needed quick glance-ability to know when next prayer approaches. Many apps required manual zone selection without utilizing device location. No integration of prayer times with Islamic calendar events (Ramadan dates, special occasions). Needed lightweight, fast-loading app with minimal distractions for daily spiritual practice.
Designed minimal UI focusing on essential information: current prayer progress, upcoming prayer time, and full daily schedule. Implemented circular progress indicator with SVG animations showing time remaining until next prayer. Integrated official JAKIM Waktu Solat API for accurate Malaysia-wide prayer times across all zones. Added browser Geolocation API for automatic zone detection with manual override. Built Islamic events section displaying Ramadan dates, Eid celebrations, and monthly Hijri calendar. Styled with Tailwind CSS and Shadcn UI for clean, responsive design. Deployed on Vercel with automatic daily data refresh from API.
Delivered clean, distraction-free UX surfacing prayer times at a glance without ads or clutter. Improved user engagement with visual progress indicator reducing need to calculate remaining time. Automatic location detection eliminated friction of manual zone selection for 85% of users. App serves 2,000+ monthly users with 4.9/5 satisfaction rating for simplicity and accuracy. Reduced prayer time lookup from multiple steps to single glance. Received community feedback praising minimal design aligned with spiritual focus. Future roadmap includes prayer notifications and qibla direction.
Technology Stack
Project Gallery
Related Projects
Personal Portfolio Website
A modern, performance-optimized personal portfolio built with Next.js 14 and React. Features server-side rendering (SSR), component-driven architecture, and WCAG 2.1 AA accessibility standards. Showcases professional projects with detailed case studies, interactive UI elements, and seamless navigation for optimal user experience.
BukaDiMana - Ramadan Bazaar Discovery Platform
Community-driven platform helping Muslims discover nearby Ramadan bazaars, explore food stalls, and plan iftar meals during the holy month. Features interactive map with bazaar locations, stall directories with photos and menus, prayer time integration, and user contributions. Built with Next.js, React Leaflet, and Supabase as an open-source project during #GodamSahur – a month-long Ramadan hackathon encouraging developers to build meaningful community tools.
Ready to start your project?
Let's discuss how I can help bring your ideas to life with modern web technologies.