How hamzaelmanzari/quran works
Quran Sound is a responsive Quran browsing and recitation app. The main workflow loads validated surah metadata from Itqan, shares it across the app, and presents an index, search, and surah details; audio playback uses the returned audio URLs. Routing and providers form the application shell, while search and theme are separate capabilities. README documents multi-riwayat selection and accessibility; some feature wiring is not shown in the excerpts, so uncertain links are omitted or marked optional.
Main entry points: AppRouter.jsx App router · main.jsx React entry · App.jsx Page shell · QuranDataProvider.jsx Quran provider
Components 24
Application shell
- React entry
main.jsx - App router
src/app/AppRouter.jsx - Page shell
src/app/App.jsx - Error boundary
src/app/ErrorBoundary.jsx - Query client
src/app/queryClient.js - Site header
src/shared/components/Header.jsx - Site footer
src/shared/components/Footer.jsx
Quran data and pages
- Quran provider
src/features/quran/QuranDataProvider.jsx - Quran context
src/features/quran/quranDataContext.js - Quran queries
src/features/quran/api/quranQueries.js - Itqan API client
src/features/quran/api/itqanApi.js - Surah index
src/features/quran/pages/IndexPage.jsx - Surah detail
src/features/quran/pages/SurahPage.jsx - Detail loader
src/features/quran/pages/surahPageLoader.js - Surah navigation
src/features/quran/hooks/useSurah.js - Surah utilities
src/features/quran/utils/quranData.js
Search
- Search provider
src/features/search/SearchProvider.jsx - Search context
src/features/search/searchContext.js - Search page
src/features/search/SearchPage.jsx - Search hook
src/features/search/useSearch.js
Playback and appearance
- Audio playback
src/features/audio/useAudio.js - Dark mode
src/features/theme/useDarkMode.js
Other components
- Listener
- Itqan CMS
Connections 24
- Listener → React entry: opens
main.jsx - React entry → Error boundary: wraps
main.jsx - React entry → App router: renders
main.jsx - App router → Query client: provides
src/app/AppRouter.jsx - App router → Quran provider: provides
src/app/AppRouter.jsx - App router → Search provider: provides
src/app/AppRouter.jsx - App router → Page shell: renders
src/app/AppRouter.jsx - Page shell → Site header: renders
src/app/App.jsx - Page shell → Site footer: renders
src/app/App.jsx - App router → Surah index: routes to
src/app/AppRouter.jsx - App router → Search page: routes to
src/app/AppRouter.jsx - App router → Surah detail: routes to
src/app/AppRouter.jsx - App router → Detail loader: lazy loads
src/app/AppRouter.jsx - Quran provider → Quran queries: loads through
src/features/quran/QuranDataProvider.jsx - Quran provider → Quran context: publishes
src/features/quran/QuranDataProvider.jsx - Quran queries → Itqan API client: calls
src/features/quran/api/quranQueries.js - Itqan API client → Itqan CMS: fetches metadata
src/features/quran/api/itqanApi.js - Search provider → Search context: uses
src/features/search/SearchProvider.jsx - Search hook → Surah utilities: filters with
src/features/search/useSearch.js - Search hook → Quran context: reads via hook
src/features/search/useSearch.js - Surah navigation → Surah utilities: resolves with
src/features/quran/hooks/useSurah.js - Surah navigation → Quran context: reads via hook
src/features/quran/hooks/useSurah.js - Surah detail → Audio playback: may play audio
- Listener → Dark mode: chooses theme