# awahids/bn-mobile architecture

> Architecture diagram of the GitHub repository awahids/bn-mobile, 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/awahids/bn-mobile
- Repository: https://github.com/awahids/bn-mobile

## Overview

This is a browser-based Islamic learning and practice app: users enter learning modules, study or practice, then review progress and personal activity. The graph highlights Quran memorization, Hijaiyah writing, Tajwid, Dhikr, and quizzes alongside profile, habits, and progress areas. Sampled controllers show several data and persistence interactions; API and storage details are only partially available, and the README is empty, so uncertain service wiring is omitted.

Main entry points: [`app/quran/_hooks/use-quran-page-controller.ts`](https://github.com/awahids/bn-mobile/blob/master/app/quran/_hooks/use-quran-page-controller.ts) (Quran study), [`hooks/use-audio.ts`](https://github.com/awahids/bn-mobile/blob/master/hooks/use-audio.ts) (Audio playback), [`hooks/use-quran.ts`](https://github.com/awahids/bn-mobile/blob/master/hooks/use-quran.ts) (Domain data hooks), [`app/hijaiyah/_hooks/use-hijaiyah-page-controller.ts`](https://github.com/awahids/bn-mobile/blob/master/app/hijaiyah/_hooks/use-hijaiyah-page-controller.ts) (Letter learning)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App experience"]
  node_home["Home<br/>[page.tsx]"]
  node_homecontent["Home content"]
  node_auth["Authentication<br/>[auth-provider.tsx]"]
  node_login["Login"]
end

subgraph group_learning["Learning practice"]
  node_quran["Quran study"]
  node_quranview["Quran interface"]
  node_hafalan["Memorization progress<br/>[hafalan-storage.ts]"]
  node_hijaiyah["Letter learning"]
  node_writing["Writing practice<br/>[writing-canvas.tsx]"]
  node_tajwid["Tajwid study"]
  node_dhikr["Dhikr practice"]
  node_quiz["Quiz session"]
  node_audio["Audio playback<br/>[use-audio.ts]"]
end

subgraph group_personal["Personal tracking"]
  node_progress["Progress view"]
  node_profile["Profile view"]
  node_habits["Habit tracking<br/>[use-habits.ts]"]
end

subgraph group_services["Data and state"]
  node_api["API client<br/>[api-client.ts]"]
  node_hooks["Domain data hooks<br/>[use-quran.ts]"]
  node_storage["Storage operations<br/>[storage.ts]"]
  node_database[("Database<br/>[prisma.ts]")]
  node_authstorage["Auth token storage<br/>[auth-storage.ts]"]
  node_appstate["Shared app state<br/>[app-store.ts]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_home
node_learner -->|"signs in"| node_login
node_home -->|"renders"| node_homecontent
node_quranview -->|"uses controller"| node_quran
node_quran -->|"loads Quran data"| node_hooks
node_quran -->|"creates bookmarks"| node_api
node_quran -->|"reads and writes"| node_hafalan
node_quran -->|"updates selection"| node_appstate
node_quran -->|"plays recitation"| node_audio
node_hijaiyah -->|"loads letters"| node_hooks
node_hijaiyah -->|"provides canvas ref"| node_writing
node_hijaiyah -->|"plays letter audio"| node_audio
node_tajwid -->|"loads rules"| node_hooks
node_tajwid -->|"plays examples"| node_audio
node_dhikr -->|"updates counters"| node_api
node_dhikr -->|"plays audio"| node_audio
node_quiz -->|"loads questions"| node_hooks
node_quiz -->|"records attempt"| node_api
node_storage -->|"queries and writes"| node_database
node_login -->|"submits credentials"| node_auth
node_auth -->|"stores token"| node_authstorage

click node_home "https://github.com/awahids/bn-mobile/blob/master/app/page.tsx"
click node_homecontent "https://github.com/awahids/bn-mobile/blob/master/app/_components/home-page-content.tsx"
click node_auth "https://github.com/awahids/bn-mobile/blob/master/components/features/auth/auth-provider.tsx"
click node_login "https://github.com/awahids/bn-mobile/blob/master/app/login/_components/login-page-content.tsx"
click node_quran "https://github.com/awahids/bn-mobile/blob/master/app/quran/_hooks/use-quran-page-controller.ts"
click node_quranview "https://github.com/awahids/bn-mobile/blob/master/app/quran/_components/quran-page-content.tsx"
click node_hafalan "https://github.com/awahids/bn-mobile/blob/master/lib/hafalan-storage.ts"
click node_hijaiyah "https://github.com/awahids/bn-mobile/blob/master/app/hijaiyah/_hooks/use-hijaiyah-page-controller.ts"
click node_writing "https://github.com/awahids/bn-mobile/blob/master/components/features/hijaiyah/writing-canvas.tsx"
click node_tajwid "https://github.com/awahids/bn-mobile/blob/master/app/tajwid/_hooks/use-tajwid-page-controller.ts"
click node_dhikr "https://github.com/awahids/bn-mobile/blob/master/app/dhikr/_hooks/use-dhikr-page-controller.ts"
click node_quiz "https://github.com/awahids/bn-mobile/blob/master/app/quiz/play/%5BcategoryId%5D/_hooks/use-quiz-play-controller.ts"
click node_audio "https://github.com/awahids/bn-mobile/blob/master/hooks/use-audio.ts"
click node_progress "https://github.com/awahids/bn-mobile/blob/master/app/progress/_hooks/use-progress-page-data.ts"
click node_profile "https://github.com/awahids/bn-mobile/blob/master/app/profile/_hooks/use-profile-page-data.ts"
click node_habits "https://github.com/awahids/bn-mobile/blob/master/hooks/use-habits.ts"
click node_api "https://github.com/awahids/bn-mobile/blob/master/lib/api-client.ts"
click node_hooks "https://github.com/awahids/bn-mobile/blob/master/hooks/use-quran.ts"
click node_storage "https://github.com/awahids/bn-mobile/blob/master/lib/storage.ts"
click node_database "https://github.com/awahids/bn-mobile/blob/master/lib/prisma.ts"
click node_authstorage "https://github.com/awahids/bn-mobile/blob/master/lib/auth-storage.ts"
click node_appstate "https://github.com/awahids/bn-mobile/blob/master/store/app-store.ts"

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_home,node_homecontent,node_auth,node_login toneBlue
class node_quran,node_quranview,node_hafalan,node_hijaiyah,node_writing,node_tajwid,node_dhikr,node_quiz,node_audio toneAmber
class node_progress,node_profile,node_habits toneMint
class node_api,node_hooks,node_storage,node_database,node_authstorage,node_appstate toneRose
class node_learner toneIndigo
```

## Components

### App experience

- [Home](https://github.com/awahids/bn-mobile/blob/master/app/page.tsx): `app/page.tsx`
- [Home content](https://github.com/awahids/bn-mobile/blob/master/app/_components/home-page-content.tsx): `app/_components/home-page-content.tsx`
- [Authentication](https://github.com/awahids/bn-mobile/blob/master/components/features/auth/auth-provider.tsx): `components/features/auth/auth-provider.tsx`
- [Login](https://github.com/awahids/bn-mobile/blob/master/app/login/_components/login-page-content.tsx): `app/login/_components/login-page-content.tsx`

### Learning practice

- [Quran study](https://github.com/awahids/bn-mobile/blob/master/app/quran/_hooks/use-quran-page-controller.ts): `app/quran/_hooks/use-quran-page-controller.ts`
- [Quran interface](https://github.com/awahids/bn-mobile/blob/master/app/quran/_components/quran-page-content.tsx): `app/quran/_components/quran-page-content.tsx`
- [Memorization progress](https://github.com/awahids/bn-mobile/blob/master/lib/hafalan-storage.ts): `lib/hafalan-storage.ts`
- [Letter learning](https://github.com/awahids/bn-mobile/blob/master/app/hijaiyah/_hooks/use-hijaiyah-page-controller.ts): `app/hijaiyah/_hooks/use-hijaiyah-page-controller.ts`
- [Writing practice](https://github.com/awahids/bn-mobile/blob/master/components/features/hijaiyah/writing-canvas.tsx): `components/features/hijaiyah/writing-canvas.tsx`
- [Tajwid study](https://github.com/awahids/bn-mobile/blob/master/app/tajwid/_hooks/use-tajwid-page-controller.ts): `app/tajwid/_hooks/use-tajwid-page-controller.ts`
- [Dhikr practice](https://github.com/awahids/bn-mobile/blob/master/app/dhikr/_hooks/use-dhikr-page-controller.ts): `app/dhikr/_hooks/use-dhikr-page-controller.ts`
- [Quiz session](https://github.com/awahids/bn-mobile/blob/master/app/quiz/play/%5BcategoryId%5D/_hooks/use-quiz-play-controller.ts): `app/quiz/play/[categoryId]/_hooks/use-quiz-play-controller.ts`
- [Audio playback](https://github.com/awahids/bn-mobile/blob/master/hooks/use-audio.ts): `hooks/use-audio.ts`

### Personal tracking

- [Progress view](https://github.com/awahids/bn-mobile/blob/master/app/progress/_hooks/use-progress-page-data.ts): `app/progress/_hooks/use-progress-page-data.ts`
- [Profile view](https://github.com/awahids/bn-mobile/blob/master/app/profile/_hooks/use-profile-page-data.ts): `app/profile/_hooks/use-profile-page-data.ts`
- [Habit tracking](https://github.com/awahids/bn-mobile/blob/master/hooks/use-habits.ts): `hooks/use-habits.ts`

### Data and state

- [API client](https://github.com/awahids/bn-mobile/blob/master/lib/api-client.ts): `lib/api-client.ts`
- [Domain data hooks](https://github.com/awahids/bn-mobile/blob/master/hooks/use-quran.ts): `hooks/use-quran.ts`
- [Storage operations](https://github.com/awahids/bn-mobile/blob/master/lib/storage.ts): `lib/storage.ts`
- [Database](https://github.com/awahids/bn-mobile/blob/master/lib/prisma.ts): `lib/prisma.ts`
- [Auth token storage](https://github.com/awahids/bn-mobile/blob/master/lib/auth-storage.ts): `lib/auth-storage.ts`
- [Shared app state](https://github.com/awahids/bn-mobile/blob/master/store/app-store.ts): `store/app-store.ts`

### Other components

- **Learner**

## Connections

- Learner → Home: opens
- Learner → Login: signs in
- Home → Home content: renders
- Quran interface → Quran study: uses controller
- Quran study → Domain data hooks: loads Quran data
- Quran study → API client: creates bookmarks
- Quran study → Memorization progress: reads and writes
- Quran study → Shared app state: updates selection
- Quran study → Audio playback: plays recitation
- Letter learning → Domain data hooks: loads letters
- Letter learning → Writing practice: provides canvas ref
- Letter learning → Audio playback: plays letter audio
- Tajwid study → Domain data hooks: loads rules
- Tajwid study → Audio playback: plays examples
- Dhikr practice → API client: updates counters
- Dhikr practice → Audio playback: plays audio
- Quiz session → Domain data hooks: loads questions
- Quiz session → API client: records attempt
- Storage operations → Database: queries and writes
- Login → Authentication: submits credentials
- Authentication → Auth token storage: stores token