ميقات | Miqaat

Accurate prayer times for Algerian Wilayas.

Overview • Live Demo • Key Features • Screenshots • Tech Stack • Getting Started

Overview

Miqaat is a web application designed to provide accurate prayer times specifically for users in Algeria.

🌐 Live Demo

View App

Key Features

• Dynamic Location Selection: Easily choose your Wilaya using an interface or by using automatic GPS detection.
• Live Countdown: Real-time updates and countdowns to the next prayer time.
• Comprehensive Calendar: View weekly and monthly prayer schedules with an elegant, printable layout.
• Smart Notifications: Frontend-scheduled notifications firing 1 minute before each prayer.
• Hijri Date Display: Accurate Islamic date fetched from the Aladhan API, displayed alongside the live clock.

📸 Screenshots

🏠 Home Dashboard

Comprehensive view of current and upcoming prayer times with a live clock.

🗓️ Prayer Calendar

weekly/monthly prayer time calendar.

🛠️ Tech Stack

• Frontend: React (React Router v7)
• Language: TypeScript
• Styling:
  • Tailwind CSS (utility-first)
  • Custom CSS (design tokens, shimmer animations, theming system)
• Icons: Lucide React
• Persistence: LocalStorage for user preferences
• Deployment: Optimized production build via Vite

🏗️ Project Architecture

🧩 System Overview

• UI Layer
  • Routes / Pages
  • Blocks / Layout Sections
  • Atomic Components
• Logic & State
  • Custom Hooks
  • Global Context
  • LocalStorage
• Data Layer
  • API Services
  • External AlAdhan API
  • Static Data / Types

📁 Directory Breakdown

• app/routes/: Entry points for each page (Home, Settings, Calendar, Location).
• app/blocks/: Complex, layout-specific sections (e.g., Prayer Grid, Search Header) that compose pages.
• app/components/: Reusable atomic UI elements (Buttons, Inputs, Skeletons) following a consistent design system.
• app/hooks/: Encapsulated business logic (GPS tracking, prayer time calculations, countdown timers).
• app/context/: Global state management using React Context for user preferences and location data.
• app/services/: Data fetching layer and API clients for external communication.
• app/data/: Static configuration, types, and constants.
• app/i18n/: Localization dictionary and logic for Arabic/English support.

🔌 API Integration

Miqaat integrates with two external APIs for accurate prayer times and Islamic date conversion.

Prayer Times — AlAdhan API

• Source: aladhan.com
• Endpoints:
  • /v1/calendarByCity: Fetches a full annual calendar for the 58 traditional Algerian Wilayas using their city names.
  • /v1/calendarByAddress: Fetches a full annual calendar using coordinates for the newly established southern wilayas.
• Implementation: Logic is centralized in alAdhanService.ts (fetching, caching, and mapping) and api.ts (application mapping). All requests use method=19 (Algerian Ministry of Religious Affairs and Endowments).

Hijri Date — Aladhan Islamic Calendar API

• Source: aladhan.com/islamic-calendar-api
• Endpoint:
  • /v1/gToH: Converts Gregorian dates to Hijri with accurate month/weekday names in English and Arabic.
• Implementation: fetchHijriDate() in the service layer, called from current-time-card.tsx. Falls back to a client-side approximate algorithm if the API is unavailable.

Getting Started

Prerequisites

• Node.js (LTS version recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/Haroune-dev/miqaat.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Author

Haroune-dev

---