LMS-BGN/docs/bmm-index.md

3.2 KiB

LMS-BGN — Indeks Dokumentasi Proyek (Brownfield)

Dihasilkan: 2025-11-12 Lintasan: quick-flow Level: 2 (Proyek Menengah) Jenis Bidang: brownfield

Ikhtisar

LMS-BGN adalah frontend Next.js 14 + TypeScript untuk Sistem Manajemen Pembelajaran (LMS) dengan alur inti: katalog dan viewer kursus, kuis dan ujian, pelacakan progres, sertifikat, analitik admin, serta modul reward payroll fase-1 (diaktifkan lewat feature flags).

Teknologi

  • Framework: next@14 (App Router)
  • Bahasa: TypeScript
  • Styling: Tailwind CSS (tailwind.config.js)
  • Pengujian: Jest + Testing Library
  • State: React Context (AuthContext, ExamContext) dan hooks
  • Visualisasi: recharts, framer-motion
  • Utilitas: clsx, tailwind-merge, react-hook-form

Jalankan & Build

  • Dev: npm run dev
  • Pemeriksaan tipe: npm run type-check
  • Test: npm test
  • Build: npm run build lalu npm start

Ringkasan Struktur Sumber (terpilih)

  • src/app/ — Halaman App Router Next.js
    • Learner: page.tsx, course/, courses/, reports/
    • Ujian: exams/, exam-session/, exam-summary/
    • Admin: admin/analytics/, admin/exams/, admin/certificates/
    • Lainnya: assignments/, schedule/, ai-assistant/, help/, settings/
  • src/components/ — Komponen UI (admin, course, dashboard, exam, quiz, video)
  • src/contexts/AuthContext.tsx, ExamContext.tsx
  • src/hooks/useExamPersistence.ts, useProgressTracking.ts
  • src/features/payroll-reward-system/ — modul reward fase-1 (dashboard, services, repositories, types)
  • src/core/events/SystemEvents.ts — event bus bertipe untuk event sistem
  • src/config/featureFlags.ts — toggle fitur
  • tailwind.config.js — token desain BGN (warna, bayangan, tipografi)

Alur & Komponen Kunci

  • Viewer Kursus & Modul: src/app/course/[courseId]/page.tsx + src/components/course/*
  • Demo Kuis: src/app/interactive-quiz-demo/page.tsx
  • Sesi Ujian + Ringkasan: src/app/exam-session/*, src/app/exam-summary/*
  • Sertifikat: src/components/admin/CertificatePDF.tsx dan halaman admin sertifikat
  • Analitik Admin: src/app/admin/analytics/*
  • Reward (Fase-1): src/features/payroll-reward-system/*

Dokumentasi yang Sudah Ada

  • PRD: docs/mbg-lms-prd.md
  • Backlog: docs/mbg-lms-backlog.md
  • Rencana Epik: docs/mbg-lms-epic-plan.md
  • Rencana Sprint: docs/mbg-lms-sprint-plan-nov-dec-2025.md
  • Sinkronisasi Codebase: docs/mbg-lms-codebase-sync.md
  • Catatan Brainstorming: docs/brainstorming-session-results-2025-11-11.md
  • Rencana UAT: docs/mbg-lms-uat-plan.md

Snapshot Arsitektur

Aplikasi frontend satu bagian (Next.js) dengan modul fitur:

  • Halaman learner/admin di src/app
  • State berbasis Context untuk auth dan persistensi ujian
  • Feature flags mengisolasi modul opsional (reward, AI)
  • Event bus menyediakan event bertipe antar fitur

Langkah Memulai

  1. Install dependensi: npm install
  2. Jalankan server dev: npm run dev
  3. Buka http://localhost:3000
  4. Jalankan pemeriksaan tipe dan test sebelum perubahan: npm run type-check && npm test

Catatan

  • Dokumentasi brownfield sudah cukup untuk lanjut ke langkah perencanaan tech-spec.
  • Gunakan docs/mbg-lms-codebase-sync.md untuk rujukan path yang lebih dalam.