1
Ringkasan Proyek
Fathway Quran adalah aplikasi Next.js yang seluruh isinya berupa data statis di dalam repository. Tidak ada database, area admin, maupun pendaftaran akun, dan progres belajar tinggal di localStorage peramban README.md:1-31. Identitas situs didefinisikan di satu modul: SITE_NAME berisi "Fathway Quran" dan SITE_URL menunjuk ke https://quran-academy.alfath7.workers.dev src/lib/seo.ts:5-92.
Bentuk proyeknya sederhana: dua kelas bacaan yang masing-masing punya halaman daftar dan halaman pelajaran sendiri, satu tes pemahaman tajwid, dan seluruh bahan bacaan disimpan sebagai berkas TypeScript atau JSON di src/data/.
Peta kelas, konten, dan halaman
graph TD
HOME["/ — halaman utama"]
HOME --> PEMULA["/pemula"]
HOME --> LANJUTAN["/lanjutan"]
HOME --> TES["/tes"]
PRAKTIK["src/data/praktik-*.ts"] --> PEMULA
TAJWID["src/data/tajwid-pertemuan.ts"] --> LANJUTAN
QURAN["src/data/quran.json"] --> LANJUTAN
BANK["src/lib/quiz-data/"] --> TES
PEMULA --> LS[("localStorage")]
LANJUTAN --> LS
TES --> LS
style HOME fill:#8b5cf6,color:#fff
style PEMULA fill:#2d7d46,color:#fff
style LANJUTAN fill:#2d7d46,color:#fff
style TES fill:#2d7d46,color:#fff
style PRAKTIK fill:#336791,color:#fff
style TAJWID fill:#336791,color:#fff
style QURAN fill:#336791,color:#fff
style BANK fill:#336791,color:#fff
style LS fill:#336791,color:#fff
%% fig: Peta konten statis ke halaman publik
%% desc: Berkas di src/data dan bank soal mengisi tiga rute publik, sementara catatan belajar setiap pengunjung berhenti di localStorage.Halaman utama menampilkan dua kartu level yang dibangun langsung dari categoryInfo src/app/page.tsx:43-483. Rute tiap pelajaran ditentukan lessonHref: kategori praktik dibaca di /pemula/[slug], kategori tajwid di /lanjutan/[slug] src/lib/categories.ts:31-334.
Dua kelas bacaan
lessonCategories hanya memuat dua nilai, "praktik" dan "tajwid", sedangkan materiCategories menyaring "tajwid" saja src/lib/categories.ts:3-85. Setiap kategori membawa label, arabic, audience, dan description yang dipakai menu, halaman daftar, dan metadata src/lib/categories.ts:11-246.
LessonCategory | label | Audiens | yang diajarkan |
|---|---|---|---|
praktik | Pemula | yang belum bisa membaca Al-Qur'an, mulai dari nol | huruf hijaiyah, harakat, dan tanda baca sampai bisa membaca langsung dari mushaf |
tajwid | Lanjutan | yang sudah bisa membaca, tetapi belum lancar dan belum paham tajwid | memperlancar bacaan sambil memahami hukum tajwid di ayat dan mushaf |
Isi kedua baris tabel di atas berasal dari categoryInfo src/lib/categories.ts:11-246.
Pemula: 39 praktik
Jumlah praktik ditetapkan PRACTICE_TOTAL = 39 src/lib/practice-curriculum.ts:47. Praktik itu dibagi empat bagian dengan jumlah 7, 11, 11, dan 10 sehingga tiap nomor praktik punya bagiannya sendiri src/lib/practice-curriculum.ts:6-278. Objek pelajaran praktik dirakit helper practice(), yang menggabungkan guide dan blok latihan menjadi satu string content dan mengisi category: "praktik" src/data/praktik-dasar.ts:25-449. Rincian tiap bagian ada di Kurikulum Pemula.
Lanjutan: 26 pertemuan
Kelas tajwid ditetapkan MEETING_TOTAL = 26 src/lib/tajwid-curriculum.ts:410, terbagi lima tahap dengan jumlah 5, 5, 5, 5, dan 6 pertemuan src/lib/tajwid-curriculum.ts:6-3811. Daftar lessons kelas ini dipetakan dari meetings dengan category: "tajwid" dan position: (i + 1) * 10 src/data/tajwid-pertemuan.ts:870-87712. Rincian tiap tahap ada di Kurikulum Lanjutan.
Kedua kategori disatukan di lessonsByCategory: praktik digabung dari empat berkas data, tajwid dari satu berkas, lalu keduanya diurutkan menurut position src/lib/lessons.ts:22-2513.
Satu tes pemahaman
Satu percobaan tes berisi QUIZ_LENGTH soal, yaitu 10, dan skornya disimpan dengan kunci QUIZ_SCORES_KEY bernilai "tes-pemahaman" src/lib/quiz.ts:4-514. Halaman /tes menjelaskan bahwa setiap kali mulai, soal pilihan ganda diambil acak sehingga soalnya selalu berbeda src/app/tes/page.tsx:28-3115. Hanya kategori materi yang punya bank soal, yaitu tajwid src/lib/categories.ts:3-85. Cara penilaian dan pembahasannya dibahas di Tes Pemahaman Tajwid.
Konten tanpa backend
Pelajaran tinggal di src/data/ dan dibaca lewat src/lib/lessons.ts: empat berkas praktik-*.ts untuk 39 praktik Pemula, tajwid-pertemuan.ts untuk 26 pertemuan Lanjutan, dan src/lib/quiz-data/ untuk soal /tes README.md:18-2616. Teks ayat tidak disalin ke setiap pelajaran; src/data/quran.json hanya menyimpan ayat yang dilatih beserta halaman mushafnya, dan modul quran.ts membacanya untuk pelajaran Lanjutan src/lib/quran.ts:1-417.
Progres tidak pernah dikirim ke server. Kunci localStorage untuk kelas materi adalah "materi-progress" dan "terakhir-belajar" src/lib/learning-progress.ts:3-418, sedangkan skor tes memakai kunci "tes-pemahaman" src/lib/quiz.ts:4-514.
⚠️ Progres hanya hidup di peramban pengunjung. Tidak ada database maupun akun README.md:1-31, jadi tidak ada salinan di server saat data situs di peramban dibersihkan. Rinciannya ada di Progres Belajar di Perangkat.
Perintah dan deploy
Proyek berjalan sebagai paket quran-academy versi 0.1.0 dengan "type": "module" package.json:1-519. Dependensi intinya Next.js ^16.4.2 dan React ^19.3.1 package.json:21-2620. Script yang tersedia mencakup dev, build, lint, typecheck, test, serta preview dan deploy yang sama-sama menjalankan opennextjs-cloudflare build lebih dulu package.json:6-2021. Konfigurasi Worker ada di wrangler.jsonc: nama quran-academy, entry worker.ts, dan aset statis dari .open-next/assets dengan binding ASSETS wrangler.jsonc:1-1122. Alur pengujian dan deploy dijelaskan di Pengujian dan Deploy.
Rute publik
sitemap mendaftar seluruh halaman yang boleh diindeks: /, /lanjutan, /pemula, /tes, satu rute /tes/{kategori} per kategori materi, dan satu entri untuk setiap pelajaran dari listAllLessons() src/app/sitemap.ts:10-1723.
| Rute | Isi |
|---|---|
/ | kartu dua level dan statistik situs |
/pemula | daftar 39 praktik dalam empat bagian |
/lanjutan | daftar 26 pertemuan dalam lima tahap |
/tes | pilihan tes pemahaman per kategori materi |
/pemula/[slug], /lanjutan/[slug] | satu halaman pelajaran |
Bentuk halaman dan modulnya dibahas lebih jauh di Arsitektur Aplikasi; format isi pelajaran ada di Format Konten Teks dan susunan komponennya di Komponen UI Pelajaran.