DEPQ.
The Vision
DepQ is a sophisticated, mobile-first web application designed for managing and tracking Qur'an memorization (Hafalan). Built with React, Vite, and Tailwind CSS, it delivers a seamless, highly responsive user experience. Powered by a robust Supabase backend, DepQ features secure Role-Based Access Control (separating Student and Teacher portals), real-time interactive audio recording for memorization submissions, advanced progress analytics, and an immersive, audio-enabled Qur'an reading interface optimized for daily use.
Development Roadmap
Phase 01: UI Design
Designed a responsive mobile-first interface using React, Vite, and Tailwind CSS. Implemented a premium design system with glassmorphism, micro-animations, and a full Role-Based Access Control system separating Santri (student) and Ustadz (teacher) portals.
Phase 02: Backend Integration & Analytics
Integrated Supabase for authentication, database, and storage. Connected the Qur'an API (quran.com) for dynamic surah data and audio playback. Built interactive progress analytics with Recharts for tracking student memorization velocity.
Phase 03: Core Features
Implemented immersive Qur'an reading with verse-by-verse audio playback, transliteration support, and a bookmark system. Added voice recording for hafalan submissions with browser-based audio capture, Supabase Storage upload, and Ustadz-side playback evaluation.
Phase 04: Gamification & Engagement (upcoming)
Streaks & badges system, real-time push notifications for submission approvals, and bilingual language support (Bahasa Indonesia / English).