How touficnabi/iftar-time works
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: App.js App · newPage.js Prayer Page · manualLocation.js Manual Location · Timer.js Prayer Countdown
Components 20
Location
- App
src/App.js - Manual Location
src/component/manualLocation.js - Change City UI
src/component/changeCity.js
Prayer Times
- Prayer Page
src/component/newPage.js - Method Lookup
src/hooks/useMethods.js - Prayer Countdown
src/component/Timer.js - Countdown Display
src/component/Counter.js - Method Controls
src/component/Footer.js - Loading Indicator
src/component/Loading.js
City Selection
- City Selector
src/component/CitySelect.js - City Lookup Hook
src/component/useGetCity.js - Select City
src/component/SelectCity.js
Legacy UI
- Legacy Page
src/component/Page.js - Legacy Timer
src/component/Timer.old.js
Other components
- Visitor
- Browser Geolocation
- IP Geolocation API
- OpenWeather Geocoding
- CountriesNow API
- AlAdhan API
Connections 19
- Visitor → App: opens app
- App → Browser Geolocation: requests location
src/App.js - App → IP Geolocation API: looks up location
src/App.js - App → OpenWeather Geocoding: reverse geocodes
src/App.js - App → Manual Location: renders selector
src/App.js - App → Prayer Page: renders prayer page
src/App.js - App → Loading Indicator: renders while waiting
src/App.js - Manual Location → Change City UI: renders dialog
src/component/manualLocation.js - Manual Location → CountriesNow API: loads countries
src/component/manualLocation.js - Manual Location → OpenWeather Geocoding: geocodes selection
src/component/manualLocation.js - Prayer Page → AlAdhan API: fetches calendar
src/component/newPage.js - Prayer Page → Method Lookup: uses method lookup
src/component/newPage.js - Method Lookup → AlAdhan API: fetches methods
src/hooks/useMethods.js - Prayer Page → Prayer Countdown: renders countdown
src/component/newPage.js - Prayer Countdown → Countdown Display: renders display
src/component/Timer.js - Prayer Page → Method Controls: renders controls
src/component/newPage.js - Prayer Page → Loading Indicator: renders while waiting
src/component/newPage.js - City Selector → City Lookup Hook: uses lookup hook
src/component/CitySelect.js - Legacy Page → Prayer Countdown: renders timer
src/component/Page.js