HP.
Navigasi
Semua proyek

Tugas akhir · Frontend

Protextify: Frontend LMS dan Evaluasi Performa

Frontend React untuk student, instructor, dan admin dengan editor preventif, riwayat pemeriksaan, dan evaluasi performa.

Kunjungi website
Halaman utama Protextify dengan penjelasan platform deteksi plagiarisme akademik.
Ringkasan proyekProtextify
JenisTugas akhir
PeranFrontend Developer
Lingkup kolaborasiFrontend dengan integrasi layanan backend
AksesWebsite proyek
01

Konteks

Student, instructor, dan admin membutuhkan pengalaman yang konsisten dalam satu aplikasi, sementara alur penulisan perlu mengurangi praktik copy-paste dan tetap terhubung dengan layanan pemeriksaan backend.

Teknologi
  • React 19
  • Vite
  • React Router
  • Context API
  • Tailwind CSS
  • k6 Browser
02

Kontribusi saya

  • Mengembangkan SPA berbasis komponen serta primitive antarmuka yang dapat digunakan ulang.
  • Menerapkan Context API untuk autentikasi, persistensi sesi, protected route, dan akses berbasis role.
  • Mengembangkan editor dengan pembatasan copy, paste, dan klik kanan sebagai mekanisme preventif.
  • Mengintegrasikan riwayat pemeriksaan plagiarisme dan layanan backend melalui service layer Axios.
  • Menerapkan lazy loading, code splitting, PWA, dan optimasi aset gambar.
03

Keputusan teknis

Context untuk session state

Context API menjaga status autentikasi lintas halaman tanpa menambah state library yang belum dibutuhkan.

Navigasi berdasarkan peran

Route guard mengatur tampilan dan navigasi student, instructor, dan admin. Pemeriksaan izin data tetap menjadi tanggung jawab backend.

Optimasi bertahap

Code splitting mengurangi pekerjaan awal, sedangkan pengujian per alur menjaga optimasi tetap terukur.

04

Kendala & solusi

01

Satu aplikasi melayani tiga role dengan navigasi dan izin berbeda.

Keputusan
Menyatukan session state lalu memasang guard dan aturan akses pada route.
Hasil
Alur akses menjadi lebih konsisten dan komponen dapat digunakan lintas role.
02

Aset dan kode halaman berisiko memperbesar waktu muat awal.

Keputusan
Menerapkan code splitting, lazy loading, dan konversi aset terpilih ke WebP.
Hasil
Ukuran aset uji berkurang, tetapi FCP dan LCP pada beberapa alur tetap dicatat sebagai pekerjaan optimasi berikutnya.
05

Validasi

  • Black-box testing dengan Selenium IDE untuk skenario fitur penting.
  • Pengujian performa alur aplikasi dengan k6 Browser dan peninjauan Web Vitals.
  • Usability testing menggunakan System Usability Scale (SUS).
  • Evaluasi membedakan hasil pemeriksaan fungsi dari metrik render browser yang masih memerlukan optimasi.
06

Hasil

  • 01Alur penulisan dan riwayat pemeriksaan tersedia untuk peran student, instructor, dan admin.
  • 02Evaluasi mengidentifikasi pemuatan aset dan metrik render sebagai sasaran optimasi berikutnya.