# lukyr/sahabat-quran architecture

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

- Interactive diagram: https://gitdiagram.com/lukyr/sahabat-quran
- Repository: https://github.com/lukyr/sahabat-quran

## Overview

Sahabat Quran is a Quran-exploration web app with AI chat, surah browsing, verse sharing, image generation, and saved chat history. The visible UI is composed in App.tsx; Quran retrieval is implemented separately in quranService, while Gemini chat and image generation have server-side proxy options. Supabase supports authentication and conversation persistence. The README describes setup rather than product behavior, and several UI/service implementations were not sampled, so uncertain runtime connections are omitted.

Main entry points: [`App.tsx`](https://github.com/lukyr/sahabat-quran/blob/main/App.tsx) (App shell), [`services/geminiService.ts`](https://github.com/lukyr/sahabat-quran/blob/main/services/geminiService.ts) (Gemini client), [`services/supabaseClient.ts`](https://github.com/lukyr/sahabat-quran/blob/main/services/supabaseClient.ts) (Supabase client), [`services/quranService.ts`](https://github.com/lukyr/sahabat-quran/blob/main/services/quranService.ts) (Quran retrieval)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Quran experience"]
  node_app["App shell<br/>[App.tsx]"]
  node_chat["AI chat<br/>[ChatWindow.tsx]"]
  node_browser["Surah browser<br/>[SurahBrowser.tsx]"]
  node_share["Verse sharing<br/>[ShareModal.tsx]"]
  node_historyui["History UI<br/>[HistoryModal.tsx]"]
  node_authui["Sign-in UI<br/>[AuthModal.tsx]"]
  node_toolpanel["Chat tools<br/>[ToolPanel.tsx]"]
end

subgraph group_ai["AI and Quran data"]
  node_geminiservice["Gemini client<br/>[geminiService.ts]"]
  node_geminiproxy["Gemini proxy<br/>[gemini.ts]"]
  node_imageproxy["Image proxy<br/>[gemini-image.ts]"]
  node_quranservice["Quran retrieval<br/>[quranService.ts]"]
end

subgraph group_account["Accounts and history"]
  node_chatservice["Chat history"]
  node_supabaseclient["Supabase client<br/>[supabaseClient.ts]"]
end

subgraph group_platform["App services"]
  node_analytics["Analytics"]
  node_errors["Error handling<br/>[errorHandler.ts]"]
  node_server["Express API<br/>[index.ts]"]
end

node_user(("Visitor"))
node_quranapi["Quran.com API"]
node_gemini["Google Gemini"]
node_imagen["Imagen"]
node_supabase[("Supabase")]

node_user -->|"opens"| node_app
node_app -->|"renders"| node_chat
node_app -->|"renders"| node_browser
node_app -->|"renders"| node_share
node_app -->|"initializes"| node_analytics
node_app -->|"observes auth"| node_supabaseclient
node_browser -->|"requests surah view"| node_app
node_quranservice -->|"fetches chapters, verses"| node_quranapi
node_geminiservice -.->|"proxies chat"| node_geminiproxy
node_geminiservice -.->|"generates content"| node_gemini
node_geminiproxy -->|"generates content"| node_gemini
node_server -->|"generates content"| node_gemini
node_geminiservice -.->|"proxies images"| node_imageproxy
node_geminiservice -.->|"generates images"| node_imagen
node_imageproxy -->|"generates images"| node_imagen
node_authui -->|"signs in"| node_supabaseclient
node_chatservice -->|"reads and writes"| node_supabaseclient
node_supabaseclient -->|"connects"| node_supabase
node_geminiservice -->|"classifies failures"| node_errors
node_quranservice -->|"classifies failures"| node_errors

click node_app "https://github.com/lukyr/sahabat-quran/blob/main/App.tsx"
click node_chat "https://github.com/lukyr/sahabat-quran/blob/main/components/ChatWindow.tsx"
click node_browser "https://github.com/lukyr/sahabat-quran/blob/main/components/SurahBrowser.tsx"
click node_share "https://github.com/lukyr/sahabat-quran/blob/main/components/ShareModal.tsx"
click node_historyui "https://github.com/lukyr/sahabat-quran/blob/main/components/HistoryModal.tsx"
click node_authui "https://github.com/lukyr/sahabat-quran/blob/main/components/AuthModal.tsx"
click node_toolpanel "https://github.com/lukyr/sahabat-quran/blob/main/components/ToolPanel.tsx"
click node_geminiservice "https://github.com/lukyr/sahabat-quran/blob/main/services/geminiService.ts"
click node_geminiproxy "https://github.com/lukyr/sahabat-quran/blob/main/api/gemini.ts"
click node_imageproxy "https://github.com/lukyr/sahabat-quran/blob/main/api/gemini-image.ts"
click node_quranservice "https://github.com/lukyr/sahabat-quran/blob/main/services/quranService.ts"
click node_chatservice "https://github.com/lukyr/sahabat-quran/blob/main/services/chatHistoryService.ts"
click node_supabaseclient "https://github.com/lukyr/sahabat-quran/blob/main/services/supabaseClient.ts"
click node_analytics "https://github.com/lukyr/sahabat-quran/blob/main/services/analyticsService.ts"
click node_errors "https://github.com/lukyr/sahabat-quran/blob/main/utils/errorHandler.ts"
click node_server "https://github.com/lukyr/sahabat-quran/blob/main/server/index.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_app,node_chat,node_browser,node_share,node_historyui,node_authui,node_toolpanel toneBlue
class node_geminiservice,node_geminiproxy,node_imageproxy,node_quranservice,node_supabase toneAmber
class node_chatservice,node_supabaseclient,node_quranapi toneMint
class node_analytics,node_errors,node_server toneRose
class node_user,node_gemini,node_imagen toneIndigo
```

## Components

### Quran experience

- [App shell](https://github.com/lukyr/sahabat-quran/blob/main/App.tsx): `App.tsx`
- [AI chat](https://github.com/lukyr/sahabat-quran/blob/main/components/ChatWindow.tsx): `components/ChatWindow.tsx`
- [Surah browser](https://github.com/lukyr/sahabat-quran/blob/main/components/SurahBrowser.tsx): `components/SurahBrowser.tsx`
- [Verse sharing](https://github.com/lukyr/sahabat-quran/blob/main/components/ShareModal.tsx): `components/ShareModal.tsx`
- [History UI](https://github.com/lukyr/sahabat-quran/blob/main/components/HistoryModal.tsx): `components/HistoryModal.tsx`
- [Sign-in UI](https://github.com/lukyr/sahabat-quran/blob/main/components/AuthModal.tsx): `components/AuthModal.tsx`
- [Chat tools](https://github.com/lukyr/sahabat-quran/blob/main/components/ToolPanel.tsx): `components/ToolPanel.tsx`

### AI and Quran data

- [Gemini client](https://github.com/lukyr/sahabat-quran/blob/main/services/geminiService.ts): `services/geminiService.ts`
- [Gemini proxy](https://github.com/lukyr/sahabat-quran/blob/main/api/gemini.ts): `api/gemini.ts`
- [Image proxy](https://github.com/lukyr/sahabat-quran/blob/main/api/gemini-image.ts): `api/gemini-image.ts`
- [Quran retrieval](https://github.com/lukyr/sahabat-quran/blob/main/services/quranService.ts): `services/quranService.ts`

### Accounts and history

- [Chat history](https://github.com/lukyr/sahabat-quran/blob/main/services/chatHistoryService.ts): `services/chatHistoryService.ts`
- [Supabase client](https://github.com/lukyr/sahabat-quran/blob/main/services/supabaseClient.ts): `services/supabaseClient.ts`

### App services

- [Analytics](https://github.com/lukyr/sahabat-quran/blob/main/services/analyticsService.ts): `services/analyticsService.ts`
- [Error handling](https://github.com/lukyr/sahabat-quran/blob/main/utils/errorHandler.ts): `utils/errorHandler.ts`
- [Express API](https://github.com/lukyr/sahabat-quran/blob/main/server/index.ts): `server/index.ts`

### Other components

- **Visitor**
- **Quran.com API**
- **Google Gemini**
- **Imagen**
- **Supabase**

## Connections

- Visitor → App shell: opens
- App shell → AI chat: renders
- App shell → Surah browser: renders
- App shell → Verse sharing: renders
- App shell → Analytics: initializes
- App shell → Supabase client: observes auth
- Surah browser → App shell: requests surah view
- Quran retrieval → Quran.com API: fetches chapters, verses
- Gemini client → Gemini proxy: proxies chat
- Gemini client → Google Gemini: generates content
- Gemini proxy → Google Gemini: generates content
- Express API → Google Gemini: generates content
- Gemini client → Image proxy: proxies images
- Gemini client → Imagen: generates images
- Image proxy → Imagen: generates images
- Sign-in UI → Supabase client: signs in
- Chat history → Supabase client: reads and writes
- Supabase client → Supabase: connects
- Gemini client → Error handling: classifies failures
- Quran retrieval → Error handling: classifies failures