Mawaqit Arabia is a fast, privacy-focused prayer time companion that provides precise Islamic prayer schedules by city. It features customizable accuracy settings (calculation method, madhab, and high-latitude rules), automatic timezone detection with manual override, Hijri/Gregorian date display, per-prayer visibility, plus location-based Qibla guidance with a rotating compass — all in a clean, mobile-first interface optimized for clarity and performance.
Watch Live Demo: ahmed-maher77.github.io/Mawaqit-Arabia___Islamic-Prayer-Times
Watch on LinkedIn: coming soon
- React: component-based UI and state management.
- Vite: lightning-fast dev server and bundler.
- @vitejs/plugin-react-swc: SWC-powered React transform for speed.
- GitHub Pages: static hosting for production builds.
- GitHub Actions: CI to build and deploy on push.
- ESLint: linting for code quality and consistency.
- Aladhan API: prayer times data by city/date. -- Geolocation API: fetches device location to compute Qibla. -- Device Orientation API: reads compass heading to rotate the dial in real time.
- City & Country Selection: curated lists per country.
- Date Picker: select Gregorian date with instant refresh.
- Accuracy Controls: method, madhab (school), high‑latitude rules.
- Timezone Handling: auto-detect with manual override.
- Hijri Toggle: switch between Hijri and Gregorian display.
- Visibility Controls: show/hide individual prayers.
- Location (Use My Location): geolocation with loading state, start/stop tracking, and graceful fallback.
- Qibla Direction: static Kaaba marker on rim (absolute bearing) with a rotating dial by device heading; align the fixed needle with the marker to face Qibla.
- Accessible UI: custom selects and switches, keyboard-friendly.
- Performance: lazy-loaded modal, memoized sections, mobile optimizations.
- CI/CD: one‑click deploy to GitHub Pages via Actions.
# Clone the repository
git clone https://github.com/Ahmed-Maher77/Mawaqit-Arabia___Islamic-Prayer-Times.git
cd Mawaqit-Arabia___Islamic-Prayer-Times
# Install dependencies
npm i
# Run the development server
npm run devProduction build and deploy to GitHub Pages:
npm run predeploy
npm run deploysrc/
├── components/ # Reusable UI units and feature modules
│ ├── SettingsPopup/ # Settings modal with modular sections
│ ├── FormComponents/ # Low-level form inputs (CustomSelect, ToggleSwitch)
│ ├── TimingHeader/ # City selector and date display (Hijri/Gregorian)
│ ├── TimingList/ # Manages fetching, settings, and prayer grid orchestration
│ ├── PrayerTimingsGrid/ # Grid layout rendering prayer times
│ ├── PrayerTimingsContainer/ # Wrapper passing timings and visibility props
│ ├── Loader/ # Loading indicators
│ ├── Footer/ # Footer with navigation and social links
│ └── SettingsIcon/ # Floating button to toggle settings modal
│
├── utils/
│ ├── apis/ # Data-fetching utilities (Aladhan API hooks)
│ └── data/ # Static data (country, city, and prayer lists)
│
├── assets/ # Static images and icons
│
├── App.jsx # Root application shell and layout
├── main.jsx # Entry point (React/Vite bootstrap)
│
public/ # Public assets served without bundling
- components: feature-focused UI composed of small, memoized sections.
- utils/apis: fetch and transform external data (side-effects isolated).
- utils/data: constants and curated options for selects.
- assets: background images, logos, and other static media.
- public: files copied verbatim to the build output (e.g., icons, preview).
- Aladhan Timings by City: https://api.aladhan.com/v1/timingsByCity/04-03-2025?country=EG&city=cairo
Query params used by the app: method, school, latitudeAdjustmentMethod, timezonestring.
- 🧑💻 Portfolio: https://ahmedmaher-portfolio.vercel.app/
- 🔗 LinkedIn: https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 Email: ahmedmaher.dev1@gmail.com
Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!