HafalLoop

Track daily hafalan with a simple, child-friendly progress system.

HafalLoop is a mobile app for parents and Islamic preschool teachers to record, review, and monitor a young child’s memorization progress across Quran, daily prayers, dalil, and general knowledge topics. It replaces spreadsheet-based tracking with a visual, fast, mobile-first workflow that makes it easy to log what a child has learned, when they last reviewed it, and what needs repetition next.

Business Goals

  • Reach 1,000 registered parent users within 3 months of launch with at least 35% activating a child profile.
  • Achieve 40% weekly active usage among registered parents within 60 days of launch.
  • Drive at least 25% of active users to export a curriculum PDF within the first 90 days.
  • Maintain a 30-day retention rate of 20% or higher for family accounts.
  • Keep support requests related to data entry or navigation below 5% of total sessions after the first release.

User Goals

  • Log a child’s memorization progress in under 30 seconds per item.
  • See a clear overview of completed, in-progress, and not-started items by category.
  • Track murajaah dates, notes, and photo evidence without using spreadsheets.
  • Manage multiple children from one account with separate progress views.
  • Export a neat weekly PDF report that can be shared with family or printed.

Non-Goals

  • No video lessons or in-app teaching content in v1.
  • No community, chat, or social feed features in v1.
  • No gamified child-facing rewards system in v1.
  • No advanced analytics dashboards beyond basic progress, streaks, and history.

Sarah, 32, homeschooling mother - Sarah teaches her 2.5-year-old son at home and wants a quick way to record what he has memorized each day. She needs something visual, mobile-friendly, and reliable because she currently tracks everything in notes and spreadsheets.

Sarah, 32, homeschooling mother

  • As a mother, I want to select my child from the dashboard, so that I can immediately see his current progress.
  • As a mother, I want to update a memorization status in a few taps, so that I can log progress while my child is still practicing.
  • As a mother, I want to export a weekly PDF, so that I can share the report with my spouse or keep a printed record.

Ustazah Lina, 28, TK/PAUD teacher - Lina manages several children in an Islamic kindergarten and needs a consistent way to record each child’s memorization and review history. She values speed, clarity, and the ability to compare progress across children.

Ustazah Lina, 28, TK/PAUD teacher

  • As a teacher, I want to switch between child profiles quickly, so that I can record progress for multiple students during class.
  • As a teacher, I want to filter by category and status, so that I can focus on items that still need review.
  • As a teacher, I want to attach notes and proof photos, so that I can document learning evidence for parents.

Aisyah, 35, busy working parent - Aisyah has limited time in the evening and often forgets what her child reviewed earlier in the week. She needs reminders and a simple recap view to stay consistent without spending too much time in the app.

Aisyah, 35, busy working parent

  • As a parent, I want reminders for morning and evening review, so that I do not forget recurring memorization sessions.
  • As a parent, I want a 7-day consistency view, so that I can understand whether we are keeping a steady routine.
  • As a parent, I want to add a short note to each session, so that I can remember what my child struggled with or completed well.

Child Profile and Dashboard · High priority

  • The app must let users create and manage one or more child profiles and see a clear summary of each child’s memorization progress from the home screen.
  • Allow creating a child profile with name, age, avatar/photo, and optional learning note.
  • Show a dashboard card per child with overall progress by category and current streak.
  • Support swipe or tap navigation between children when more than one profile exists.
  • Persist profile data so progress remains separated per child.
  • Surface the last updated time and the next suggested review item on the dashboard.

Memorization Tracking by Category · High priority

  • The app must support structured tracking across Quran, daily prayers, dalil/adab, and general knowledge categories with item-level status, notes, and last review date.
  • Provide category lists with predefined curriculum items and support custom items where needed.
  • Support three statuses: Not Started, In Progress, and Memorized, using consistent visual colors.
  • Store review date, note, and optional target date for each item.
  • Allow fast editing from both category lists and item detail screens.
  • Support bulk update mode for multiple items during a review session.

Evidence and Session Notes · Medium priority

  • Parents and teachers need to attach proof of review and add context for each learning session without slowing down data entry.
  • Allow photo upload from camera or gallery and associate each image with a specific session.
  • Add a free-text note field with suggested placeholder examples.
  • Auto-tag uploaded media with timestamp, child, category, and item.
  • Display past evidence in a lightweight history view for later evaluation.
  • Keep the upload flow under 2 taps from the item screen.

Reminders and Consistency · Medium priority

  • The app should encourage regular review by showing streaks, missed-day nudges, and scheduled reminders for common routines like morning and evening prayers.
  • Show a 7-day calendar strip indicating whether any review was logged each day.
  • Send configurable local or push reminders for morning and evening sessions.
  • Detect missed days and surface a gentle nudge to continue the streak.
  • Allow per-child reminder schedules and disable reminders for days off.
  • Update streak status immediately after a successful session save.

Reporting and Export · Low priority

  • The app must generate a clean printable curriculum report for sharing with family members or teachers.
  • Export a weekly PDF containing categories, items, status, review dates, and notes.
  • Include child name, age, date range, and logo/header branding in the PDF.
  • Support share sheet export to messaging apps, email, or local storage.
  • Generate exports without requiring the user to manually format data.
  • Keep export generation asynchronous to avoid blocking the app UI.

First-Time User Experience

  • Install the app and sign in with phone number or email in under 60 seconds.
  • Create the first child profile with name, age, and optional photo.
  • Select a default curriculum set such as Juz 30, daily prayers, or general knowledge.
  • Land on the dashboard with immediate progress cards and quick actions.
  • Complete the first memorization entry within 2 minutes of onboarding.
  • See a confirmation that the child profile and first log were saved successfully.

1. Open dashboard

  • The parent opens the app and immediately sees the active child card, progress bars, streak, and today’s reminders.
  • Default landing should be the most recently used child profile.
  • If no child exists, show a guided empty state with a clear create-child CTA.
  • Display last sync time and offline save state when relevant.

2. Choose category and item

  • The user taps a category tab or quick action to enter Quran, prayer, dalil, or general knowledge tracking.
  • Show only relevant items for the selected category and child.
  • Support search and filters by status: All, Not Started, In Progress, Memorized.
  • Handle empty categories with a call to add items or use a default curriculum.

3. Update status quickly

  • The user taps an item and changes its status, adds a note, and selects a review date if needed.
  • Default the review date to today for memorized updates.
  • Validate that notes and dates are optional, not required.
  • Confirm changes with a compact save action and toast feedback.

4. Attach evidence

  • The user optionally uploads a photo as proof of review for a session or item.
  • Allow camera and gallery selection.
  • Compress images before upload to keep performance acceptable on mobile networks.
  • If upload fails, save the session locally and retry automatically.

5. Review progress and export

  • The user checks streaks, 7-day consistency, and a weekly summary, then exports a PDF if needed.
  • Show percentage completed per category and total items completed.
  • Allow one-tap export from dashboard and from the child detail view.
  • If no data exists for the selected range, generate a PDF with an empty-state note instead of failing.

Advanced Features and Edge Cases

  • Bulk checklist mode for fast murajaah sessions with multiple item updates at once.
  • Custom curriculum items for families who want topics outside the default templates.
  • Multi-child profile switching with separate streaks, reminders, and reports.
  • Offline-first local queue for updates made during weak connectivity.
  • Missed-day recovery flow that gently resumes streak tracking without punishing the user.

Visual and Interaction Principles

  • Use a calm, child-friendly palette with high-contrast status colors: green for memorized, yellow for in progress, gray for not started.
  • Design for one-hand use with large touch targets and bottom-aligned primary actions.
  • Keep language simple and readable with short labels and minimal form fields.
  • Use accessible font sizes, strong contrast, and support screen readers for important controls.
  • Prioritize perceived speed by loading dashboard summaries first and detail data progressively.

Sarah used to keep Zyan’s memorization progress in a spreadsheet, but it was hard to update during a busy afternoon and even harder to remember the last murajaah date. She often had to guess what had been reviewed and which items still needed repetition.

With HafalLoop, Sarah opens the dashboard, taps Zyan’s card, updates Surat Al-Falaq to Hafal, adds a quick note, and uploads a photo in less than a minute. The app updates the streak, shows the next reminder, and saves everything in one organized place.

At the end of the week, Sarah exports a clean PDF to share with her husband. She feels more consistent, Zyan’s progress is easier to follow, and the family no longer depends on messy manual tracking.

User-Centric Metrics

  • 80% of active parents complete a memorization log in under 30 seconds by week 4.
  • At least 60% of users view the dashboard 3 or more times per week.
  • 50% of active children have at least one review entry per day during an active week.
  • 70% of users understand and use the status system after the first session.
  • Less than 10% of sessions result in navigation-related drop-off before a save action.

Business Metrics

  • 40% weekly active usage among registered parent accounts within 60 days.
  • 20% of active users export a PDF within the first 90 days.
  • 25% of new signups create a second child profile or a custom curriculum within 30 days.
  • 30-day retention of 20% or higher for family accounts.
  • At least 15% month-over-month growth in active child profiles during the first two quarters.

Technical Metrics

  • 99.5% monthly uptime for core app and API services.
  • P95 dashboard load time under 2 seconds on 4G networks.
  • P95 status update save time under 800 milliseconds excluding image upload.
  • Zero critical data-loss incidents from sync or offline queue failures.

Tracking Plan

  • Track app_open with child_id and last_active_child.
  • Track child_created with source and age_band.
  • Track category_viewed with category_name and filter_state.
  • Track item_status_updated with old_status, new_status, review_date, and entry_mode.
  • Track photo_evidence_uploaded with upload_success and file_size_bucket.
  • Track streak_updated with streak_length and missed_day_count.
  • Track pdf_export_requested and pdf_export_completed with date_range and share_destination.

Technical Needs

  • Mobile app built with Flutter for iOS and Android parity, or React Native if the team already has stronger JavaScript expertise.
  • Firebase Authentication for simple sign-in using email or phone number.
  • Firestore for hierarchical child, category, item, session, and reminder data.
  • Firebase Storage for photo evidence with image compression and metadata tracking.
  • Cloud Functions or serverless jobs for PDF generation, reminder scheduling, and streak calculation.
  • Push notification service using Firebase Cloud Messaging for reminders and nudges.
  • Analytics stack such as Firebase Analytics or Amplitude for event tracking and funnel analysis.

Integration Points

  • Firebase Authentication
  • Firebase Cloud Messaging
  • Firebase Storage
  • Google Drive or native share sheet for PDF handoff
  • Apple Sign In and Google Sign-In for convenient login

Data Storage & Privacy

  • Store child photos, notes, and progress with clear user consent and account-level access control.
  • Minimize personally identifiable data by avoiding unnecessary full names or sensitive notes in analytics.
  • Encrypt data in transit with HTTPS and rely on platform-level encryption at rest through Firebase services.
  • Provide delete account and delete child profile flows that remove associated records and media within a defined retention window.
  • Prepare privacy policy and consent language appropriate for GDPR and CCPA-style data access and deletion requests.

Scalability & Performance

  • Use paginated queries for category lists to keep screens responsive as curriculum size grows.
  • Cache the last viewed child and dashboard summary locally for instant reopening.
  • Compress uploaded images client-side before transfer to reduce bandwidth and storage cost.
  • Separate summary reads from detailed item reads to avoid heavy dashboard queries.

Potential Challenges

  • Risk: inconsistent curriculum setup across families; mitigation: provide a strong default curriculum with editable templates and a custom-item fallback.
  • Risk: users may find manual entry tedious; mitigation: optimize for 1 to 2 tap updates, bulk checklist mode, and smart defaults.
  • Risk: photo uploads could slow the app on weak networks; mitigation: compress images, queue failed uploads, and allow later retry.
  • Risk: streak logic can feel discouraging after missed days; mitigation: use gentle recovery messaging and resume-based streak design instead of hard resets.
  • Risk: PDF generation could fail on older devices or large datasets; mitigation: generate on the backend and provide a lightweight share-ready format.

Team & resourcing - Small product team with 2 mobile engineers, 1 backend engineer, 1 designer, and part-time PM/QA support.

Phase 1: MVP Dashboard and Logging · Weeks 1-4

  • Authentication and first-time onboarding
  • Create and switch child profiles
  • Dashboard with progress bars, streak, and 7-day consistency strip
  • Category lists for Quran, prayers, dalil, and general knowledge
  • Single-item status update flow with notes and saved dates

Phase 2: Evidence and Reminders · Weeks 5-7

  • Camera and gallery photo upload
  • Session note history
  • Push notification reminders for morning and evening review
  • Missed-day nudges and streak updates
  • Offline queue for basic status changes

Phase 3: Reporting and Customization · Weeks 8-10

  • Weekly PDF export with share flow
  • Custom curriculum items
  • Bulk checklist mode for fast review sessions
  • Search and filter across categories
  • Improved empty states and onboarding guidance

Phase 4: Beta Hardening · Weeks 11-12

  • Analytics instrumentation and funnel reporting
  • Performance tuning for dashboard and uploads
  • Privacy controls for delete/export requests
  • Bug fixing across iOS and Android beta builds
  • App store release preparation

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a mobile app called HafalLoop for parents and Islamic preschool teachers to track a young child’s memorization progress. Use Flutter or React Native with Firebase backend.

Core product:
A child progress tracker for Quran memorization, daily prayers, dalil/adab, and general knowledge topics. The app must let users create multiple child profiles, switch between them, update item status quickly, attach notes, upload proof photos, view streaks and 7-day consistency, and export a weekly PDF report.

Primary screens:
1. Auth screen with email or phone sign-in.
2. Onboarding to create the first child profile and choose a curriculum template.
3. Dashboard showing active child card, progress bars per category, streak, quick actions, 7-day calendar strip, and reminders.
4. Category detail screen with tabs for Quran, Doa, Dalil, and Sains; searchable item lists; filters by status; fast edit actions.
5. Item detail modal or bottom sheet to update status: Not Started, In Progress, Memorized; add last review date; add notes; save.
6. Upload evidence flow using camera or gallery with compression and upload progress.
7. PDF export flow that generates a weekly report and shares it via native share sheet.
8. Settings screen for reminders, child management, and account deletion.

Data model:
User has many ChildProfiles. ChildProfile has id, name, age, avatarUrl, learningNote, reminderSettings, and createdAt. Each ChildProfile has many CurriculumCategories. Category has id, name, type, and sortOrder. Category has many CurriculumItems. CurriculumItem has id, title, categoryId, defaultStatus, currentStatus, reviewDate, note, targetDate, lastUpdatedAt, and optional customFlag. ReviewSession has id, childId, itemId, status, note, reviewDate, createdAt, and evidenceUrls. EvidenceAsset has id, sessionId, url, thumbnailUrl, mimeType, size, and timestamp. Store all data in Firestore and images in Firebase Storage.

Requirements:
- Optimized for one-hand mobile use with large touch targets and simple language.
- Dashboard must load quickly and show cached summaries immediately.
- Support offline-first edits with sync queue and conflict resolution by latest timestamp.
- Use Firebase Authentication, Firestore, Firebase Storage, Firebase Cloud Messaging, and Firebase Analytics.
- Generate PDF reports on the backend or via serverless function.
- Include accessible UI: readable typography, strong contrast, screen-reader friendly labels, and clear status colors.
- Add analytics events for app open, child created, category viewed, item status updated, photo uploaded, streak updated, and PDF export requested.
- Ensure privacy features: account deletion, child deletion, secure media access, and consent-friendly data handling.

Implementation guidance:
- Build clean, production-ready code with reusable components, state management, form validation, image upload handling, and mocked seed data for the curriculum.
- Include responsive layouts for iOS and Android.
- Add empty states, loading skeletons, error states, and success toasts.
- Keep the UI calm, child-friendly, and highly visual with green/yellow/gray status indicators.
- Seed default curriculum items for Juz 30, Ayat Kursi, 3 Qul, daily prayers, dalil/adab, and sample science topics.

Deliver a working MVP with navigation, CRUD flows, photo upload, reminders scaffold, analytics hooks, and PDF export placeholder if full server-side generation is too large for first pass.

Business Idea

Oke, ini PRD sederhana untuk aplikasi Rekap Hafalan yang terinspirasi dari kurikulum homeschooling Zyan di post ini: 1. Product Overview Aplikasi mobile buat bantu orang tua atau guru ngerekap dan pantau progres hafalan anak — khususnya hafalan Al-Quran, doa harian, dalil, dan materi umum kayak sains & anatomi. Fokusnya ke anak usia 1.5–5 tahun dengan gaya belajar visual + checklist. 2. Target User Orang tua yang homeschooling anak usia dini Guru TK/PAUD Islamic Ibu yang mau tracking hafalan anak sehari-hari 3. Problem yang Dipecahkan Rekap hafalan manual di spreadsheet ribet dan gak interaktif buat anak. Orang tua butuh cara simpel buat liat apa yang sudah hafal, yang masih proses, dan yang perlu diulang. 4. Key Features A. Modul Hafalan Al-Quran Daftar surat Juz 30 + Ayat Kursi + 3 Qul + 3 ayat terakhir Al-Hasyr Status: Belum mulai | Sedikit-sedikit | Hafal Kolom keterangan + tanggal terakhir murajaah B. Modul Doa Harian Kategori: Doa pagi/sore, doa makan, doa tidur, doa masuk kamar mandi, doa keluar rumah, doa minta rezeki, dll Status checklist + reminder notifikasi pagi/sore C. Modul Dalil & Adab Daftar dalil: menuntut ilmu, niat, infaq, shodaqoh, sholat, senyum, bersyukur Ditampilkan dengan arti singkat biar orang tua bisa ajarin D. Modul Materi Umum Anatomi tubuh: organ, tulang, fungsi Antariksa: planet, matahari, galaksi Milky Way Sains: hewan, habitat, gravitasi, metamorfosis Kisah Al-Quran: Nabi Nuh, Nabi Musa, Nabi Muhammad, Nabi Sulaiman E. Dashboard Progres Anak Ringkasan % hafalan selesai per kategori Kalender 7 hari untuk liat konsistensi belajar Fitur “Tambah Anak” kalau punya lebih dari 1 anak F. Fitur Orang Tua Foto bukti murajaah bisa diupload Export PDF kurikulum buat dibagikan atau diprint Catatan khusus orang tua per sesi belajar 5. UX/UI Reference Desainnya mirip spreadsheet tapi lebih visual: pakai centang hijau untuk “hafal”, kuning untuk “sedikit-sedikit”, abu-abu untuk “belum” Halaman utama: kartu anak + progress bar besar Warna soft, banyak ilustrasi anak Muslim biar ramah anak 6. Success Metrics Daily Active User orang tua > 40% 70% user menyelesaikan 1 minggu rekap hafalan berturut-turut 20% user request export PDF 7. Out of Scope v1 Gamifikasi untuk anak Video pembelajaran Komunitas antar orang tua 8. Tech Stack Saran Mobile: Flutter atau React Native biar bisa iOS + Android Backend: Firebase untuk data real-time + storage foto Database: Firestore untuk struktur data anak, kategori, dan progres Siap, ini user story flow dari sisi ibu yang lagi input hafalan Zyan di aplikasi Rekap Hafalan: User Story: Ibu Zyan input hafalan sore hari Persona: Sarah, 32 tahun, ibu rumah tangga yang homeschooling Zyan umur 2.5 tahun. Goal: Catat progres hafalan Zyan hari ini biar konsisten dan gak lupa murajaah. Flow 1: Buka aplikasi & pilih anak Sarah buka aplikasi → langsung lihat dashboard dengan kartu “Zyan, 2.5 tahun”. Di bawahnya ada progress bar: Hafalan Al-Quran 45% | Doa 70% | Sains 30%. Sarah tap kartu Zyan untuk masuk ke halaman detail. Flow 2: Pilih kategori hafalan Halaman detail muncul 4 tab: Al-Quran | Doa | Dalil | Sains. Hari ini fokusnya murajaah Juz Amma, jadi Sarah tap tab Al-Quran. Flow 3: Input progres hafalan Muncul daftar surat Juz 30 dengan status warna: Surat Al-Ikhlas = ✅ Hafal [hijau] Surat Al-Falaq = 🟡 Sedikit-sedikit [kuning] Surat An-Nas = ⚪ Belum [abu-abu] Sarah tap Surat Al-Falaq → muncul popup: “Update status hafalan?” Sarah pilih Hafal → aplikasi minta konfirmasi tanggal murajaah. Defaultnya hari ini, 2 Nov 2026. Sarah bisa tambah catatan: “Zyan hafal lancar 3x tanpa lihat mushaf”. Flow 4: Tambah foto bukti Ada tombol kamera “+ Bukti Murajaah”. Sarah foto Zyan lagi baca Al-Falaq. Foto otomatis tersimpan di galeri progres hari itu. Flow 5: Lihat streak & reminder Setelah simpan, dashboard update streak: “Konsisten 5 hari berturut-turut 🔥”. Aplikasi kasih reminder otomatis: “Besok jam 16.00 waktu murajaah Doa Pagi & Sore ya”. Flow 6: Export PDF mingguan Di akhir minggu, Sarah tap tombol Export PDF. PDF berisi tabel kurikulum Zyan + centang + tanggal murajaah, bisa dikirim ke suami atau disimpan. Edge Case yang Ditangani Kalau Sarah lupa input 2 hari, aplikasi kasih notifikasi: “Yuk lanjutin streak Zyan!” Kalau anak belum hafal, bisa set target: “Target hafal Surat An-Nas dalam 7 hari” → aplikasi bikin reminder harian. Emosi yang Diinginkan Sarah merasa lega karena semua progres tercatat rapi, gak perlu lagi ribet buka Excel. Liat streak 5 hari bikin dia termotivasi buat konsisten ngajarin Zyan. Oke, ini wireframe sederhana halaman Dashboard Rekap Hafalan versi mobile: Layout Halaman Dashboard [Header] javascript 👋 Assalamualaikum, Sarah [Icon Profil] [Icon Notifikasi 3] Subtext kecil: “Kamis, 2 Nov 2026” [Kartu Anak Aktif] javascript ┌──────────────────────────────┐ | 👦 Zyan, 2.5 tahun | | "Diajarin sendiri sama Bunda"| | | | Hafalan Al-Quran █████▌ 45%| | Doa Harian ███████ 70%| | Sains & Antariksa ███▌ 30% | | | | [Streak: 5 hari 🔥] | └──────────────────────────────┘ Tap kartu ini buat masuk ke detail progres. [Quick Action Buttons] javascript [+ Input Hafalan] [📸 Upload Bukti] [📄 Export PDF] Tombol besar biar ibu gampang akses pakai 1 tangan. [Kategori Hafalan Hari Ini] javascript Al-Quran > 3/10 surat hafal Doa Harian > 7/10 doa hafal Dalil & Adab > 5/12 dalil hafal Sains Umum > 2/8 materi selesai Setiap baris bisa di-tap untuk langsung buka kategori itu. Ada panah > di kanan. [Kalender Konsistensi 7 Hari] javascript M S S R K J S ✓ ✓ ✓ ✓ ✓ - - Centang hijau = sudah input hafalan hari itu. Kosong = belum. [Reminder Card] javascript 🔔 Pengingat Sore "Waktunya murajaah Doa Pagi & Sore untuk Zyan" [Ingatkan 30 menit lagi] [Sudah] [Bottom Navigation] javascript [🏠 Beranda] [📚 Kurikulum] [📊 Statistik] [⚙️ Pengaturan] Flow Interaksi Kunci Warna status: Hijau = Hafal, Kuning = Sedikit-sedikit, Abu = Belum. Biar ibu langsung paham tanpa baca teks banyak. Swipe kartu anak: Kalau punya 2 anak, bisa swipe kiri-kanan buat ganti profil anak. Tap + Input Hafalan → langsung masuk ke halaman pilih kategori → pilih item → pilih status → simpan. Desain Visual Background putih bersih + aksen warna hijau mint biar tenang dan Islami Icon sederhana, font besar 16px biar enak dibaca ibu yang mungkin sambil gendong anak Ilustrasi anak Muslim kecil di pojok buat nuansa ramah anak Ini versi MVP ya, jadi fokusnya cuma input + lihat progres. Kalau mau v2 bisa tambah grafik progres bulanan atau fitur share ke grup keluarga. Mau saya bikinin juga wireframe halaman input hafalan Al-Qurannya? Oke, ini wireframe halaman Input Hafalan Al-Quran — khusus buat ibu input progres Zyan per surat: Layout Halaman Input Hafalan Al-Quran [Header] javascript ← Hafalan Al-Quran - Zyan Juz 30 Subtext: “Update terakhir: Hari ini, 16:30” [Search & Filter] javascript [🔍 Cari surat...] [Semua ▼] Filter dropdown: Semua | Belum | Proses | Hafal [Daftar Surat - Main Content] javascript ┌──────────────────────────────────┐ | 112. Surat Al-Ikhlas | | Status: Hafal ✓ Murajaah: 2/11| | Catatan: "Lancar 3x tanpa lihat"| | [Edit] [📸 Bukti] | └──────────────────────────────────┘ ┌──────────────────────────────────┐ | 113. Surat Al-Falaq | | Status: Sedikit-sedikit 🟡 | | Catatan: "-" | | [Update Status] [📸 Bukti] | └──────────────────────────────────┘ ┌──────────────────────────────────┐ | 114. Surat An-Nas | | Status: Belum ⚪ | | Catatan: "-" | | [Mulai Hafalan] | └──────────────────────────────────┘ ┌──────────────────────────────────┐ | Ayat Kursi | | Status: Hafal ✓ Murajaah: 2/11| | [Edit] [📸 Bukti] | └──────────────────────────────────┘ Popup saat klik [Update Status] javascript ┌──────────────────────────────────┐ | Update Status: Surat Al-Falaq | | | | ( ) Belum | | (●) Sedikit-sedikit | | ( ) Hafal | | | | Tanggal Murajaah: [02/11/2026] │ | Catatan: [Zyan hafal 1 ayat...]| | | | [Batal] [Simpan] | └──────────────────────────────────┘ [Floating Action Button] javascript [+] Tombol bulat di pojok kanan bawah buat “Tambah Surat Manual” kalau ada surat di luar Juz 30. Interaksi & UX Detail 1. Status Warna: Hijau ✓ = Hafal → progress bar utama naik Kuning 🟡 = Sedikit-sedikit → muncul reminder murajaah besok Abu ⚪ = Belum → ada tombol “Mulai Hafalan” biar ibu langsung set target 7 hari 2. Bukti Murajaah: Klik [📸 Bukti] → buka kamera atau galeri. Foto otomatis kasih timestamp + tanggal. Foto akan muncul di tab “Riwayat” biar bisa diliat lagi pas mau evaluasi. 3. Auto-Save: Setelah pilih status + simpan, langsung muncul toast kecil: “Progres Surat Al-Falaq tersimpan ✓” Streak 7 hari langsung update di dashboard. 4. Mode Murajaah Cepat: Kalau ibu buru-buru, bisa pakai mode checklist: javascript [ ] Al-Ikhlas [ ] Al-Falaq [ ] An-Nas [ ] Al-Lahab Centang beberapa sekaligus, lalu tap “Simpan Semua”. Komponen Khusus untuk Anak 2.5 Tahun Emoji reward: Kalau status berubah jadi “Hafal”, muncul animasi bintang ⭐ + suara takbir pelan. Audio referensi: Icon 🔊 kecil di sebelah nama surat → play murottal surat itu buat bantu Zyan ngikut. Tujuan desain: Ibu bisa input dalam 15-30 detik, gak perlu ngetik panjang. Fokusnya visual + 1-2 tap aja. Mau saya bikinin juga flow halaman Statistik Progres Bulanan biar ibu bisa liat grafik perkembangan Zyan?

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company