Jangji (Jejak Ngaji) — Offline-First Islamic Daily Companion

Aplikasi ibadah harian berbasis Progressive Web App (PWA) offline-first yang menyatukan kebutuhan tilawah dan amalan harian Muslim: pembacaan Al-Quran (surah/juz), penanda bacaan terakhir (last read), bookmark ayat, pemantau progres khatam, jadwal sholat, arah kiblat, hingga dzikir dan doa harian. Dibangun mandiri dari nol dengan performa tinggi dan persistensi data lokal.

---

Ringkasan Proyek

• Kategori: Personal Project
• Peran: Full-Stack Engineer
• Tech Stack: Next.js 15+ (App Router), TypeScript, React 19, Tailwind CSS, Lucide Icons, Dexie.js (IndexedDB wrapper), Web App Manifest, Service Workers

---

Masalah yang Dihadapi

Sebelum Jangji dibangun, kebutuhan ibadah digital harian umumnya terfragmentasi di berbagai aplikasi terpisah (aplikasi Al-Quran, jadwal sholat, tasbih digital, dan kumpulan doa). Hal ini memicu beberapa kendala:

• Pengalaman Pengguna Tidak Efisien: Pengguna harus berpindah-pindah aplikasi untuk melengkapi amalan harian.
• Data Progres Terisolasi: Tidak ada pencatatan terpadu untuk memantau konsistensi tilawah dan progres khatam Al-Quran.
• Ketergantungan Internet Tinggi: Banyak aplikasi tidak dapat diakses secara optimal saat berada di area dengan koneksi internet terbatas atau saat bepergian.

---

Solusi & Fitur Utama

1. Quran Reader & Navigation (Surah & Juz)
   Antarmuka pembacaan Al-Quran yang responsif dengan navigasi terstruktur berdasarkan surah maupun juz.

2. Last Read & Ayat Bookmark
   Penyimpanan otomatis posisi bacaan terakhir untuk memudahkan pengguna melanjutkan tilawah, dilengkapi fitur penanda ayat favorit.

3. Progress Tracking & Khatam Monitor
   Pencatatan dan pemantauan statistik tilawah harian secara berkala untuk membantu pengguna menjaga konsistensi khatam Al-Quran.

4. Prayer Times & Dynamic Qibla Compass
   Penghitungan jadwal sholat akurat berdasarkan lokasi serta penunjuk arah kiblat interaktif.

5. Daily Dzikir & Doa Suite
   Akses kumpulan dzikir pagi/petang dan doa harian dalam satu alur navigasi yang terpadu.

6. Offline Sync & PWA Architecture
   Dukungan Progressive Web App yang memungkinkan seluruh fitur utama tetap dapat diakses secara penuh tanpa koneksi internet.

---

Tech Stack & Arsitektur

Aplikasi dibangun menggunakan Next.js (App Router) dan TypeScript dengan arsitektur komponen berbasis domain. Persistensi data lokal mengandalkan Dexie.js di atas IndexedDB browser, menjamin data bacaan, bookmark, dan riwayat khatam tersimpan aman di perangkat pengguna secara offline-first. Pengelolaan status dan statistik memanfaatkan custom React hooks yang terisolasi dari komponen visual.

---

Tantangan Teknis & Solusi

• Strategi Persistensi Data Offline-First:
  Tantangan: Memastikan seluruh data aktivitas tilawah dan pengaturan pengguna tetap tersimpan cepat tanpa membebani memori browser.
  Solusi: Menggunakan Dexie.js sebagai abstraction layer IndexedDB untuk mengelola transaksi database lokal secara asinkron, dikombinasikan dengan service worker caching untuk aset statis aplikasi.

• Kompleksitas Tata Letak Dashboard Utama:
  Tantangan: Menyajikan banyak modul informasi (jadwal sholat, last read, progres tilawah, akses cepat) dalam satu halaman tanpa membingungkan pengguna.
  Solusi: Merancang ulang layout halaman utama menjadi beberapa bagian terstruktur (hero section, quick access grid, progress tracker, dan favorites) untuk mempercepat penelusuran informasi.

• Konsistensi Skema Warna Light/Dark Mode:
  Tantangan: Menjaga kenyamanan keterbacaan teks Al-Quran (gundul/harakat) pada berbagai mode pencahayaan.
  Solusi: Membangun sistem design token warna terpusat menggunakan Tailwind CSS untuk mengontrol kontras teks arab, tipografi terjemahan, dan elemen latar belakang secara presisi.

---

Pembelajaran & Catatan Teknis

• Merancang dan membangun aplikasi Progressive Web App (PWA) berpendekatan offline-first dengan persistensi data lokal via IndexedDB.
• Mengelola arsitektur Next.js App Router dengan pemisahan custom hooks untuk mengisolasi logika data dari komponen antarmuka.
• Mengoptimalkan keterbacaan tipografi dan kontras design token pada aplikasi yang memerlukan tingkat fokus visual tinggi.