Arsitektur Sistem

Dokumentasi arsitektur sistem LMS Codeverta — memahami bagaimana komponen-komponen platform saling terhubung.

Gambaran Umum Arsitektur

LMS Codeverta menggunakan arsitektur monorepo dengan backend API (Go/Gin) dan frontend SPA (React/Vite) yang terpisah. Berikut adalah gambaran arsitektur tingkat tinggi:

┌─────────────────────────────────────────────────────────────┐
│                         HTTPS/HTTP                           │
│                    (Cloudflare / Nginx)                      │
├─────────────────────┬───────────────────────┬───────────────┤
│                     │                       │               │
│  ┌──────────────┐   │   ┌──────────────┐    │  ┌─────────┐ │
│  │  Frontend    │   │   │  Frontend    │    │  │ Landing │ │
│  │  Admin       │───┼──▶│  Admin (CDN) │──┐ │  │  Page   │ │
│  │  (Vite/React)│   │   │  (Nginx)     │  │ │  │(Workers)│ │
│  └──────────────┘   │   └──────────────┘  │ │  └─────────┘ │
│                     │                      │ │              │
├─────────────────────┼──────────────────────┼─┼──────────────┤
│                     │                      │ │              │
│                     ▼                      ▼ │              │
│              ┌────────────────────────────┐  │              │
│              │     Go Backend (Gin)       │◀─┘              │
│              │     :8080 / :3000          │                 │
│              └──────────┬─────────────────┘                 │
│                         │                                   │
│         ┌───────────────┼───────────────┐                   │
│         │               │               │                   │
│         ▼               ▼               ▼                   │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐            │
│  │   MySQL    │  │   Redis    │  │  Storage   │            │
│  │  Database  │  │   Cache    │  │   Files    │            │
│  │  :3306     │  │   :6379    │  │            │            │
│  └────────────┘  └────────────┘  └────────────┘            │
│                                                             │
│  ┌──────────────┐  ┌────────────────┐  ┌───────────────┐   │
│  │   Xendit     │  │   OpenAI       │  │   SES/Tencent │   │
│  │  (Payment)   │  │   (AI Chat)    │  │   (Email)    │   │
│  └──────────────┘  └────────────────┘  └───────────────┘   │
└─────────────────────────────────────────────────────────────┘

Tech Stack

Backend

Komponen	Teknologi	Versi	Fungsi
Bahasa	Go (Golang)	1.22+	Bahasa pemrograman backend
HTTP Framework	Gin	v1.9+	Routing, middleware, request handling
ORM	GORM	v2+	Database ORM dan migrasi
Database	MySQL / MariaDB	8.0+	Penyimpanan data utama
Cache	Redis	6.0+	Session store, rate limiting, cache
Validator	go-playground/validator	v10+	Validasi input request
Session	gin-contrib/sessions	-	Manajemen session (cookie/redis)

Frontend

Komponen	Teknologi	Versi	Fungsi
Framework	React	18+	Library UI frontend
Build Tool	Vite	5+	Bundler dan dev server
CSS	Tailwind CSS	3+	Utility-first CSS framework
State Management	React Context + Zustand	-	Manajemen state global
Routing	React Router	6+	Routing SPA
HTTP Client	Axios / Fetch	-	Komunikasi dengan backend API

Infrastructure

Komponen	Teknologi	Fungsi
Container	Docker	Containerization
Orchestration	Docker Compose	Multi-container setup
Reverse Proxy	Nginx	Static files & reverse proxy untuk frontend
CDN / Edge	Cloudflare Workers	Landing page
Payment Gateway	Xendit	Pemrosesan pembayaran
AI	OpenAI API	Chat AI cerdas
Email	Tencent SES	Pengiriman email transaksional

Struktur Monorepo

Proyek LMS Codeverta menggunakan pnpm workspace untuk mengelola monorepo:

lms.codeverta.com/
├── apps/
│   ├── admin/                    # React Frontend (Vite)
│   │   ├── src/
│   │   │   ├── components/      # Komponen UI reusable
│   │   │   ├── pages/           # Halaman aplikasi
│   │   │   ├── context/         # React Context providers
│   │   │   ├── hooks/           # Custom React hooks
│   │   │   ├── lib/             # Utility functions
│   │   │   ├── store/           # Zustand stores
│   │   │   ├── schemas/         # Form validation schemas
│   │   │   └── layout/          # Layout komponen
│   │   ├── public/              # Static assets
│   │   └── ...konfigurasi
│   │
│   ├── backend/                  # Go Backend
│   │   ├── main.go              # Entry point
│   │   ├── router/              # Route definitions
│   │   │   ├── api-router.go    # Main API router
│   │   │   ├── auth-router.go   # Authentication routes
│   │   │   ├── admin-router.go  # Admin routes
│   │   │   ├── lms-router.go    # LMS routes
│   │   │   └── public-router.go # Public routes
│   │   ├── controller/          # HTTP handlers
│   │   ├── model/               # GORM models & DB init
│   │   ├── repository/          # Data access layer
│   │   ├── services/            # Business logic
│   │   ├── middleware/          # HTTP middleware
│   │   ├── common/              # Shared utilities
│   │   ├── dto/                 # Data Transfer Objects
│   │   ├── validator/           # Custom validators
│   │   └── handler/             # Additional handlers
│   │
│   └── landing/                 # Landing page (Cloudflare Workers)
│       └── src/
│
├── docs/                        # Dokumentasi (folder ini)
├── pnpm-workspace.yaml          # Workspace config
├── pnpm-lock.yaml               # Lock file
├── docker-compose.yml           # Docker Compose
└── package.json                 # Root package.json

Arsitektur Backend (Layered Architecture)

Backend LMS Codeverta menggunakan Layered Architecture yang memisahkan tanggung jawab ke dalam lapisan-lapisan:

Layer Diagram

┌──────────────────────────────────────────────────────────┐
│                    ROUTER LAYER                           │
│  Menentukan route → middleware → controller              │
│  File: router/*.go                                        │
├──────────────────────────────────────────────────────────┤
│                   MIDDLEWARE LAYER                        │
│  Rate limiting, autentikasi, CORS, tenant resolver       │
│  File: middleware/*.go                                    │
├──────────────────────────────────────────────────────────┤
│                  CONTROLLER LAYER                         │
│  HTTP request/response handling, validasi input           │
│  File: controller/*.go                                    │
├──────────────────────────────────────────────────────────┤
│                  SERVICE LAYER                            │
│  Business logic, integrasi eksternal (Xendit, OpenAI)    │
│  File: services/*.go                                      │
├──────────────────────────────────────────────────────────┤
│                REPOSITORY LAYER                           │
│  Akses database, query, data persistence                 │
│  File: repository/*.go                                    │
├──────────────────────────────────────────────────────────┤
│                   MODEL LAYER                             │
│  Definisi tabel, relasi, database initialization          │
│  File: model/*.go                                         │
└──────────────────────────────────────────────────────────┘

Alur Request

HTTP Request
     │
     ▼
┌─────────────┐     ┌──────────────────┐
│  Gin Router │────▶│   Middleware      │
│  /api/*     │     │  - CORS          │
└─────────────┘     │  - Rate Limit    │
                    │  - Auth          │
                    │  - Tenant        │
                    └────────┬─────────┘
                             │
                             ▼
                    ┌──────────────────┐
                    │   Controller      │
                    │  (Handler)        │
                    └────────┬─────────┘
                             │
                             ▼
                    ┌──────────────────┐
                    │   Repository      │
                    │  (Database)      │
                    └────────┬─────────┘
                             │
                             ▼
                    ┌──────────────────┐
                    │   MySQL/Redis    │
                    └──────────────────┘
                             │
                             ▼
                    HTTP Response (JSON)

Arsitektur Frontend (Component-Based)

Frontend LMS Codeverta menggunakan arsitektur Component-Based dengan React:

Struktur Halaman

┌─────────────────────────────────────────┐
│               App Layout                 │
├──────────┬──────────────────────────────┤
│          │                              │
│  Sidebar │         Main Content         │
│          │                              │
│  - Nav   │    (React Router Pages)      │
│  - Menu  │                              │
│          │   ┌──────────────────────┐   │
│          │   │  Dashboard Page      │   │
│          │   ├──────────────────────┤   │
│          │   │  Course Page         │   │
│          │   ├──────────────────────┤   │
│          │   │  Quiz Page           │   │
│          │   └──────────────────────┘   │
│          │                              │
└──────────┴──────────────────────────────┘

Manajemen State

Frontend menggunakan kombinasi React Context dan Zustand untuk state management:

Context — State global seperti autentikasi user, role, tenant
Zustand Store — State spesifik fitur (kursus, kuis, chat)
Local State — State komponen lokal (form input, UI state)

Alur Data Frontend

User Action (klik, submit form)
        │
        ▼
React Component
        │
        ▼
Custom Hook (useFetch, useAuth, dll)
        │
        ▼
API Call (Axios → Backend)
        │
        ▼
Zustand Store / Context (update state)
        │
        ▼
React Re-render (UI updated)

Sistem Database

Entity Relationship Diagram (Textual)

Berikut adalah relasi utama antar entitas di LMS Codeverta:

users (id, email, password, role, name, status)
  │
  ├──< students (user_id → courses)  [Many-to-Many via enrollments]
  │
  ├──< mentor (user_id → students)   [One-to-Many]
  │
  └──< parent (user_id → students)   [Many-to-Many via parent_student]
  
courses (id, title, slug, description, price, status)
  │
  ├──< modules (course_id)           [One-to-Many]
  │      │
  │      ├──< lessons (module_id)     [One-to-Many]
  │      │
  │      └──< quizzes (module_id)     [One-to-Many]
  │             │
  │             └──< questions (quiz_id) [One-to-Many]
  │                     │
  │                     └──< options (question_id) [One-to-Many]
  │
  └──< certificates (course_id → user_id)

chat_messages (id, sender_id, receiver_id, message, type)
learning_schedules (id, user_id, title, date, time, duration)

Tabel Utama

Tabel	Fungsi
users	Data semua pengguna (siswa, orang tua, mentor, admin)
courses	Data kursus
modules	Modul dalam kursus
lessons	Pelajaran dalam modul
lesson_details	Detail konten pelajaran
quizzes	Kuis dalam modul
quiz_questions	Soal dalam kuis
quiz_options	Opsi jawaban soal
quiz_attempts	Riwayat pengerjaan kuis
enrollments	Pendaftaran siswa ke kursus
certificates	Sertifikat kelulusan
certificate_templates	Template sertifikat
learning_schedules	Jadwal belajar
chat_messages	Pesan chat
orders	Pesanan pembayaran
payments	Transaksi pembayaran
subscriptions	Langganan pengguna
promo_codes	Kode promo
system_settings	Pengaturan global sistem
audit_logs	Log aktivitas

Multi-Tenant Architecture

LMS Codeverta mendukung multi-tenant dimana satu instalasi dapat melayani multiple institusi/tenant:

Cara Kerja Tenant Resolution

Setiap request masuk membawa identitas tenant (via subdomain atau header)
TenantMiddleware akan me-resolve tenant dari request
Data di-scope berdasarkan tenant_id

Request: https://institusiA.lms.codeverta.com/api/courses
                         │
                         ▼
              TenantMiddleware.Resolve()
                         │
                         ▼
              Menentukan tenant = "institusiA"
                         │
                         ▼
              Query dibatasi: WHERE tenant_id = 'institusiA'

Security Architecture

Lapisan Keamanan

Lapisan	Teknologi	Fungsi
Transport	HTTPS/SSL	Enkripsi data in-transit
API Rate Limiting	middleware/rate-limit	Mencegah brute force & abuse
Autentikasi	JWT + Session	Verifikasi identitas pengguna
Otorisasi	Role-based access control (RBAC)	Pembatasan akses berdasarkan role
Input Validation	go-playground/validator	Mencegah injection & malformed data
CORS	middleware/CORS	Pembatasan akses dari domain asing
Body Size Limit	middleware/body-size-limit	Mencegah upload file terlalu besar

RBAC (Role-Based Access Control)

Level 100  Super Admin ─── Akses penuh ke semua fitur
Level 99   Admin      ─── Akses manajemen sistem
Level 30   Mentor     ─── Mengelola siswa & tugas
Level 10   Orang Tua  ─── Memantau progres anak
Level 1    Siswa      ─── Akses kursus & belajar

Integrasi Eksternal

Service	Tujuan	Metode Komunikasi
Xendit	Payment gateway	REST API + Webhook
OpenAI	AI Chat asisten	REST API (GPT)
Tencent SES	Email transaksional	SDK API
Redis	Caching & session	TCP/IP
MySQL	Database utama	TCP/IP (GORM)

Skalabilitas

Vertical Scaling

Tambah resource CPU/RAM pada server
Optimasi query database dengan indexing
Gunakan connection pooling

Horizontal Scaling

Multiple backend instances behind load balancer
Redis sebagai shared session store
Database read replicas untuk query berat
CDN untuk static assets frontend

Caching Strategy

Redis Cache — Data yang sering diakses (daftar kursus, profil user)
Query Cache — Hasil query yang jarang berubah
Browser Cache — Static assets (CSS, JS, images)
CDN — Distribusi konten statis secara global

Monitoring & Logging

Logging

Structured Logging — Menggunakan zap logger (JSON format)
Request Logs — Method, path, status code, latency
Error Logs — Stack trace dan konteks error
Audit Logs — Aktivitas penting pengguna (login, create, delete)

Metrik yang Dipantau

Response time — Latency API
Error rate — Persentase error request
Throughput — Jumlah request per detik
Database connections — Jumlah koneksi aktif
Memory & CPU usage — Resource utilization

Deployment Architecture

Development

Local Machine
├── Backend : localhost:3000 (Go run)
├── Frontend: localhost:5173 (Vite dev server)
├── MySQL   : localhost:3306
└── Redis   : localhost:6379

Production (Docker)

Docker Host
├── Container: backend (Go binary)
├── Container: admin (Nginx + React build)
├── Container: mysql (MySQL 8)
├── Container: redis (Redis 6)
└── Network: docker-network (bridge)

CI/CD Pipeline (Ideal)

Git Push → Build → Test → Docker Image → Deploy
  │         │        │         │            │
  ▼         ▼        ▼         ▼            ▼
GitHub   pnpm +   go test   docker     docker-compose
         vite     + vitest  build      up -d

Disaster Recovery

Backup Strategy

Database — Daily automated backup via cron/mysqldump
Files — Backup storage files (uploads, media)
Configuration — Version-controlled .env.example

Recovery Plan

Restore database from latest backup
Restore storage files
Redeploy application containers
Verify data integrity
Test critical user flows

Terakhir diperbarui: Juni 2026

Gambaran Umum Arsitektur​

Tech Stack​

Backend​

Frontend​

Infrastructure​

Struktur Monorepo​

Arsitektur Backend (Layered Architecture)​

Layer Diagram​

Alur Request​

Arsitektur Frontend (Component-Based)​

Struktur Halaman​

Manajemen State​

Alur Data Frontend​

Sistem Database​

Entity Relationship Diagram (Textual)​

Tabel Utama​

Multi-Tenant Architecture​

Cara Kerja Tenant Resolution​

Security Architecture​

Lapisan Keamanan​

RBAC (Role-Based Access Control)​

Integrasi Eksternal​

Skalabilitas​

Vertical Scaling​

Horizontal Scaling​

Caching Strategy​

Monitoring & Logging​

Logging​

Metrik yang Dipantau​

Deployment Architecture​

Development​

Production (Docker)​

CI/CD Pipeline (Ideal)​

Disaster Recovery​

Backup Strategy​

Recovery Plan​