Learn Hub

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

42 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

Intermediate

Syntax, types, methods & interfaces, concurrency, errors & generics, stdlib, testing.

🟢Node.js Deep Dive

Intermediate

JS essentials, the event loop & async, core APIs, streams, HTTP, modules & npm, testing.

🐍Python Deep Dive

Beginner

Syntax, data structures, the data model, functions, typing, async, stdlib & tooling.

🦀Rust Deep Dive

Advanced

Ownership & borrowing, structs/enums/matching, traits & generics, errors, concurrency.

🔷TypeScript Deep Dive

Advanced

Structural typing & inference, generics, conditional & mapped types, template literals, classes, the compiler, and typing real-world code.

🐦Flutter Deep Dive

Advanced

Dart & null safety, the widget/element/render trees, the constraints layout algorithm, state management (Provider/Riverpod/BLoC), navigation, animations, isolates, and shipping to production.

⚛️React Deep Dive

Advanced

UI = f(state), JSX & reconciliation, hooks in depth, state & data flow, concurrent React & Suspense, React 19 (Actions, Server Components, the use() hook, the compiler), performance, and production.

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, optimization, and production — verified against current Next.js (v15/v16).

🚀Astro Deep Dive

Advanced

Islands architecture & zero-JS by default, the .astro component, client directives, content collections (Content Layer API), SSR & adapters, Actions, server islands, view transitions, and production.

🧡Svelte Deep Dive

Advanced

The compiler model & zero-runtime output, runes reactivity ($state/$derived/$effect/$props), components & snippets, bindings, actions & transitions, stores, and full-stack apps with SvelteKit.

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, topics & partitions, producers (acks & idempotence), consumer groups & rebalancing (KIP-848), delivery semantics & transactions, Streams/Connect/Schema Registry, and running Kafka in production — KRaft-only, no ZooKeeper.

☸️Kubernetes — From Zero to Hero

Advanced

Architecture & the control plane, workloads (Pods/Deployments/StatefulSets/Jobs), networking (Services/Ingress/NetworkPolicy), storage & config, scheduling & autoscaling, RBAC & Pod Security Standards, and production with Helm/Operators/GitOps.

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

Advanced

HCL, providers & resources, state & remote backends (S3 native locking), variables & modules, multi-environment design, Terragrunt DRY configuration & dependencies, and CI/CD & policy as code — verified via context7.

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

Advanced

HCL, providers & resources, state & remote backends (GCS built-in locking), variables & modules, multi-environment design (project-per-environment), Terragrunt DRY configuration & dependencies, and CI/CD via Workload Identity Federation — verified via context7.

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

Advanced

HCL, providers & resources, state & remote backends (Azure Storage built-in locking), variables & modules, multi-environment design (resource-group vs. subscription isolation), Terragrunt DRY configuration & dependencies, and CI/CD via OIDC federated credentials — verified via context7.

Supabase — From Zero to Hero

Intermediate

Postgres + the auto-generated API (PostgREST, RPC, the Data API exposure model), Auth & Row Level Security, Realtime & Storage, Edge Functions (Deno), the TypeScript client SDK, and production (Supavisor pooling, branching) — verified via context7.

🐶Datadog — From Zero to Hero

Intermediate

The Agent & integrations, unified service tagging, custom metrics via DogStatsD, log management (indexes vs. exclusion filters, Logging without Limits), APM & distributed tracing (ingestion vs. retention sampling), correlating logs/traces/metrics per service, monitors & SLOs, and Datadog as code with Terraform — verified via context7.

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.