Platform pembelajaran C++ gratis, interaktif, dan bilingual untuk siswa SMP & SMA Indonesia.
Belajar C++ hadir untuk mengisi kekosongan tutorial C++ modern dalam Bahasa Indonesia. Kebanyakan sumber yang ada masih mengajarkan pola lama seperti Turbo C++, <iostream.h>, atau void main() — yang sudah tidak relevan.
Platform ini mengajarkan C++ modern (C++17) dari nol, langsung bisa dicoba di browser tanpa install apapun.
Ditujukan untuk:
- Siswa SMP & SMA yang belajar C++ untuk pertama kali
- Persiapan kompetisi pemrograman (OSN, ICPC)
- Siapapun yang ingin belajar C++ dalam Bahasa Indonesia
- Interaktif — Editor kode langsung di browser, jalankan C++ tanpa install compiler
- Bilingual — Konten tersedia dalam Bahasa Indonesia dan English
- Progresif — Kurikulum terstruktur dari pemula hingga mahir
- Gratis — Selamanya, tanpa akun, tanpa iklan
- Mobile-friendly — Responsif dari desktop hingga HP Android low-end
- Dark mode — Tampilan nyaman di malam hari
- Progress tracking — Pantau kemajuan belajar secara lokal
| Unit | Topik | Lessons | Status |
|---|---|---|---|
| 0 | Persiapan | 3 | ✅ Tersedia |
| 1 | Dasar-Dasar C++ | 8 | ✅ Tersedia |
| 2 | Percabangan | 6 | ✅ Tersedia |
| 3 | Perulangan | 7 | ✅ Tersedia |
| 4 | Fungsi | 8 | ✅ Tersedia |
| 5 | Array & Data | 7 | 🔒 Coming Soon |
| 6 | Struct & File I/O | 6 | 🔒 Coming Soon |
32 lessons tersedia · ~40-45 jam belajar · 2 proyek mini per unit
| Layer | Teknologi |
|---|---|
| Framework | Astro v5 + React islands |
| Language | TypeScript (strict mode) |
| Styling | Tailwind CSS v4 |
| Code Editor | CodeMirror 6 |
| Syntax Highlight | Shiki (one-dark-pro theme) |
| MDX Directives | remark-directive |
| C++ Execution | Judge0 API (server-side proxy) |
| Deployment | Vercel |
- Node.js 22+
- Judge0 API key (RapidAPI atau self-hosted)
# Clone repository
git clone https://github.com/zedfar/belajar-cpp.git
cd belajar-cpp
# Install dependencies
npm install
# Setup environment variables
cp .env.example .env
# Edit .env dan isi JUDGE0_API_KEY
# Jalankan development server
npm run devBuka http://localhost:4321 di browser.
| Variable | Keterangan | Contoh |
|---|---|---|
JUDGE0_API_URL |
Judge0 endpoint | https://judge0-ce.p.rapidapi.com |
JUDGE0_API_KEY |
API key / auth token | your-key-here |
PUBLIC_SITE_URL |
URL production | https://belajar-cpp.vercel.app |
Untuk self-host Judge0 sendiri (gratis di Oracle Cloud), lihat JUDGE0_SELF_HOSTED.md.
npm run dev # Development server (localhost:4321)
npm run build # Production build
npm run preview # Preview production build
npm run typecheck # TypeScript type checking
npm test # Run tests (vitest)belajar-cpp/
├── public/ # Static assets (favicon, fonts)
├── src/
│ ├── components/
│ │ ├── ui/ # Button, Card, Tabs
│ │ ├── layout/ # Header, Sidebar, Footer, MobileNav
│ │ ├── learn/ # CodePlayground, CodeBlock, Exercise, InfoBox
│ │ └── common/ # ThemeToggle, LanguageToggle, TableOfContents
│ ├── content/
│ │ ├── lessons-id/ # Konten lesson Bahasa Indonesia (MDX)
│ │ └── lessons-en/ # Konten lesson English (MDX)
│ ├── layouts/ # BaseLayout, PageLayout, LessonLayout
│ ├── lib/ # i18n, progress, code-runner, curriculum
│ ├── pages/ # File-based routing Astro
│ ├── plugins/ # Custom remark plugins
│ ├── styles/ # global.css
│ └── types/ # TypeScript type definitions
├── JUDGE0_SELF_HOSTED.md # Panduan self-host Judge0 di Oracle Cloud
├── judge0-portainer.yml # Docker Compose stack untuk Judge0
├── PLAN.md # Arsitektur & rencana pengembangan
└── tailwind.config.ts # Tailwind design tokens
Kontribusi sangat welcome! Beberapa cara untuk berkontribusi:
- 🐛 Laporkan bug — Buka issue
- ✍️ Tulis lesson — Tambah atau perbaiki konten di
src/content/lessons-id/ - 🌐 Terjemahan — Bantu terjemahkan lesson ke English di
src/content/lessons-en/ - 💡 Saran fitur — Diskusikan di Issues
Lesson ditulis dalam format MDX di src/content/lessons-id/unit-X/:
---
title: "Judul Lesson"
unit: 1
lesson: 9
description: "Deskripsi singkat"
objectives:
- "Tujuan pembelajaran 1"
estimatedTime: 30
difficulty: "beginner"
tags: ["tag1", "tag2"]
---
# Judul Lesson
Konten lesson...
:::tip
Gunakan directive ini untuk callout penting.
:::
⚠️ Operator<,>,<=,>=di teks prosa (bukan di code block) harus dibungkus backtick:`<=`
Project ini di-deploy ke Vercel. Setiap push ke main akan trigger deployment otomatis.
# Build production
npm run build
# Preview sebelum deploy
npm run previewSet environment variables di Vercel Dashboard → Settings → Environment Variables.
Dirilis di bawah MIT License. Bebas digunakan, dimodifikasi, dan didistribusikan.