-
4 min read

Hafidz

Role: Fullstack Developer
Table of Contents

Project Summary

This project is a system development to transform the Al-Qur’an memorization assessment process, which was previously manual and subjective, at Madrasah Diniyah At-Thalibiyah. The solution built is a Progressive Web App (PWA) integrated with a Fuzzy Neural Network (FNN) artificial intelligence model. This system is designed to provide objective, efficient, and well-documented assessments, thereby assisting teachers (Ustadz) in monitoring students’ progress accurately and transparently.

Overview

1. Background

The Al-Qur’an memorization assessment process at Madrasah Diniyah At-Thalibiyah was still performed manually, relying on the teacher’s memory. This caused several crucial problems:

  • Subjectivity: Assessments used vague qualitative terms such as “quite fluent” or “less accurate”, which are prone to bias.
  • Inconsistency: Without measurable standards, assessments could be inconsistent across time and among different teachers.
  • Poor Documentation: It was difficult to systematically track and document the historical progression of students’ memorization.

2. Solution

  • Automating Assessment: Utilized a Fuzzy Neural Network (FNN) model to classify memorization quality (fluency, tajweed, makhraj) objectively based on data.
  • Facilitating Monitoring: Provided an interface in the form of a Progressive Web App (PWA) so teachers can easily input grades and monitor the memorization history of each student.
  • Ensuring Accessibility: The developed PWA has offline capabilities, ensuring the assessment process runs smoothly even with unstable internet connections.

3. Role & Responsibilities

  • Conducted comprehensive system testing, including Black-Box Testing for functionality and Usability Testing with 25 respondents to measure satisfaction and ease of use.
  • Designed and implemented a serverless architecture using Google Cloud Functions.
  • Developed the client-side application as a Progressive Web App (PWA) with offline functionality to ensure a reliable user experience.
  • Designed a NoSQL database schema utilizing Cloud Firestore.
  • Designed the Fuzzy Neural Network architecture, including defining fuzzy membership functions and the neural network structure.

Architectural Design

1. System Architecture

HAFIDZ System Architecture

The system is built on a serverless architecture using the Google Cloud Platform (GCP) ecosystem and Firebase. The workflow is as follows:

  • Teachers input assessment scores via the PWA on their devices.
  • Data is first stored in Offline Firestore (local cache) and then automatically synced to Cloud Firestore when an internet connection is available.
  • The addition of a new document in Cloud Firestore triggers a Cloud Function to execute.
  • This Cloud Function loads the FNN model, predicts the memorization predicate, and saves the results back to the document in Cloud Firestore. The prediction result will appear in real-time on the user’s PWA.
  • The Service Worker handles offline capabilities and push notifications.

2. Use Case Diagram

Hafidz Use Case Diagram

The diagram above illustrates the interaction between users (in this case, Teachers or Ustadz) and the primary features of the HAFIDZ system.

Actor: System User (Teacher/Ustadz).

Use Cases (Features):

  • Login: Users must log into the system to access other features.
  • Submission: The core feature where the teacher inputs the student’s memorization assessment data.
  • Dashboard: The main page displaying summaries or essential information.
  • Student Page: A page to view detailed information and historical assessments for each student.
  • <<include>> Relationship: Indicates that to access the “Submission”, “Dashboard”, and “Student Page” features, the user must go through the “Login” process first.

3. Activity Diagram

HAFIDZ Activity Diagram

The diagram above details the assessment workflow from the perspective of the user (Teacher), the application, and the backend system.

4. Firebase NoSQL Design

HAFIDZ Database Schema

  • Collection users: Stores data of users authorized to access the system, such as Teachers.
  • Collection penilaian_santri: Stores every submitted memorization assessment transaction data, which likely contains score details, dates, and the IDs of both the student and the teacher.
  • Collection santri: Stores master data of students, including names and other information.

Tech Stack

  • Artificial Intelligence (AI): Fuzzy Neural Network
  • Frontend: Progressive Web App (PWA)
  • Backend: Google Cloud Functions (Serverless)
  • Database: Cloud Firestore (NoSQL, Realtime)
  • Platform: Google Cloud Platform (GCP) & Firebase
  • Deployment: Vercel