Lompat ke konten
dokumentasi.id
Commit 120a248
v1
Star0

Kamu membaca versi lama. Halaman ini hanya bisa dibaca.

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-3. 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-9.

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.
Fig. 1: Peta konten statis ke halaman publikBerkas 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-48. Rute tiap pelajaran ditentukan lessonHref: kategori praktik dibaca di /pemula/[slug], kategori tajwid di /lanjutan/[slug] src/lib/categories.ts:31-33.

Dua kelas bacaan

lessonCategories hanya memuat dua nilai, "praktik" dan "tajwid", sedangkan materiCategories menyaring "tajwid" saja src/lib/categories.ts:3-8. Setiap kategori membawa label, arabic, audience, dan description yang dipakai menu, halaman daftar, dan metadata src/lib/categories.ts:11-24.

LessonCategorylabelAudiensyang diajarkan
praktikPemulayang belum bisa membaca Al-Qur'an, mulai dari nolhuruf hijaiyah, harakat, dan tanda baca sampai bisa membaca langsung dari mushaf
tajwidLanjutanyang sudah bisa membaca, tetapi belum lancar dan belum paham tajwidmemperlancar bacaan sambil memahami hukum tajwid di ayat dan mushaf

Isi kedua baris tabel di atas berasal dari categoryInfo src/lib/categories.ts:11-24.

Pemula: 39 praktik

Jumlah praktik ditetapkan PRACTICE_TOTAL = 39 src/lib/practice-curriculum.ts:4. 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-27. 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-44. Rincian tiap bagian ada di Kurikulum Pemula.

Lanjutan: 26 pertemuan

Kelas tajwid ditetapkan MEETING_TOTAL = 26 src/lib/tajwid-curriculum.ts:4, terbagi lima tahap dengan jumlah 5, 5, 5, 5, dan 6 pertemuan src/lib/tajwid-curriculum.ts:6-38. Daftar lessons kelas ini dipetakan dari meetings dengan category: "tajwid" dan position: (i + 1) * 10 src/data/tajwid-pertemuan.ts:870-877. 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-25.

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-5. Halaman /tes menjelaskan bahwa setiap kali mulai, soal pilihan ganda diambil acak sehingga soalnya selalu berbeda src/app/tes/page.tsx:28-31. Hanya kategori materi yang punya bank soal, yaitu tajwid src/lib/categories.ts:3-8. 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-26. 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-4.

Progres tidak pernah dikirim ke server. Kunci localStorage untuk kelas materi adalah "materi-progress" dan "terakhir-belajar" src/lib/learning-progress.ts:3-4, sedangkan skor tes memakai kunci "tes-pemahaman" src/lib/quiz.ts:4-5.

⚠️ Progres hanya hidup di peramban pengunjung. Tidak ada database maupun akun README.md:1-3, 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-5. Dependensi intinya Next.js ^16.4.2 dan React ^19.3.1 package.json:21-26. 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-20. 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-11. 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-17.

RuteIsi
/kartu dua level dan statistik situs
/pemuladaftar 39 praktik dalam empat bagian
/lanjutandaftar 26 pertemuan dalam lima tahap
/tespilihan 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.