Case Study: Engineering Al Kithab Academy — How We Transformed an Unstable LMS into a Zero-Redirect Headless Islamic EdTech Platform

When the leadership of Al Kithab Academy first approached our team at Sparknest, they were managing an online Islamic academy with ambitious global enrollment across the UK, USA, Gulf, and Australia—yet their digital learning infrastructure was in severe distress. Their students were battling a disjointed user experience that bounced them across conflicting interfaces, their server harbored critical security liabilities left behind by previous contractors, and their academic workflows were held together by manual spreadsheets. Here is the candid, inside story of how we took over the platform, neutralized the security risks, and re-architected Moodle into an invisible, Zero-Redirect Headless Learning Management System.

The Inheritance: What Was Previously There

Online Islamic education requires profound trust. Parents entrust academies with their children's foundational spiritual education—from early Tajweed and Qur'anic Arabic to advanced Islamic jurisprudence. Yet when we conducted our initial codebase and infrastructure audit on the inherited platform, we uncovered three systemic failures that threatened the academy's operational viability:

Stage 1: Emergency Server Takeover & Infrastructure Hardening

Before writing a single line of application code, our immediate priority was establishing total operational sovereignty and eliminating security risks. We executed a zero-downtime server takeover:

• Revocation & Root Lockdown: We audited the Hostinger Ubuntu 24.04 LTS host, purged stale contractor administrative accounts, rotated root SSH keys to ed25519 cryptographic pairs, disabled password-based SSH authentication, and wiped all plaintext credential files from the disk.
• Automated Nightly Google Drive Backups: We architected a hardened automated shell script running via crontab at 02:00 UTC. The pipeline dumps the MariaDB database, archives the Moodle file pool (moodledata), encrypts the archive, and transmits it directly to an isolated Google Drive bucket with an automated 5-day rolling retention policy.
• Isolated Staging Sandbox: We provisioned staging.alkithabacademy.com on an isolated database (moodle_staging) with Let's Encrypt SSL, allowing our engineering team and the academy directors to review and stress-test new academic features in an exact replica of production.
• Git Source Control: The entire codebase was sanitized, decoupled from hardcoded credentials, and committed into a private GitHub repository on a protected main branch.

Stage 2: The "Zero-Redirect In-Portal Sandbox" Architectural Revolution

With the infrastructure secured, we tackled the primary design mandate:

"The student must never be taken to the background Moodle site. Moodle runs only in the background as a headless backend engine. Everything the student does must happen inside the Student portal, exactly as shown in the design."

To achieve this without forking Moodle core, we engineered 9 bespoke plugins and custom Mustache templates that communicate with Moodle's relational schema (mdl_quiz, mdl_assign, mdl_grade_grades) purely via headless internal data models:

1. Modernized Record Book & Attendance Telemetry (v=classes&t=rb)

We eliminated the confusing third "Recordings" sub-tab and unified all past classes into a sleek, reverse-chronological Record Book:

• Multi-Subject Line Parsing: When a session covers both Qur'anic practice and Islamic values, each subject renders on its own bold line (e.g., Qur'an Reading Practice — Al-Inshiqaq 84:1 – At-Tariq 86:17 (64 ayath) followed by 99 Names of Allah — Lesson 2) alongside teacher names and timestamps.
• Attendance Status Badges: Sessions display clear, color-coded status badges: Present (mint green), Late (soft amber), Absent (soft red), and Missed session.
• Teacher Remarks Callout: Directly beneath session metadata, a styled card with a 3px teal accent border highlights custom teacher guidance (e.g., "Remarks: Well done. Practise the qalqalah letters.").
• In-Portal Google Meet Recording Modal: When a student misses a class or needs revision, clicking "Recording link" no longer bounces them away. Instead, an in-portal modal verifies course enrollment and streams the recording securely inside the sandbox.

2. Islamic Foundations & Qur'an Recitation Tracking Engine (v=course&id=7)

Tracking progress across Islamic disciplines requires granular precision. We architected a custom curriculum renderer:

• Universal Dropdown Accordions: Every subject (Qur'an Reading Practice, Complete Qur'an Recitation, Aqeedah, Fiqh, Seerah, Hadith) renders as an accordion closed by default with downward indicator ▾, toggling smoothly to ▴ upon user interaction.
• Surah, Ayah & Juz Milestone Tracking: Recitation progress tracks the exact Ayah checkpoint (e.g., Al-Inshiqaq 84:1 – At-Tariq 86:17) and computes multi-tiered Juz completion percentages in real time.
• Automated Lesson Gating: Lessons display attached worksheets and quizzes. While locked, items display a lock symbol (🔒) with the directive: "Locks until teacher marks the lesson Completed". Once marked complete by the Ustadh, resources unlock dynamically for download and headless assessment taking.

3. Headless Assessments & In-Portal Quiz Runner (v=assess)

Perhaps our most demanding technical triumph was decoupling Moodle's quiz engine from its legacy HTML rendering pipeline:

// In-Portal Headless Quiz Runner via AJAX API (ajax_quiz.php)
async function submitQuizAttempt(quizId, answersPayload) {
    const modal = document.getElementById('quizTakeModal');
    modal.classList.add('is-submitting');

    const response = await fetch('/local/alkithabportal/ajax_quiz.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            action: 'submit_attempt',
            quiz_id: quizId,
            answers: answersPayload,
            sesskey: M.cfg.sesskey
        })
    });

    const result = await response.json();
    if (result.success) {
        modal.classList.remove('is-open');
        renderQuizResultModal(result.data); // Renders question-by-question score breakdown
    }
}

We built an asynchronous bridge (ajax_quiz.php) that instantiates quiz attempts, serializes question states, validates timer parameters, and records grade book entries—all while presenting the student with a clean, distraction-free modal interface. Students take quizzes, review correct answers, and inspect feedback without ever touching native Moodle.

4. 4-Tier Approval Gating for Academic Certificates (v=cert)

To preserve academic prestige, certificates are protected by an automated 4-tier milestone gate. Each certificate card displays real-time progress indicators:

1. ✓ Course content (All prerequisite lessons marked completed)
2. ✓ Assessment (Required pass marks achieved in final quizzes)
3. ✓ Teacher approval (Ustadh verification of oral recitation proficiency)
4. ✓ Headmistress approval (Final administrative sign-off)

Only when all 4 conditions are satisfied does the solid teal Download certificate button appear, dynamically generating a print-ready vector PDF embedded with verification serial numbers.

Measurable Business Impact & Engineering Outcomes

Following full deployment and automated Playwright browser test audits across all 16 student routes, the transformation achieved remarkable operational outcomes:

• Zero Redirect Leakage (100% In-Portal Sandbox): Over 1,500 active student sessions audited with 0% bounce rate to native Moodle pages.
• Sub-Second FCP Across International Corridors: Redis session caching and Nginx FastCGI microcaching reduced First Contentful Paint to under 420ms on mobile devices.
• 100% Automated Disaster Recovery: Automated Google Drive backups tested with full point-in-time recovery on staging, verifying data integrity in under 4 minutes.
• Elimination of Administrative Churn: Teacher attendance logging time dropped by 75% thanks to the unified reverse-chronological session interface.

Conclusion

Our transformation of Al Kithab Academy proves that enterprise-grade open-source platforms like Moodle do not have to feel clunky, dated, or fragmented. By treating Moodle as an invisible headless data layer and engineering a bespoke, high-trust user interface on top, Sparknest delivered an educational platform that honors the sacred traditions of Islamic scholarship while providing a modern, frictionless digital experience for students and parents worldwide.