Learn Hub

Interactive, bilingual (English / ไทย) courses for learning programming languages and web technology — every example runs right in your browser.

43 courses · 6 projects Runnable code EN / ไทย Quizzes & saved progress

Real-World Projects — build production-shaped apps

Step-by-step, bilingual project guides that adapt the courses into real applications. Read, follow along, and ship.

🗂️TaskFlow — Realtime Kanban

Advanced

Rust (Axum) + PostgreSQL + Redis + Astro + WebSocket + Docker. Auth, boards/columns/cards, drag & drop with live multi-user sync.

📝DevBlog — Headless CMS

Intermediate

Node/NestJS + MongoDB + GraphQL + Next.js. Markdown content, a code-first GraphQL API, comments & moderation, and an SSR/ISR public blog.

🛒ShopMicro — Microservices

Advanced

Go + gRPC + PostgreSQL + Kafka + RabbitMQ + Kubernetes. Five services, an outbox-driven order saga, a resilience layer, and a Helm deploy.

💪FitTrack — Fitness App

Intermediate

Python/FastAPI + Supabase + Flutter + Svelte. Two clients — a Flutter app and a Svelte companion — on one JWT-secured backend.

🧩Mosaic — Micro-frontends

Advanced

Module Federation 2.0 + React + Svelte + Astro + Web Components. A storefront of independently-deployed micro-frontends, each a vertical slice with its own Hono BFF.

📴OfflineNotes — Offline-first PWA

Advanced

TypeScript + Web Components + IndexedDB + WASM (Rust) + Astro. Local-first notes with a Rust→WASM CRDT that merges edits conflict-free and syncs across devices.

☁️CloudDeploy — Infra Capstone

Advanced

Terraform + Terragrunt + AWS/GCP/Azure + Datadog + Keycloak + GrowthBook. One workload — ShopMicro's Helm chart — on EKS, GKE, and AKS, wired by OIDC CI/CD.

Language Deep Dives — master the language itself

Standalone, language-core courses. Deep fluency in the language and its runtime, before any framework.

🐹Go Deep Dive

Beginner → Advanced

Syntax, types, methods & interfaces, concurrency, errors & generics, stdlib & net/http, testing, runtime internals, and reading AI-written Go.

🟢Node.js Deep Dive

Beginner → Advanced

JS essentials, the event loop & libuv, core APIs, streams & backpressure, production HTTP, modules & npm, node:test, runtime internals (V8, memory, workers, security), and reading AI-written Node.js — every snippet verified on Node 24.

🐍Python Deep Dive

Beginner → Advanced

Syntax, data structures, the data model, functions, typing & errors, async & the GIL, stdlib & tooling, runtime internals (bytecode, GC, free-threading), and reading AI-written Python.

🦀Rust Deep Dive

Beginner → Advanced

Ownership & borrowing, structs/enums/matching, traits & dyn compatibility, errors, iterators & closures, threads/channels/async, cargo & clippy, runtime internals (memory layout, drop, borrow checker, async model), and reading AI-written Rust — every snippet compiles on rustc 1.96 / edition 2024 with the real diagnostics shown.

🔷TypeScript Deep Dive

Beginner → Advanced

Structural typing & inference, everyday types, generics & variance, classes, type-level programming & type tests, the compiler & tooling, how the checker thinks, and reading AI-written TypeScript — every snippet compiles in the browser.

🐦Flutter Deep Dive

Advanced

Dart 3.13 (records, patterns, class modifiers, sound null safety, event loop proven), the widget/element/render trees, the constraints layout algorithm with real overflow errors, state management (Riverpod 3 codegen, InheritedModel, Bloc 9), go_router 18 (StatefulShellRoute, typed routes), platform channels & Pigeon, isolates, animations, slivers, Impeller, testing with mocktail, wasm/obfuscated release builds, a How Flutter Works internals module (three trees, frame scheduling, RenderBox protocol, Dart VM), a Reading AI-generated Flutter module (28-bug catalog + 3 worked reviews) and DartPad embeds — every claim proven with widget tests on Flutter 3.47.5.

⚛️React Deep Dive

Advanced

UI = f(state), JSX & reconciliation, hooks in depth (useEffectEvent, ref cleanup), state & data flow, concurrent React & Suspense, React 19.3 (Actions, Server Functions, Activity, View Transitions, the compiler), performance with a live render visualizer, production, a How React Works internals module and a Reading AI-generated React module — every claim proven by a vitest fence.

▲Next.js Deep Dive

Advanced

App Router & Server/Client Components, routing & layouts, the four caching layers and current default caching, static/dynamic/streaming rendering & Partial Prerendering, Server Actions & mutations, proxy.ts, optimization, production, the end-to-end request lifecycle, and a Reading AI-generated Next.js module (25-entry bug catalog, worked reviews) — every snippet compiled against Next.js 16.3 (Sept 2026).

🚀Astro Deep Dive

Advanced

Islands architecture with real compiler and hydration internals, the .astro component, client directives, content collections (Content Layer API) and live collections, SSR & adapters, Actions with real auth, server islands, view transitions, images & caching as they really behave, an in-browser compile-check playground, a How Astro Works internals module and a Reading AI-generated Astro module (22-bug catalog + 3 worked reviews) — every claim proven in a real Astro 7 probe by astro check, vitest or curl.

🧡Svelte Deep Dive

Advanced

The compiler model with real compiler output, runes reactivity ($state/$derived/$effect/$props) including async Svelte, components & snippets, boundaries, attachments & bindings, stores vs runes, full-stack SvelteKit 2 (streaming, hooks, remote functions), an in-browser compile-and-run playground, a How Svelte Works internals module and a Reading AI-generated Svelte module — every claim proven by a vitest or svelte-check fence.

For TypeScript Developers — backend, comparison-first

Learn a backend language by mapping it to the TypeScript you already know.

🐹Go for TypeScript Developers

Intermediate

Go 101, concurrency, and building an API service with Echo — framed against TypeScript.

🐍Python for TypeScript Developers

Beginner

Python fundamentals and a FastAPI service — mapped from TypeScript concepts.

🦀Rust for TypeScript Developers

Advanced

Rust fundamentals and an Axum API service — compared to TypeScript throughout.

For React Developers — transfer what you know

Comparison-first courses that map React concepts to a new framework.

🐦Flutter for React Developers

Intermediate

Widgets, state & lifecycle, navigation, and data — mapped from React.

🔥Svelte for React Developers

Beginner

Svelte 5 runes vs hooks, components & templating, stores, SvelteKit.

🚀Astro for React Developers

Beginner

.astro components, islands & using React in Astro, routing, content collections, and building micro-frontends with Astro.

For Designers — start from zero

Web technology for UI designers with no programming background.

🎨Web for Designers

Beginner

HTML, CSS, and a little JavaScript — taught from the ground up, with a live editor.

DevOps & Tooling — ship your apps

Tools and workflows for building, packaging, and shipping software.

🐳Docker — From Zero to Hero

Beginner

Images & Dockerfiles, containers, volumes, networking, Compose, optimization, registry & CI/CD.

🟥Redis — From Zero to Hero

Intermediate

Keys & strings, lists/hashes/sets/sorted sets, pub/sub & streams, persistence, caching/rate-limit/locks, Lua.

🐇RabbitMQ — From Zero to Hero

Intermediate

The AMQP model, exchanges & routing, queues & acknowledgements, publisher confirms & dead-letter exchanges, work queues & RPC, clustering & quorum queues, RabbitMQ vs Kafka.

🌊Kafka — From Zero to Hero

Advanced

The distributed log with real segment files, topics & partitions (ISR shrink/expand on a 3-broker cluster, compaction proven with kafka-dump-log), producers (acks, idempotence, duplicates on retry proven), consumer groups & rebalancing (classic vs KIP-848 measured), delivery semantics & transactions (SIGKILL mid-transaction, zero duplicates), share groups (KIP-932), Streams/Connect/Schema Registry (TopologyTestDriver, real 409s), ACLs/SASL-SCRAM and tuning, a How Kafka Works internals module, a Reading AI-generated Kafka module (21-bug catalog + 3 worked reviews) and an in-browser TypeScript compile-check — every claim proven on Kafka 4.3.1, KRaft-only.

☸️Kubernetes — From Zero to Hero

Advanced

Architecture & the control plane, workloads with real termination/rollout timelines, networking (Services/Gateway API/NetworkPolicy enforced by Calico), storage & config, scheduling with topology spread and preemption, RBAC, Pod Security Admission and ValidatingAdmissionPolicy, Helm 4/Operators/Argo CD, a How Kubernetes Works internals module, a Reading AI-generated Kubernetes module (22-bug catalog + 3 worked reviews) and a static YAML schema checker — every claim proven on a real Kubernetes 1.37 kind cluster.

🏗️Terraform & Terragrunt for AWS — From Zero to Hero

Advanced

HCL, providers & resources with lifecycle, state & remote backends (S3 native locking, force-unlock), variables with cross-variable validation, ephemeral & write-only secrets, modules with terraform test mocks, multi-environment design, Terragrunt 1.1 (run --all, stacks, DAG), CI/CD with OIDC & policy as code (tflint/checkov/conftest run for real), a How Terraform Works internals module, a Reading AI-generated Terraform module (23-bug catalog + 3 worked reviews) and a snippet harness — every claim proven on Terraform 1.16 with the aws 6.x provider.

🏗️Terraform & Terragrunt for GCP — From Zero to Hero

Advanced

HCL, providers & resources with lifecycle, state & remote backends (GCS locking), variables with cross-variable validation, ephemeral & write-only secrets, modules with terraform test mocks (terraform-google-modules v18), multi-environment design (project-per-environment, deletion_policy), Terragrunt 1.1 (run --all, stacks, DAG), CI/CD via Workload Identity Federation & policy as code (tflint/checkov/conftest run for real), a How Terraform Works internals module, a Reading AI-generated Terraform module (23-bug catalog + 3 worked reviews) and a snippet harness — every claim proven on Terraform 1.16 with the google 8.x provider.

🏗️Terraform & Terragrunt for Azure — From Zero to Hero

Advanced

HCL, providers & resources with lifecycle, state & remote backends (Azure Storage blob-lease locking), variables with cross-variable validation, ephemeral & write-only secrets (Key Vault), modules with terraform test mocks (Azure Verified Modules), multi-environment design (resource-group vs. subscription isolation), Terragrunt 1.1 (run --all, stacks, DAG), CI/CD via OIDC federated credentials & policy as code (tflint/checkov/conftest run for real), a How Terraform Works internals module, a Reading AI-generated Terraform module (23-bug catalog + 3 worked reviews) and a snippet harness — every claim proven on Terraform 1.16 with the azurerm 5.x provider.

⚡Supabase — From Zero to Hero

Intermediate

Postgres + the auto-generated API (PostgREST embedding, RPC, the real Data API exposure rollout, pg_graphql), Auth & Row Level Security (InitPlan-proven policies, ES256 sessions, PKCE, refresh rotation), Realtime (private channels, broadcast_changes, WAL pipeline) & Storage (folder policies, TUS, signed URLs), Edge Functions (Deno 2 isolates, webhooks, pg_net/pg_cron), the TypeScript client SDK (typed queries, error codes), the local CLI/MCP workflow and production (Supavisor pooling, prepared-statement failures reproduced), a How Supabase Works internals module and a Reading AI-generated Supabase module (27-bug catalog + 3 worked reviews) — every claim proven on a real local stack.

🐶Datadog — From Zero to Hero

Intermediate

The Agent & integrations (Operator vs Helm, Autodiscovery), unified service tagging, custom metrics via DogStatsD (HISTOGRAM vs DISTRIBUTION), log pipelines, indexes & exclusion filters, APM & distributed tracing (sampling rules, propagation headers), trace-log correlation, monitors, SLO burn-rate alerts & Synthetics, and Datadog as code with Terraform, a How Datadog Works internals module (Agent architecture, DogStatsD aggregation, the trace sampling pipeline, OTLP) and a Reading AI-generated Datadog module (27-bug catalog + 3 worked reviews) — every claim proven with a real Agent 7.83.3, dd-trace/ddtrace, terraform validate and API client models, no Datadog account needed.

Product & Experimentation — ship and measure

Release features safely and learn what works with flags and A/B tests.

🧪GrowthBook — From Zero to Hero

Intermediate

Feature flags, the JS/React/Node SDKs, targeting & rollouts, A/B testing, metrics & the stats engine, production.

Security & Identity — auth done right

Authentication, authorization, and single sign-on for your apps.

🔐Keycloak — From Zero to Hero

Advanced

Realms, clients & roles, users/groups, OIDC & OAuth2 flows, securing apps, tokens & mappers, federation/social, production.

Web Platform — modern web capabilities

Native-like web apps: installable, offline-capable, and fast.

📲PWA — From Zero to Hero

Intermediate

Web app manifest, service workers, caching, offline & app shell, push — plus PWA sessions for React, Astro & Svelte.

🦾WebAssembly — From Zero to Hero

Advanced

The WAT text format, JS interop, linear memory, control flow, compiling Rust/C/AssemblyScript, tooling, and WASI.

🗄️Browser Storage & Data — From Zero to Hero

Intermediate

localStorage/sessionStorage, cookies, IndexedDB (×2), the Cache API & quota, Web/Shared Workers, and cross-tab data (BroadcastChannel, Web Locks, OPFS).

🧩Web Components — From Zero to Hero

Intermediate

Custom Elements, lifecycle, Shadow DOM, templates & slots, styling (:host/::part/::slotted), attributes/properties/events, composition patterns, and Lit.

Databases & Data — store and query at scale

Databases and data systems — the models, queries, and operations behind durable, scalable storage.

🍃MongoDB — From Zero to Hero

Intermediate

The document model, CRUD, querying, indexing (the ESR rule), the aggregation pipeline, data modeling, transactions, and scaling (replica sets, sharding) — with Docker setup and Compass.

🐘PostgreSQL — From Zero to Hero

Intermediate

The relational model, tables & types, SQL CRUD, joins & window functions, indexing (EXPLAIN), transactions & MVCC, JSONB & full-text search, and scaling (replication, partitioning) — with Docker setup and pgAdmin.

Software Design — patterns & principles, any language

Language-agnostic engineering craft. The reusable solutions and principles behind well-structured code.

🧩Design Patterns — From Zero to Hero

Intermediate

OOP principles (SOLID, composition over inheritance) and all 23 Gang-of-Four patterns — Creational, Structural, Behavioral — each with UML and the same example in 4 languages.

🧹Refactoring — From Zero to Hero

Intermediate

Improve code without changing what it does — code smells and a catalog of refactorings (Extract Function, Guard Clauses, Replace Conditional with Polymorphism, …), each as a before/after in 4 languages.

🧩Microservices Design Patterns — From Zero to Hero

Advanced

The microservices pattern language — decomposition, Database per Service, Saga, CQRS, API Gateway, service discovery, Circuit Breaker, distributed tracing, service mesh — each as Context → Problem → Solution with architecture diagrams.

🌐REST API Design — From Zero to Hero

Intermediate

Design RESTful HTTP APIs with TypeScript — resources & URIs, methods & idempotency, status codes & problem+json errors, pagination, versioning & caching, security, and OpenAPI.

◈GraphQL Design — From Zero to Hero

Intermediate

Design GraphQL APIs with TypeScript — the type system & SDL, schema design, resolvers, mutations & subscriptions, Relay pagination, the N+1 problem & DataLoader, errors, security, and federation.

🔌WebSocket Design — From Zero to Hero

Intermediate

Design real-time systems with TypeScript — the handshake & client API, message design, heartbeats & reconnection, server design, scaling & pub/sub, security, and WS vs SSE vs WebTransport.

🛰️gRPC Design — From Zero to Hero

Intermediate

Design contract-first APIs with gRPC & Protocol Buffers — the RPC model & HTTP/2, protobuf schemas, the four RPC types, streaming, deadlines, interceptors, security, gRPC-Web, and REST transcoding.

🔌MCP Design — From Zero to Hero

Intermediate

Design Model Context Protocol servers & clients with TypeScript and Python — JSON-RPC & _meta, tools/resources/prompts, stdio & Streamable HTTP, elicitation & tasks, OAuth 2.1, security, and production (spec 2026-07-28).