# touficnabi/iftar-time architecture

> Architecture diagram of the GitHub repository touficnabi/iftar-time, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/touficnabi/iftar-time
- Repository: https://github.com/touficnabi/iftar-time

## Overview

This React app displays local Sehri (Fajr) and Iftar (Maghrib) countdowns. The main workflow obtains a location from browser geolocation or IP lookup, allows manual city selection, fetches prayer-calendar data, then renders a timer and method controls. The graph also shows the separate method lookup and city-selector modules named in the source index. Older page and timer components are retained as distinct legacy modules; their runtime use is not shown. Connections are limited to excerpts and source-index references.

Main entry points: [`src/App.js`](https://github.com/touficnabi/iftar-time/blob/master/src/App.js) (App), [`src/component/newPage.js`](https://github.com/touficnabi/iftar-time/blob/master/src/component/newPage.js) (Prayer Page), [`src/component/manualLocation.js`](https://github.com/touficnabi/iftar-time/blob/master/src/component/manualLocation.js) (Manual Location), [`src/component/Timer.js`](https://github.com/touficnabi/iftar-time/blob/master/src/component/Timer.js) (Prayer Countdown)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_location["Location"]
  node_app["App<br/>[App.js]"]
  node_manual["Manual Location<br/>[manualLocation.js]"]
  node_changecity["Change City UI<br/>[changeCity.js]"]
end

subgraph group_prayer["Prayer Times"]
  node_newpage["Prayer Page<br/>[newPage.js]"]
  node_methods["Method Lookup<br/>[useMethods.js]"]
  node_timer["Prayer Countdown<br/>[Timer.js]"]
  node_counter["Countdown Display<br/>[Counter.js]"]
  node_footer["Method Controls<br/>[Footer.js]"]
  node_loading["Loading Indicator<br/>[Loading.js]"]
end

subgraph group_selectors["City Selection"]
  node_cityselect["City Selector<br/>[CitySelect.js]"]
  node_citylookup["City Lookup Hook<br/>[useGetCity.js]"]
  node_selectcity["Select City<br/>[SelectCity.js]"]
end

subgraph group_legacy["Legacy UI"]
  node_oldpage["Legacy Page<br/>[Page.js]"]
  node_oldtimer["Legacy Timer<br/>[Timer.old.js]"]
end

node_user(("Visitor"))
node_browsergeo["Browser Geolocation"]
node_ipapi["IP Geolocation API"]
node_openweather["OpenWeather Geocoding"]
node_countriesnow["CountriesNow API"]
node_aladhan["AlAdhan API"]

node_user -->|"opens app"| node_app
node_app -->|"requests location"| node_browsergeo
node_app -->|"looks up location"| node_ipapi
node_app -->|"reverse geocodes"| node_openweather
node_app -->|"renders selector"| node_manual
node_app -->|"renders prayer page"| node_newpage
node_app -->|"renders while waiting"| node_loading
node_manual -->|"renders dialog"| node_changecity
node_manual -->|"loads countries"| node_countriesnow
node_manual -->|"geocodes selection"| node_openweather
node_newpage -->|"fetches calendar"| node_aladhan
node_newpage -->|"uses method lookup"| node_methods
node_methods -->|"fetches methods"| node_aladhan
node_newpage -->|"renders countdown"| node_timer
node_timer -->|"renders display"| node_counter
node_newpage -->|"renders controls"| node_footer
node_newpage -->|"renders while waiting"| node_loading
node_cityselect -->|"uses lookup hook"| node_citylookup
node_oldpage -->|"renders timer"| node_timer

click node_app "https://github.com/touficnabi/iftar-time/blob/master/src/App.js"
click node_manual "https://github.com/touficnabi/iftar-time/blob/master/src/component/manualLocation.js"
click node_changecity "https://github.com/touficnabi/iftar-time/blob/master/src/component/changeCity.js"
click node_newpage "https://github.com/touficnabi/iftar-time/blob/master/src/component/newPage.js"
click node_methods "https://github.com/touficnabi/iftar-time/blob/master/src/hooks/useMethods.js"
click node_timer "https://github.com/touficnabi/iftar-time/blob/master/src/component/Timer.js"
click node_counter "https://github.com/touficnabi/iftar-time/blob/master/src/component/Counter.js"
click node_footer "https://github.com/touficnabi/iftar-time/blob/master/src/component/Footer.js"
click node_loading "https://github.com/touficnabi/iftar-time/blob/master/src/component/Loading.js"
click node_cityselect "https://github.com/touficnabi/iftar-time/blob/master/src/component/CitySelect.js"
click node_citylookup "https://github.com/touficnabi/iftar-time/blob/master/src/component/useGetCity.js"
click node_selectcity "https://github.com/touficnabi/iftar-time/blob/master/src/component/SelectCity.js"
click node_oldpage "https://github.com/touficnabi/iftar-time/blob/master/src/component/Page.js"
click node_oldtimer "https://github.com/touficnabi/iftar-time/blob/master/src/component/Timer.old.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_manual,node_changecity,node_browsergeo toneBlue
class node_newpage,node_methods,node_timer,node_counter,node_footer,node_loading toneAmber
class node_cityselect,node_citylookup,node_selectcity,node_ipapi,node_countriesnow,node_aladhan toneMint
class node_oldpage,node_oldtimer toneRose
class node_user,node_openweather toneIndigo
```

## Components

### Location

- [App](https://github.com/touficnabi/iftar-time/blob/master/src/App.js): `src/App.js`
- [Manual Location](https://github.com/touficnabi/iftar-time/blob/master/src/component/manualLocation.js): `src/component/manualLocation.js`
- [Change City UI](https://github.com/touficnabi/iftar-time/blob/master/src/component/changeCity.js): `src/component/changeCity.js`

### Prayer Times

- [Prayer Page](https://github.com/touficnabi/iftar-time/blob/master/src/component/newPage.js): `src/component/newPage.js`
- [Method Lookup](https://github.com/touficnabi/iftar-time/blob/master/src/hooks/useMethods.js): `src/hooks/useMethods.js`
- [Prayer Countdown](https://github.com/touficnabi/iftar-time/blob/master/src/component/Timer.js): `src/component/Timer.js`
- [Countdown Display](https://github.com/touficnabi/iftar-time/blob/master/src/component/Counter.js): `src/component/Counter.js`
- [Method Controls](https://github.com/touficnabi/iftar-time/blob/master/src/component/Footer.js): `src/component/Footer.js`
- [Loading Indicator](https://github.com/touficnabi/iftar-time/blob/master/src/component/Loading.js): `src/component/Loading.js`

### City Selection

- [City Selector](https://github.com/touficnabi/iftar-time/blob/master/src/component/CitySelect.js): `src/component/CitySelect.js`
- [City Lookup Hook](https://github.com/touficnabi/iftar-time/blob/master/src/component/useGetCity.js): `src/component/useGetCity.js`
- [Select City](https://github.com/touficnabi/iftar-time/blob/master/src/component/SelectCity.js): `src/component/SelectCity.js`

### Legacy UI

- [Legacy Page](https://github.com/touficnabi/iftar-time/blob/master/src/component/Page.js): `src/component/Page.js`
- [Legacy Timer](https://github.com/touficnabi/iftar-time/blob/master/src/component/Timer.old.js): `src/component/Timer.old.js`

### Other components

- **Visitor**
- **Browser Geolocation**
- **IP Geolocation API**
- **OpenWeather Geocoding**
- **CountriesNow API**
- **AlAdhan API**

## Connections

- Visitor → App: opens app
- App → Browser Geolocation: requests location (evidence: `src/App.js`)
- App → IP Geolocation API: looks up location (evidence: `src/App.js`)
- App → OpenWeather Geocoding: reverse geocodes (evidence: `src/App.js`)
- App → Manual Location: renders selector (evidence: `src/App.js`)
- App → Prayer Page: renders prayer page (evidence: `src/App.js`)
- App → Loading Indicator: renders while waiting (evidence: `src/App.js`)
- Manual Location → Change City UI: renders dialog (evidence: `src/component/manualLocation.js`)
- Manual Location → CountriesNow API: loads countries (evidence: `src/component/manualLocation.js`)
- Manual Location → OpenWeather Geocoding: geocodes selection (evidence: `src/component/manualLocation.js`)
- Prayer Page → AlAdhan API: fetches calendar (evidence: `src/component/newPage.js`)
- Prayer Page → Method Lookup: uses method lookup (evidence: `src/component/newPage.js`)
- Method Lookup → AlAdhan API: fetches methods (evidence: `src/hooks/useMethods.js`)
- Prayer Page → Prayer Countdown: renders countdown (evidence: `src/component/newPage.js`)
- Prayer Countdown → Countdown Display: renders display (evidence: `src/component/Timer.js`)
- Prayer Page → Method Controls: renders controls (evidence: `src/component/newPage.js`)
- Prayer Page → Loading Indicator: renders while waiting (evidence: `src/component/newPage.js`)
- City Selector → City Lookup Hook: uses lookup hook (evidence: `src/component/CitySelect.js`)
- Legacy Page → Prayer Countdown: renders timer (evidence: `src/component/Page.js`)