NoltPedia — Fundamental Programming Learning Platform & Content Management Engine

Platform dokumentasi dan pembelajaran pemrograman fundamental berbasis Astro SSR + React Islands yang menggabungkan situs edukasi publik dengan dashboard CMS internal terpusat. Mengusung filosofi "logika dulu, sintaks kemudian" dengan identitas visual Neobrutalism, dilengkapi pembaca Markdown kustom (quiz, callout, challenge), alur belajar (learning path), glosarium teknis, bulk import API, serta autentikasi Better Auth. Dibangun mandiri secara end-to-end.

---

Ringkasan Proyek

• Kategori: Personal Project
• Peran: Full-Stack Engineer
• Tech Stack: Astro (SSR output), React (Client Islands), TypeScript, Tailwind CSS v4, Drizzle ORM, Neon PostgreSQL, Better Auth, Vercel Adapter

---

Masalah yang Dihadapi

Materi pembelajaran pemrograman umum di internet sering kali berfokus pada hasil instan tanpa memberikan pemahaman mendasar:

• Pendekatan Dangkal: Pembelajar memahami "cara memakai" library/framework tertentu, tetapi tidak memahami "cara kerja" dasar komputer dan algoritma di baliknya.
• Ketergantungan Pola Copy-Paste: Kesulitan dalam membangun fondasi pemikiran kritis (problem-solving mindset), membuat pembelajar kebingungan saat berpindah tech stack.
• Materi Terfragmentasi: Kurangnya platform terpusat yang menghubungkan teori konsep, glosarium istilah teknis, artikel mendalam, dan alur belajar (learning path) secara terstruktur.

---

Solusi & Fitur Utama

1. Public Learning Experience & Structured Learning Paths
   Perpustakaan artikel teknis dengan indikator tingkat kesulitan, direktori topik pembelajaran terstruktur, glosarium istilah teknis, serta kurasi alur belajar (learning path) dari tingkat dasar hingga lanjutan.

2. Interactive Content Layer & Custom Markdown Engine
   Renderer Markdown kustom yang dilengkapi penyorot sintaksis (syntax highlighting) dan komponen interaktif tertanam seperti modul kuis (quiz), pemicu tantangan (challenge), serta blok catatan khusus (callouts).

3. Discussion & Community Interactions
   Sistem diskusi komentar di setiap artikel dengan verifikasi otorisasi pengguna berbasis permission check untuk pengelolaan balasan dan pembersihan komentar.

4. Centralized Admin CMS & Analytics Dashboard
   Panel administratif internal untuk pemantauan statistik publikasi (draft vs published), pengelolaan entitas (topik, artikel, glosarium, path), serta pencarian global lintas entitas (Global Search API).

5. Automated Bulk Import API Engine
   Endpoint API kustom yang memungkinkan kurator konten mengimpor kumpulan topik, artikel, dan urutan learning path secara sekaligus dalam satu transaksi data yang efisien.

6. Secure Session Authentication & Route Protection
   Sistem autentikasi ganda (Email/Password & Google OAuth) via Better Auth dengan proteksi middleware session validation pada rute privat /dashboard dan endpoint API sensitif.

---

Tech Stack & Arsitektur

NoltPedia dibangun mengadopsi pola arsitektur Astro Server-Side Rendering (SSR) yang dipadukan dengan React Client Islands untuk menjaga keseimbangan antara performa pemuatan awal (SEO-friendly) dan interaktivitas komponen.

• Presentation & Routing Layer: Astro Pages (SSR Output) menangani ruting halaman publik dan struktur administratif, menjamin kecepatan First Contentful Paint (FCP).
• Interactive Layer: React Components (Astro Islands) digunakan secara terisolasi pada area yang membutuhkan interaktivitas kompleks (editor antarmuka, dialog pencarian, dan sistem komentar).
• API & Security Layer: Astro API Routes modular per domain (/api/articles, /api/topics, /api/glossary) yang dilindungi oleh middleware session checks dan Better Auth.
• Data Layer: Drizzle ORM (type-safe schema & queries) yang beroperasi di atas Neon PostgreSQL.
• Design System: Utility-first Tailwind CSS v4 dengan penerapan token desain gaya Neobrutalism yang konsisten.

---

Tantangan Teknis & Solusi

• Optimasi Ukuran Bundle pada Komponen Interaktif:
  Tantangan: Penggunaan syntax highlighter, parser Markdown, dan pustaka ikon berpotensi membengkakkan ukuran JavaScript bundle di sisi klien.
  Solusi: Memanfaatkan arsitektur Astro Islands untuk merender artikel teknis secara server-side (SSR) dan membatasi eksekusi JavaScript React hanya pada elemen interaktif yang membutuhkan state.

• Pemisahan Jalur Publik dan Dashboard CMS Internal:
  Tantangan: Menyatukan akses publik yang cepat dan indeksibel dengan area manajemen internal yang terproteksi ketat dalam satu codebase.
  Solusi: Merancang middleware authentication-aware yang memeriksa validitas sesi token sebelum memproses rute /dashboard dan endpoint API mutasi data.

• Automasi Transaksi Kurasi Konten Terstruktur:
  Tantangan: Proses input manual secara terpisah untuk topik, artikel, dan urutan learning path memakan waktu operasional yang lama.
  Solusi: Membangun Bulk Import API Engine yang mengeksekusi pembuatan entitas relasional secara terstruktur dalam satu transaksi atomic logic.

---

Pembelajaran & Catatan Teknis

• Merancang arsitektur aplikasi edukasi full-stack berbasis Astro SSR dan React Client Islands.
• Mengimplementasikan parser Markdown kustom yang mendukung penyerapan komponen interaktif (quiz, challenge, callout).
• Mengintegrasikan sistem autentikasi Better Auth dengan proteksi middleware session pada rute API dan dashboard CMS.