3.2 KiB
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 buildlalunpm 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/
- Learner:
src/components/— Komponen UI (admin, course, dashboard, exam, quiz, video)src/contexts/—AuthContext.tsx,ExamContext.tsxsrc/hooks/—useExamPersistence.ts,useProgressTracking.tssrc/features/payroll-reward-system/— modul reward fase-1 (dashboard, services, repositories, types)src/core/events/SystemEvents.ts— event bus bertipe untuk event sistemsrc/config/featureFlags.ts— toggle fiturtailwind.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.tsxdan 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
- Install dependensi:
npm install - Jalankan server dev:
npm run dev - Buka
http://localhost:3000 - 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.mduntuk rujukan path yang lebih dalam.