# aldikurniawan19/ramadhan-app architecture

> Architecture diagram of the GitHub repository aldikurniawan19/ramadhan-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aldikurniawan19/ramadhan-app
- Repository: https://github.com/aldikurniawan19/ramadhan-app

## Overview

Aplikasi Ramadhan is a user-facing Ramadan worship PWA. Users register or sign in, then use the main app to view prayer times and Ramadan status, read Quran and track reading, record fasting, and access devotional tools; account-backed progress persists per user. The map preserves the README’s major feature areas, including audio, duas, tasbih, Qibla, calendar, Eid, and reminders. API handlers and prayer-time code were sampled; links for other documented capabilities are limited to routes and modules shown in the tree.

Main entry points: [`app/components/NotificationManager.tsx`](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/NotificationManager.tsx) (Reminders), [`app/api/prayer-times/route.ts`](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/prayer-times/route.ts) (Prayer Times API), [`app/(auth)/login/page.tsx`](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(auth)/login/page.tsx) (Sign In / Register), [`app/(main)/layout.tsx`](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/layout.tsx) (Main App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_account["Accounts & App Shell"]
  node_authpages["Sign In / Register<br/>[page.tsx]"]
  node_mainapp["Main App<br/>[layout.tsx]"]
  node_profile["User Profile<br/>[page.tsx]"]
  node_serviceworker["PWA Service Worker<br/>[sw.js]"]
end

subgraph group_worship["Worship &amp; Ramadan"]
  node_home["Home &amp; Daily Verse<br/>[page.tsx]"]
  node_prayerpage["Prayer Schedule<br/>[page.tsx]"]
  node_prayercontext["Prayer State"]
  node_puasapage["Fasting Calendar<br/>[page.tsx]"]
  node_puasacontext["Fasting State<br/>[PuasaContext.tsx]"]
  node_duapage["Daily Duas<br/>[page.tsx]"]
  node_tasbih["Digital Tasbih<br/>[TasbihModal.tsx]"]
  node_qiblapage["Qibla Compass<br/>[page.tsx]"]
  node_eid["Eid Countdown<br/>[EidCountdown.tsx]"]
  node_notifications["Reminders"]
  node_notifpanel["Notification Panel"]
end

subgraph group_quran["Quran Reading"]
  node_quranlist["Surah Browser<br/>[page.tsx]"]
  node_quranreader["Quran Reader<br/>[page.tsx]"]
  node_audioplayer["Murottal Player<br/>[AudioPlayer.tsx]"]
end

subgraph group_services["APIs &amp; Persistence"]
  node_authapi["Authentication<br/>[route.ts]"]
  node_registration["Registration<br/>[route.ts]"]
  node_authlib["Auth Config<br/>[auth.ts]"]
  node_prayerapi["Prayer Times API<br/>[route.ts]"]
  node_puasaapi["Fasting Logs API<br/>[route.ts]"]
  node_doaapi["Dua API<br/>[route.ts]"]
  node_qiblaapi["Qibla API<br/>[route.ts]"]
  node_eidapi["Eid Info API<br/>[route.ts]"]
  node_ramadanapi["Ramadan Info API<br/>[route.ts]"]
  node_historyapi["Reading History API<br/>[route.ts]"]
  node_cityapi["City Settings API<br/>[route.ts]"]
  node_database[("PostgreSQL")]
end

node_visitor(("User"))
node_aladhan["Aladhan API"]
node_quranservice["EQuran API"]

node_visitor -->|"opens account"| node_authpages
node_authpages -->|"signs in"| node_authapi
node_authpages -->|"registers"| node_registration
node_authapi -->|"uses config"| node_authlib
node_authlib -->|"reads credentials"| node_database
node_registration -->|"creates account"| node_database
node_visitor -->|"opens app"| node_mainapp
node_mainapp -->|"shows home"| node_home
node_visitor -->|"checks times"| node_prayerpage
node_prayerpage -->|"uses state"| node_prayercontext
node_prayercontext -->|"fetches times"| node_prayerapi
node_prayerapi -->|"checks session"| node_authlib
node_prayerapi -->|"reads city"| node_database
node_prayerapi -->|"requests timings"| node_aladhan
node_visitor -->|"tracks fasting"| node_puasapage
node_puasapage -->|"uses state"| node_puasacontext
node_puasacontext -->|"loads and updates"| node_puasaapi
node_puasaapi -->|"reads and writes logs"| node_database
node_visitor -->|"opens duas"| node_duapage
node_duapage -->|"loads duas"| node_doaapi
node_doaapi -.->|"tries dua source"| node_quranservice
node_visitor -->|"counts dhikr"| node_tasbih
node_visitor -->|"finds direction"| node_qiblapage
node_qiblapage -->|"loads direction"| node_qiblaapi
node_qiblaapi -->|"reads city"| node_database
node_qiblaapi -->|"requests coordinates and bearing"| node_aladhan
node_home -->|"shows countdown"| node_eid
node_eid -->|"loads Eid date"| node_eidapi
node_eidapi -->|"converts Hijri dates"| node_aladhan
node_home -->|"loads Ramadan status"| node_ramadanapi
node_mainapp -->|"runs reminders"| node_notifications
node_notifications -->|"reads prayer times"| node_prayercontext
node_notifications -->|"reads fasting status"| node_puasacontext
node_notifications -->|"fetches reading history"| node_historyapi
node_notifications -->|"adds notifications"| node_notifpanel
node_visitor -->|"browses surahs"| node_quranlist
node_quranlist -->|"opens surah"| node_quranreader
node_quranreader -->|"saves reading position"| node_historyapi
node_quranreader -->|"plays recitation"| node_audioplayer
node_historyapi -->|"reads and writes history"| node_database
node_visitor -->|"manages account"| node_profile
node_profile -->|"updates city"| node_cityapi
node_cityapi -->|"updates user"| node_database
node_visitor -.->|"installs PWA"| node_serviceworker

click node_authpages "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(auth)/login/page.tsx"
click node_authapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/auth/%5B...nextauth%5D/route.ts"
click node_registration "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/register/route.ts"
click node_authlib "https://github.com/aldikurniawan19/ramadhan-app/blob/main/lib/auth.ts"
click node_mainapp "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/layout.tsx"
click node_home "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/page.tsx"
click node_prayerpage "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/jadwal-sholat/page.tsx"
click node_prayercontext "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/context/PrayerTimesContext.tsx"
click node_prayerapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/prayer-times/route.ts"
click node_puasapage "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/kalender/page.tsx"
click node_puasacontext "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/context/PuasaContext.tsx"
click node_puasaapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/puasa/route.ts"
click node_duapage "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/doa/page.tsx"
click node_doaapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/doa/route.ts"
click node_tasbih "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/TasbihModal.tsx"
click node_qiblapage "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/kiblat/page.tsx"
click node_qiblaapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/qibla/route.ts"
click node_eid "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/EidCountdown.tsx"
click node_eidapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/eid-info/route.ts"
click node_ramadanapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/ramadan-info/route.ts"
click node_notifications "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/NotificationManager.tsx"
click node_notifpanel "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/NotificationPanel.tsx"
click node_quranlist "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/quran/page.tsx"
click node_quranreader "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/quran/%5Bnomor%5D/page.tsx"
click node_audioplayer "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/AudioPlayer.tsx"
click node_historyapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/quran-history/route.ts"
click node_profile "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/profil/page.tsx"
click node_cityapi "https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/user/city/route.ts"
click node_serviceworker "https://github.com/aldikurniawan19/ramadhan-app/blob/main/public/sw.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_authpages,node_mainapp,node_profile,node_serviceworker,node_visitor toneBlue
class node_home,node_prayerpage,node_prayercontext,node_puasapage,node_puasacontext,node_duapage,node_tasbih,node_qiblapage,node_eid,node_notifications,node_notifpanel toneAmber
class node_quranlist,node_quranreader,node_audioplayer,node_aladhan,node_quranservice toneMint
class node_authapi,node_registration,node_authlib,node_prayerapi,node_puasaapi,node_doaapi,node_qiblaapi,node_eidapi,node_ramadanapi,node_historyapi,node_cityapi,node_database toneRose
```

## Components

### Accounts & App Shell

- [Sign In / Register](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(auth)/login/page.tsx): `app/(auth)/login/page.tsx`
- [Main App](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/layout.tsx): `app/(main)/layout.tsx`
- [User Profile](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/profil/page.tsx): `app/(main)/profil/page.tsx`
- [PWA Service Worker](https://github.com/aldikurniawan19/ramadhan-app/blob/main/public/sw.js): `public/sw.js`

### Worship & Ramadan

- [Home & Daily Verse](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/page.tsx): `app/(main)/page.tsx`
- [Prayer Schedule](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/jadwal-sholat/page.tsx): `app/(main)/jadwal-sholat/page.tsx`
- [Prayer State](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/context/PrayerTimesContext.tsx): `app/context/PrayerTimesContext.tsx`
- [Fasting Calendar](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/kalender/page.tsx): `app/(main)/kalender/page.tsx`
- [Fasting State](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/context/PuasaContext.tsx): `app/context/PuasaContext.tsx`
- [Daily Duas](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/doa/page.tsx): `app/(main)/doa/page.tsx`
- [Digital Tasbih](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/TasbihModal.tsx): `app/components/TasbihModal.tsx`
- [Qibla Compass](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/kiblat/page.tsx): `app/(main)/kiblat/page.tsx`
- [Eid Countdown](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/EidCountdown.tsx): `app/components/EidCountdown.tsx`
- [Reminders](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/NotificationManager.tsx): `app/components/NotificationManager.tsx`
- [Notification Panel](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/NotificationPanel.tsx): `app/components/NotificationPanel.tsx`

### Quran Reading

- [Surah Browser](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/quran/page.tsx): `app/(main)/quran/page.tsx`
- [Quran Reader](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/(main)/quran/%5Bnomor%5D/page.tsx): `app/(main)/quran/[nomor]/page.tsx`
- [Murottal Player](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/components/AudioPlayer.tsx): `app/components/AudioPlayer.tsx`

### APIs & Persistence

- [Authentication](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/auth/%5B...nextauth%5D/route.ts): `app/api/auth/[...nextauth]/route.ts`
- [Registration](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/register/route.ts): `app/api/register/route.ts`
- [Auth Config](https://github.com/aldikurniawan19/ramadhan-app/blob/main/lib/auth.ts): `lib/auth.ts`
- [Prayer Times API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/prayer-times/route.ts): `app/api/prayer-times/route.ts`
- [Fasting Logs API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/puasa/route.ts): `app/api/puasa/route.ts`
- [Dua API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/doa/route.ts): `app/api/doa/route.ts`
- [Qibla API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/qibla/route.ts): `app/api/qibla/route.ts`
- [Eid Info API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/eid-info/route.ts): `app/api/eid-info/route.ts`
- [Ramadan Info API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/ramadan-info/route.ts): `app/api/ramadan-info/route.ts`
- [Reading History API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/quran-history/route.ts): `app/api/quran-history/route.ts`
- [City Settings API](https://github.com/aldikurniawan19/ramadhan-app/blob/main/app/api/user/city/route.ts): `app/api/user/city/route.ts`
- **PostgreSQL**

### Other components

- **User**
- **Aladhan API**
- **EQuran API**

## Connections

- User → Sign In / Register: opens account
- Sign In / Register → Authentication: signs in
- Sign In / Register → Registration: registers
- Authentication → Auth Config: uses config
- Auth Config → PostgreSQL: reads credentials
- Registration → PostgreSQL: creates account
- User → Main App: opens app
- Main App → Home & Daily Verse: shows home
- User → Prayer Schedule: checks times
- Prayer Schedule → Prayer State: uses state
- Prayer State → Prayer Times API: fetches times
- Prayer Times API → Auth Config: checks session
- Prayer Times API → PostgreSQL: reads city
- Prayer Times API → Aladhan API: requests timings
- User → Fasting Calendar: tracks fasting
- Fasting Calendar → Fasting State: uses state
- Fasting State → Fasting Logs API: loads and updates
- Fasting Logs API → PostgreSQL: reads and writes logs
- User → Daily Duas: opens duas
- Daily Duas → Dua API: loads duas
- Dua API → EQuran API: tries dua source
- User → Digital Tasbih: counts dhikr
- User → Qibla Compass: finds direction
- Qibla Compass → Qibla API: loads direction
- Qibla API → PostgreSQL: reads city
- Qibla API → Aladhan API: requests coordinates and bearing
- Home & Daily Verse → Eid Countdown: shows countdown
- Eid Countdown → Eid Info API: loads Eid date
- Eid Info API → Aladhan API: converts Hijri dates
- Home & Daily Verse → Ramadan Info API: loads Ramadan status
- Main App → Reminders: runs reminders
- Reminders → Prayer State: reads prayer times
- Reminders → Fasting State: reads fasting status
- Reminders → Reading History API: fetches reading history
- Reminders → Notification Panel: adds notifications
- User → Surah Browser: browses surahs
- Surah Browser → Quran Reader: opens surah
- Quran Reader → Reading History API: saves reading position
- Quran Reader → Murottal Player: plays recitation
- Reading History API → PostgreSQL: reads and writes history
- User → User Profile: manages account
- User Profile → City Settings API: updates city
- City Settings API → PostgreSQL: updates user
- User → PWA Service Worker: installs PWA