ميقات | 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

• Choose a wilaya manually or use GPS detection.
• See the current prayer time with a live countdown to the next one.
• View weekly and monthly prayer schedules in a clean calendar layout.
• Receive frontend notifications 1 minute before each prayer.
• Display the Hijri date alongside the live clock.

Screenshots

Home Dashboard

The home screen shows the current prayer time, upcoming prayer, and 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
• State / Persistence: React Context and LocalStorage

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

---