● OPEN TO WORK ITS 2024

// FULLSTACK & SYSTEM DESIGN LEAD

NABILAH
BUNGA
SULISTIA

ITS Informatics Engineering · Fullstack Developer · Network Programming Final Project — LiveClass, portal kelas real-time dengan sistem AI proctoring anti-cheat untuk pembelajaran daring.

25+PROJECTS
3+YRS CODING
6ANTI-CHEAT MODULES
Nabilah Bunga
PLAYER 1 READY
DEMO

LIVECLASS VIDEO

▲ Demo LiveClass — arsitektur realtime & anti-cheat engine

APP

LIVECLASS — LIVE

Aplikasi LiveClass berjalan penuh — silakan gunakan langsung di bawah ini.

▲ Aplikasi LiveClass — akses penuh dari browser

01

ABOUT.ME

EDUCATION
INSTITUT TEKNOLOGI
SEPULUH NOPEMBER
Informatics Engineering · 2024 – Present

Active staff of Technopreneurship Development Center. Specializing in fullstack development, real-time systems, dan software architecture design.

HTML/CSS JavaScript Python Flask Socket.IO React + TS OpenCV Figma
PROFILE
FULLSTACK &
SYSTEM ARCHITECT

Saya Nabilah — fokus membangun sistem real-time yang reliable. Pada proyek akhir Network Programming, saya menganalisis dan merancang ulang arsitektur komunikasi LiveClass berbasis WebSocket, termasuk audit fitur anti-cheat yang sudah terbangun namun belum sepenuhnya terhubung ke frontend.

2

Realtime Apps

3+

Yrs Coding

02

LIVECLASS — DOCS

NETWORK PROGRAMMING FINAL PROJECT

LIVECLASS

Nabilah Bunga Sulistia

REAL-TIME SOCKET.IO AI PROCTORING FLASK BACKEND REACT + TYPESCRIPT
📅 Duration: 1 Semester
👤 Role: Fullstack & System Analyst
🛠 Flask · Socket.IO · React/TS · OpenCV · Figma

01 // INTRODUCTION

Description: LiveClass merupakan portal kelas interaktif real-time yang menghubungkan Teacher dan Student dalam satu ruang virtual. Sistem ini mendukung whiteboard interaktif dengan sinkronisasi PDF, kuis live dengan leaderboard, serta modul pengawasan integritas akademik (AI Proctoring) yang memantau aktivitas student selama sesi kelas berlangsung.


Solution Proposed: Aplikasi hadir sebagai solusi atas keterbatasan platform kelas daring konvensional yang sulit memverifikasi keaktifan dan kejujuran student secara real-time. Teacher dapat membuat ruang kelas dengan kode unik, menyiarkan pengumuman dan materi, sekaligus memantau indikator integritas tiap student — sementara student mendapat pengalaman belajar interaktif yang tetap terjaga kredibilitasnya.

03 // ANTI-CHEAT ENGINE — MODUL DETEKSI

Modul inti proctoring AI yang menjaga integritas sesi kelas secara realtime:

TAB SWITCH
DETECTOR
Memantau perpindahan tab/window browser student selama sesi berlangsung.BLUR TRACKER
FACE
DETECTOR
Deteksi kehadiran wajah lewat webcam untuk memastikan student tetap di depan kamera.WEBCAM CHECK-IN
HEAD POSE
ESTIMATOR
Mengestimasi orientasi kepala memakai solvePnP untuk mendeteksi arah pandang menyimpang.solvePnP
GAZE
TRACKER
Melacak arah pandangan mata student relatif terhadap layar selama sesi aktif.EYE TRACKING
PHONE
DETECTOR
Mendeteksi keberadaan perangkat HP di frame webcam sebagai indikasi pelanggaran.OBJECT DETECT
HAND PROXIMITY
DETECTOR
Mendeteksi kedekatan tangan dengan area mencurigakan (catatan, perangkat lain).PROXIMITY

🔍 STATUS IMPLEMENTASI (HASIL ANALISIS KODEBASE)

MODUL
STATUS
CATATAN ANALISIS
AntiCheatEngine (core)
BUILT
Engine backend lengkap, namun belum pernah ditrigger oleh frontend.
Webcam Check-in
UI ONLY
Instruksi presensi scan wajah tampil di UI, alur trigger ke engine belum terhubung.
Tab Switch Detector
PARTIAL
Logic blur-tracker tersedia di backend, listener event di frontend belum aktif.
Socket.IO Broadcast
LIVE
Broadcast pengumuman & leaderboard berjalan realtime sesuai pengujian.
Catatan Analisis: Audit kodebase menemukan gap integrasi antara backend dan frontend — beberapa modul AntiCheatEngine sudah terimplementasi penuh secara logic, namun belum dipanggil dari sisi React/TypeScript, sehingga fitur tidak teraktivasi saat sesi kelas berjalan.

04 // SOFTWARE ARCHITECTURE (MVC)

▸ MODEL User, Teacher, Student, Kelas, Pengumuman, Tugas, MateriBelajar, KuisLive, Leaderboard, SesiProctoring, LogPelanggaran, BankSoal ▸ VIEW Login Page, Workspace Teacher, Dashboard Kelas, Form Broadcast, Halaman Kuis Live, Panel Proctoring, Bank Soal, Kalender Akademik ▸ CONTROLLER AuthController, KelasController, PengumumanController, TugasController, KuisController, ProctoringController, SocketController, AsistenAIController
MVC memisahkan logika bisnis, antarmuka, dan kontrol alur data realtime — meningkatkan maintainability, testability, dan scalability sistem LiveClass, terutama dalam menangani banyak koneksi Socket.IO secara bersamaan.

📋 PROJECT OVERVIEW

RINGKASAN

Portal kelas real-time yang menggabungkan kolaborasi interaktif dengan pengawasan integritas akademik berbasis AI.

LATAR BELAKANG

Pembelajaran daring rentan terhadap kecurangan akademik tanpa mekanisme pengawasan yang memadai.

TARGET PENGGUNA

Dosen/guru pengampu mata kuliah, mahasiswa/siswa peserta kelas daring.

OUTCOME

Arsitektur realtime terbangun penuh; modul anti-cheat teridentifikasi siap diintegrasikan ke frontend.

📈 PROJECT IMPACT

6Modul Anti-Cheat Dirancang
3Ruang Kelas Diuji
100%Broadcast Realtime Berhasil
2Role Sistem (Teacher/Student)

📚 LESSONS LEARNED

⚠ Tantangan

Menyinkronkan banyak event realtime (broadcast, kuis, proctoring) tanpa bottleneck di koneksi Socket.IO.

✅ Solusi

Audit kodebase menyeluruh untuk memetakan fitur backend yang belum terhubung ke frontend.

💡 Insight

Engine anti-cheat yang solid secara logic tidak cukup tanpa integrasi trigger di sisi client.

🤝 Pengalaman

Kolaborasi lintas layer (backend Flask, realtime Socket.IO, frontend React/TS) krusial untuk sistem yang utuh.

03

CONTACT.EXE

LET'S COLLABORATE_

Hubungi saya untuk diskusi lebih lanjut tentang LiveClass atau proyek system design lainnya.