Forem: Huy Pham

How I Stopped Rebuilding Auth Every Project and Wrote the Keycloak Playbook I Wish I Had

Huy Pham — Fri, 24 Apr 2026 10:44:57 +0000

Every new product I've shipped starts the same way: "We just need login, right?" Two weeks later we're knee-deep in password resets, refresh tokens, org invites, and role checks sprinkled across five services. I got tired of rediscovering the same traps, so I wrote down the exact Keycloak setup I now copy into every multi-tenant app — gateway, frontends, account app, and all.

The Problem

Identity is three hard problems pretending to be one:

Authentication — login, MFA, email/SMS verification, forgot-password, social providers
Authorization — which role can do what, baked into tokens so services don't need to call a DB on every request
Multi-tenancy — organizations, invites, role scoping per org, sysadmin vs org-owner vs end user

Most teams either roll their own (and leak tokens) or drop in Keycloak and then spend a month figuring out realms, clients, JWKS caching, and how the gateway should verify tokens. The docs tell you what exists, not how to wire it into a real product.

The Solution: Keycloak Playbook

A hands-on playbook that walks through a realistic architecture — a Node.js gateway, three Next.js frontends, and a shared account app — all delegating to Keycloak via OIDC.

Browser → Account App (login UI) → Keycloak (OIDC + PKCE)
       → Gateway (verifies JWT via JWKS) → internal services

No copy-pasting snippets from five Stack Overflow answers. One consistent model from realm setup to JWT verification.

How It Works

Keycloak runs in Docker — docker-compose up boots Keycloak 26 + Postgres with health checks
One realm, four clients — gateway, sysadmin, admin, app, account — each with the right flow and scopes
Account App owns login — every frontend redirects here, so SSO "just works" across apps
Gateway verifies tokens — JWKS cached, roles checked, trusted headers (X-User-Id, X-Org-Id) forwarded downstream

The result: raw tokens never leak past the gateway, and services stay blissfully unaware of Keycloak.

Get Started in 30 Seconds

git clone https://github.com/quochuydev/keycloak-playbook
cd keycloak-playbook && docker-compose up -d

This gives you:

Keycloak 26 at http://localhost:8080 — admin console ready
Postgres 16 — persistent realm/user data via named volume
Health checks — so dependent services wait until Keycloak is actually ready
Docs site — cd docs && pnpm dev to browse the full playbook locally

What's Inside

Section	Covers	Who It's For
Setup	Realm, clients, roles, groups, orgs, SMTP, SMS SPI	DevOps / first-time Keycloak
APIs	`/token`, refresh, logout, introspect, admin APIs (curl + sample JSON)	Anyone wiring HTTP clients
Gateway	JWT verify, JWKS caching, role checks, service-to-service	Node.js backend devs
Next.js	auth.js config, silent refresh, RBAC on pages & actions	Frontend devs
Account App	Custom login/register/profile UI on top of Keycloak	Full-stack / UX

Why This Works

Standards, not magic — OIDC + OAuth 2.1 means you can swap libraries without rewriting auth logic
One realm, many apps — users log in once at the Account App and get SSO everywhere else
Trusted headers over raw tokens — downstream services don't touch JWTs, so blast radius stays small
Copy-pasteable — every section has real curl commands and real JSON responses, not hand-waving

Try It

If you're about to bolt Keycloak onto a new project and dreading the realm-config rabbit hole:

git clone https://github.com/quochuydev/keycloak-playbook
cd keycloak-playbook && docker-compose up -d

Then open http://localhost:8080, log in with admin / admin, and follow the Setup section of the docs site to build your first realm.

GitHub: github.com/quochuydev/keycloak-playbook

Docs: keycloak.quochuy.dev

What's the most painful part of Keycloak you've hit in production — JWKS rotation, org invites, custom themes? I'd love to hear what I should add to the playbook next.

How I Built a Chrome Extension That Launches Gemini Prompts Straight From a URL

Huy Pham — Fri, 24 Apr 2026 08:07:24 +0000

I kept opening Gemini, waiting for the page to load, clicking the input box, pasting my prompt, and hitting enter—maybe twenty times a day. Multiply that by a team and it's death by a thousand clicks. So I built a tiny Chrome extension that turns the whole dance into a single URL.

The Problem

If you use Gemini regularly, you've probably felt this:

Every prompt starts with: open tab → wait → click input → paste → press enter
You can't share a "runnable" prompt with a teammate—only the raw text
Launcher tools (Raycast, Alfred, PopClip) can open URLs, but Gemini doesn't accept prompts via URL
Bookmarks are useless for anything beyond a home page
Repetitive prompts (daily standup summaries, translation, code review) have no shortcut

The friction is small, but it adds up. And it kills the instinct to "just ask Gemini real quick."

The Solution: Gemini URL Launcher

What if a URL could carry the prompt, and Gemini would just run it?

https://gemini.google.com/app?q=Summarize%20today%27s%20standup%20notes

Open that link, and the extension types the prompt into Gemini and submits it for you. That's the whole idea.

How It Works

You craft a URL with ?q=<your prompt> pointing at gemini.google.com/app
The extension watches that domain for the q parameter
A content script fills the input and submits the prompt automatically
Gemini responds as if you typed it yourself

No API keys. No server. No data leaves your browser—the extension only runs on gemini.google.com.

Get Started in 30 Seconds

git clone https://github.com/quochuydev/gemini-url-launcher

Then load it as an unpacked extension:

Open chrome://extensions
Toggle Developer mode (top-right)
Click Load unpacked and pick the cloned folder
Pin it from the puzzle-piece icon so you know it's active

Works on Chrome, Edge, Brave, Arc, and Opera—anything Chromium-based.

Ways to Use It

Trigger	How to Set It Up	Example
Browser bookmark	Save the Gemini URL with your prompt as a bookmark	One-click "explain this error" prompt
Raycast / Alfred	Create a quicklink or web search with `{query}` in the URL	Type prompt in launcher → hits Gemini
PopClip	Add a URL action that sends selected text as the prompt	Select text anywhere → send to Gemini
Shell alias	`open "https://gemini.google.com/app?q=$*"`	`gemini "refactor this regex"` from the CLI
Scripts / automation	Generate URLs from templates and open them programmatically	Daily digest, code review, translation

Why This Works

URLs are universal - Every tool, OS, and script knows how to open one
Zero config - No auth, no API, no server; it's just a content script
Private by design - The extension collects nothing and only touches Gemini's domain
Composable - Drop it into any workflow you already have

One Caveat

Gemini occasionally changes its page layout, which can break the selector the extension relies on. If it stops working, pull the latest version—fixes usually land fast because the content script is tiny.

Try It

If you've ever wished Gemini had a command palette, this is basically that—just using URLs as the interface:

git clone https://github.com/quochuydev/gemini-url-launcher

Load it, then try bookmarking a prompt you run often. You'll feel the difference after about three uses.

GitHub: github.com/quochuydev/gemini-url-launcher

What's the prompt you'd wire to a single keystroke if you could? Drop it in the comments—I'm collecting ideas for a shared "Gemini shortcut pack."

I Built a SaaS Boilerplate So You Never Start From Scratch Again

Huy Pham — Tue, 31 Mar 2026 09:04:30 +0000

Every time I started a new SaaS project, I spent the first two weeks wiring up the same things: authentication, payments, API keys, docs. I got tired of rebuilding infrastructure instead of building the actual product.

The Problem

If you've ever launched a SaaS, you know the drill:

Setting up authentication with OAuth providers takes days of configuration and edge-case handling
Integrating payment processing means wrestling with webhooks, credit systems, and billing dashboards
Building API key management with usage tracking and audit logs from scratch is tedious
Writing documentation infrastructure and blog systems before writing a single line of product code
Handling SEO, legal pages, and landing page scaffolding every. single. time.

The Solution: what-is

what-is is a production-ready SaaS boilerplate built on Next.js 16, React 19, and TypeScript. Clone it, swap in your business logic, and ship.

git clone https://github.com/quochuydev/what-is.git
cd what-is/web && npm install && npm run dev

You get auth, payments, API keys, docs, blog, and a landing page — all wired up and ready to customize.

How It Works

Clone and configure — Set up your environment variables for Clerk (auth), PayPal (payments), and your database (Neon PostgreSQL)
Replace the service logic — The default app is an AI-powered definition lookup. Swap the /api endpoint and playground with your own product logic
Customize pricing — Edit credit packages in src/lib/paypal.ts to match your pricing model
Deploy to Vercel — Follow the included 7-step deployment guide and you're live

From clone to production in under an hour instead of under a month.

Get Started in 30 Seconds

git clone https://github.com/quochuydev/what-is.git
cd what-is/web
npm install
cp .env.example .env
npm run db:push
npm run dev

This scaffolds a full SaaS application with:

Authentication — Google OAuth via Clerk with database sync
Payments — PayPal checkout with a credit-based billing system
API key management — Generate, revoke, and track usage
Documentation — MDX-powered docs via Fumadocs
Blog — Category-filtered blog with individual post pages
Dashboard — API keys, usage analytics, and billing in one place

What's Included

Feature	Implementation	Details
Auth	Clerk + Google OAuth	Database-synced user accounts
Payments	PayPal checkout	Credit packages: $1/1cr, $5/6cr, $20/30cr
API Keys	Custom system	Generate, revoke, audit logs
Docs	Fumadocs + MDX	Full documentation site
Blog	MDX + categories	Filterable, SEO-optimized
Dashboard	Protected routes	API keys, usage stats, billing
Landing Page	Pre-built	Hero, features, stats sections
Legal	Templates	Privacy policy, terms of service
SEO	Built-in	OpenGraph, structured data, sitemap

The Tech Stack

Layer	Technology
Framework	Next.js 16 / React 19
Language	TypeScript
Styling	Tailwind CSS v4
Database	PostgreSQL (Neon) + Drizzle ORM
Auth	Clerk
Payments	PayPal
LLM	OpenAI-compatible APIs (DeepSeek, Groq, OpenAI)

Why This Works

Skip the boilerplate tax — Authentication, payments, and API management are solved problems. Stop re-solving them and focus on what makes your product unique.
Modern stack, no compromises — Next.js 16, React 19, TypeScript, and Tailwind v4 mean you're building on the latest foundations, not fighting legacy patterns.
PayPal-friendly — Unlike Stripe-dependent boilerplates, this works with PayPal personal accounts — perfect for indie hackers and solo founders who want to start accepting payments immediately.
MIT licensed — Fork it, modify it, ship it commercially. No strings attached.

Try It

git clone https://github.com/quochuydev/what-is.git
cd what-is/web && npm install && cp .env.example .env && npm run dev

Start by visiting http://localhost:3000/playground to see the default AI definition service in action. Then replace it with your own logic and you've got a SaaS.

GitHub: quochuydev/what-is

Live Demo: what-is.cappuai.com

What's the first feature you'd build on top of this boilerplate? Drop it in the comments — I'm curious what people would ship with it.

I made a cat and let it run around on my laptop.

Huy Pham — Mon, 30 Mar 2026 15:07:19 +0000

The result of today's work.

Download and give me feedback (by creating issue here):
https://github.com/quochuydev/cat/tree/main?tab=readme-ov-file#installation

The source code is public, no any personal information (in machine) send to server or external.

How I Built a Traceable API Gateway with NATS and Chain of Thought Flows

Huy Pham — Thu, 15 Jan 2026 11:14:42 +0000

Ever debugged a production issue where a request passed through 5 services and you had no idea what went wrong where? I got tired of logging everything manually and losing context across async boundaries, so I built an API gateway that traces every operation automatically.

The Problem

In distributed systems:

Requests bounce between services, logs scatter everywhere
Business logic gets buried in boilerplate
Validation happens inconsistently across endpoints
When things fail, you're grep-ing through logs hoping to find the chain
Adding tracing to existing code means refactoring everything

The Solution: Flow-Based Architecture

What if every API operation was a traceable flow with built-in validation?

Client → Fastify → NATS Request → Flow → NATS Reply → Response

Each flow has automatic tracing. You see exactly what happened, step by step.

How It Works

Define a Flow - Wrap your business logic in a flow function with input/trace/ok callbacks
NATS Handles Messaging - Flows communicate via NATS subjects, decoupling services
Built-in Tracing - Every flow step is logged with context, no manual instrumentation
Schema Validation - Inputs are validated before your code runs

No scattered console.logs. No lost context. Every operation is auditable.

Get Started in 30 Seconds

git clone https://github.com/quochuydev/nats-flow-gateway.git
cd nats-flow-gateway
docker compose -f docker-compose.dev.yaml up -d
cd server && npm install
npm run db:generate && npm run db:migrate && npm run seed
npm run dev

This gives you:

Fastify server with NATS integration
PostgreSQL database with Drizzle ORM
Health check, auth, and admin flows ready to extend
Docker infrastructure for local development

Project Structure

Directory	Purpose
`flows/`	Business logic organized by domain (auth, admin, customer)
`middleware/`	Request/response processing
`resources/`	API endpoint handlers
`schemas/`	Input validation definitions
`types/`	TypeScript type safety

API Endpoints

Endpoint	Method	Description
`/api/v1/healthcheck`	GET	Service health verification
`/api/v1/admin/login`	POST	Authentication with email/password
`/api/v1/admin/list`	GET	Admin operations (requires bearer token)

Why This Works

Chain of Thought Tracing - Every flow logs its reasoning, making debugging trivial
NATS Decoupling - Services communicate without tight coupling, scale independently
Validation at the Edge - Bad data never reaches your business logic
TypeScript Throughout - Full type safety from request to response

Try It

If you're building microservices and want built-in traceability:

git clone https://github.com/quochuydev/nats-flow-gateway.git

Spin it up, hit the health check endpoint, and check the logs—you'll see the flow trace immediately.

GitHub: quochuydev/nats-flow-gateway

How do you handle tracing in your distributed systems? I'd love to hear what patterns have worked for you.

How I Built a WooCommerce Payment Gateway for Vietnamese Banks

Huy Pham — Wed, 14 Jan 2026 04:25:38 +0000

Running an e-commerce store in Vietnam? You've probably hit the wall: international payment gateways don't support local banks, and customers abandon carts when they can't pay with their preferred method. I built a plugin that brings QR Code and Internet Banking to WooCommerce.

The Problem

For Vietnamese e-commerce stores:

Customers prefer paying via local bank transfers and QR codes
International gateways (Stripe, PayPal) have limited Vietnam support
Manual bank transfer verification is error-prone and time-consuming
Building a payment integration from scratch requires deep API knowledge
No ready-to-use WooCommerce plugin for Ngan Luong existed

The Solution: WooCommerce Ngan Luong Gateway

A WordPress plugin that integrates Ngan Luong payment processing directly into WooCommerce checkout.

// Customers see familiar payment options at checkout
// QR Code, Internet Banking, ATM cards - all Vietnamese banks supported

Your customers pay with what they know. You get instant payment notifications.

How It Works

Install the plugin - Upload to WordPress, activate in WooCommerce
Configure API credentials - Enter your Ngan Luong merchant account details
Customers checkout - They see QR Code and Internet Banking options
Receive payments - Orders update automatically when payment confirms

No redirect to external sites. The checkout stays on your domain with Seamless Checkout integration.

Get Started in 30 Seconds

# Download the plugin
wget https://github.com/quochuydev/woocommerce-nganluong-gateway-plugin/raw/main/nganluong-gateway.zip

# Or clone and zip
git clone https://github.com/quochuydev/woocommerce-nganluong-gateway-plugin.git
cd woocommerce-nganluong-gateway-plugin
zip -r nganluong-gateway.zip nganluong-gateway

Then in WordPress:

Go to Plugins > Add New > Upload Plugin
Select nganluong-gateway.zip
Activate and configure in WooCommerce > Settings > Payments

Supported Payment Methods

Method	Description	Use Case
QR Code	Mobile banking scan-to-pay	Quick mobile payments
Internet Banking	Direct bank login payment	Desktop customers
ATM Cards	Domestic debit cards	Non-credit card users
E-wallets	Vietnamese digital wallets	Tech-savvy customers

Why This Works

Seamless Checkout - Customers stay on your site, no jarring redirects to third-party domains
Local bank coverage - Supports major Vietnamese banks that international gateways ignore
Automatic order updates - Payment confirmation triggers WooCommerce order status changes
MIT Licensed - Free to use, modify, and distribute for your projects

Prerequisites

Before installing, you'll need:

A Ngan Luong merchant account
API credentials from the integration portal
WooCommerce installed on your WordPress site

Try It

If you're running a WooCommerce store targeting Vietnamese customers:

git clone https://github.com/quochuydev/woocommerce-nganluong-gateway-plugin.git

Upload the plugin and configure your Ngan Luong credentials. Your customers will thank you for the familiar payment experience.

GitHub: quochuydev/woocommerce-nganluong-gateway-plugin

Ngan Luong Docs: nganluong.vn/integrate/seamless

What payment challenges have you faced with Vietnamese e-commerce? I'd love to hear how others are handling local payment integrations.

How I Built a Real-Time Hand Tracking Platform That Runs Entirely in the Browser

Huy Pham — Tue, 13 Jan 2026 06:50:14 +0000

You know that moment when you're demoing gesture controls and the client asks "So we need to install what exactly?" I got tired of explaining native apps and Python dependencies, so I built a computer vision platform that works right in the browser—no installs required.

The Problem

Building gesture-controlled interfaces usually means:

Installing Python, OpenCV, and a dozen dependencies
Asking users to trust a native app download
Wrestling with webcam permissions across different OSes
Spinning up servers just to process hand movements
Watching latency kill the "real-time" experience

The Solution: VisionPipe

What if hand tracking just worked in a browser tab?

// Detect pinch gesture - thumb tip (4) to index tip (8)
const distance = Math.sqrt(
  Math.pow(thumbTip.x - indexTip.x, 2) +
  Math.pow(thumbTip.y - indexTip.y, 2)
);
const angle = Math.min(distance * 500, 90);

That's real code from the branch-opening sample—mapping a pinch gesture to control 3D animations. MediaPipe handles detection, Three.js renders the visuals.

How It Works

Browser loads MediaPipe - No install, just a CDN import
Webcam feeds landmarks - 21 hand points tracked in real-time
JavaScript maps gestures - Translate finger positions into actions
Three.js renders output - Smooth 3D visualization at 60fps

The entire pipeline runs client-side. Your webcam feed never leaves your device.

Tech Stack

Built with Next.js 16, React 19, and TypeScript. The platform includes:

Clerk for authentication
Stripe for payments
Drizzle ORM with PostgreSQL
Fumadocs for documentation
MediaPipe for hand detection
Three.js for 3D visualization

Get Started in 30 Seconds

Browser (zero install):

Visit the Playground → Select effect → Grant camera → Done

The Playground is always free and unlimited.

Cloud API:

curl -X POST https://visionpipe3d.quochuy.dev/api/v1/sessions \
  -H "Authorization: Bearer YOUR_API_KEY"

Returns a shareable playground URL with a JWT token valid for 24 hours.

Features

Feature	Playground	Cloud API
Hand Landmark Detection	Yes	Yes
Real-time Tracking	Yes	Via sessions
Offline Support	Yes (after load)	No
Processing Location	Client-side	Server-side
Rate Limit	Unlimited	100 req/min
Privacy	Data stays local	Processed & discarded

Supported formats: JPEG, PNG, WebP, GIF (up to 10MB)

Browser support: Chrome 80+, Firefox 75+, Safari 14+, Edge 80+

Pricing (Cloud API)

Plan	Credits	Cost	Per Credit
Free	3	$0	-
Starter	1,000	$10	$0.010
Growth	5,000	$40	$0.008
Scale	20,000	$150	$0.0075

1 credit = 1 API call. Credits never expire. No monthly subscriptions—pay only for what you use.

Enterprise? Custom volume pricing, private endpoints, 99.9% SLA, and dedicated support available.

Why This Works

Zero friction - Open a URL, grant camera, start detecting. No Python, no installs, no "works on my machine"
Privacy by default - Playground processes locally. Cloud API discards images immediately after processing
Production ready - TLS 1.3 encryption, SHA-256 key hashing, GDPR compliant
Works everywhere - Any modern browser with WebGL support. Any device with a webcam

Sample Projects

Branch Opening Demo

An interactive visualization where pinch gestures control branch animations. The sample shows how to:

Initialize the HandTracker from the VisionPipe SDK
Calculate distances between landmarks (thumb tip at position 4, index tip at position 8)
Map physical movements to animation parameters

Check the samples documentation for the full walkthrough.

Try It

Head to the Playground and wave your hand. That's the entire onboarding.

For the Cloud API:

# 1. Sign in and get your API key from the Cloud Console
# 2. Create a session
curl -X POST https://visionpipe3d.quochuy.dev/api/v1/sessions \
  -H "Authorization: Bearer vp_live_YOUR_KEY"

The response includes a playgroundUrl you can embed or share.

GitHub: quochuydev/visionpipe3d

Docs: visionpipe3d.quochuy.dev/docs

Playground: visionpipe3d.quochuy.dev/playground

What gesture-based interfaces have you built or wanted to build? I'm curious what use cases people are exploring beyond the typical "air guitar" demos.

How I Built a Zero-Dependency Technical Research Blog with Just HTML, CSS, and Markdown

Huy Pham — Tue, 13 Jan 2026 06:00:35 +0000

Ever find yourself drowning in bookmarks, scattered notes, and half-finished documentation about technologies you're researching? I did too—until I built something simpler.

The Problem

Technical notes scattered across Notion, Google Docs, and random markdown files
No central place to organize research on new technologies and platforms
Setting up a blog feels like overkill—why do I need a database for markdown?
Want to share knowledge but don't want to maintain complex infrastructure
Diagrams and code examples should just work without plugins

The Solution: Tech Research

A static blog that turns a folder of markdown files into a searchable knowledge base—deployed free on GitHub Pages with zero dependencies.

# Add an article, run the script, push. Done.
echo "# My Research" > researching/new-topic.md
./update-manifest.sh
git push

Your research is live in seconds, not hours.

How It Works

Write in Markdown - Create .md files in the researching/ directory with GitHub-flavored syntax
Run the Manifest Script - ./update-manifest.sh scans your articles and builds the index
Push to GitHub - GitHub Actions automatically deploys to GitHub Pages
Browse and Search - The SPA loads your manifest and renders articles on demand

No build step. No Node.js. No framework churn.

Get Started in 30 Seconds

git clone https://github.com/quochuydev/tech-research.git
cd tech-research
python -m http.server 8000  # or: npx serve .

This gives you:

index.html - The single-page application that renders everything
researching/ - Drop your markdown articles here
update-manifest.sh - Regenerates the article index
manifest.json - Searchable registry of all your content

Topics You Can Research

Category	Examples	Use Case
Blockchain	Bitcoin, Solana, BSC	Crypto research and earning ideas
AI Tools	Claude Code, Moondream	Evaluating AI platforms
DevOps	Dokploy, OAuth2-proxy, Zitadel	Self-hosting infrastructure
Architecture	C4 Model, ADRs	System design documentation
Automation	n8n, LiveKit	Workflow and real-time tools

Why This Works

Zero Dependencies - Pure HTML/CSS/JS means nothing breaks when packages update
Mermaid Diagrams Built-in - Architecture diagrams render without extra tooling
GitHub Pages = Free Hosting - Push and forget, GitHub handles SSL and CDN
Markdown First - Write naturally, let the SPA handle rendering
Version Controlled Knowledge - Your research history lives in git commits

Try It

Fork the repo and start documenting your own tech research:

git clone https://github.com/quochuydev/tech-research.git
cd tech-research
# Create your first article
echo "---
title: My First Research
category: Learning
---

# Topic Overview

Your research goes here..." > researching/my-topic-overview.md
./update-manifest.sh

Open index.html in your browser—your article is already there.

Website: https://quochuydev.github.io/tech-research/

What's the most disorganized part of your technical learning process? I'd love to hear what topics you'd document first.

I Built a Tool That Turns Any OpenAPI Spec Into n8n Workflow Nodes in Seconds

Huy Pham — Fri, 09 Jan 2026 10:18:02 +0000

You know that feeling when you find an API with 50+ endpoints and need to wire them into your n8n workflow? Yeah, I spent way too many hours manually configuring HTTP Request nodes. So I built something to fix that.

The Problem

If you use n8n for automation:

Every API endpoint means a new HTTP Request node to configure manually
Copy-pasting URLs, headers, and parameters is tedious and error-prone
Complex APIs with dozens of endpoints? That's hours of clicking
OpenAPI specs have all the info you need, but n8n can't read them directly
One typo in the endpoint path and your workflow breaks silently

The Solution: OpenAPI to n8n Converter

What if you could paste an OpenAPI spec and get ready-to-use n8n nodes?

1. Paste your OpenAPI/Swagger spec (URL, JSON, or YAML)
2. Select the endpoints you need
3. Copy → Paste into n8n

That's it. Minutes of manual work compressed into seconds.

How It Works

Provide your spec - Paste a URL, upload a file, or paste raw JSON/YAML
Parse & Convert - The tool reads your OpenAPI 3.x or Swagger 2.0 spec
Cherry-pick endpoints - Select only the endpoints you actually need
Copy to n8n - One click copies the node config, paste it into your workflow

No installation. No signup. Just open the browser and convert.

Get Started in 30 Seconds

https://n8n-openapi.vercel.app

The interface gives you:

URL fetching - Point to any public OpenAPI spec URL
File upload - Drop your local spec files
Direct paste - Copy-paste spec content directly
Popular APIs - Pre-configured examples (GitHub, Stripe, Slack, Discord, etc.)

Features at a Glance

Feature	What It Does
Multi-format support	OpenAPI 3.x & Swagger 2.0, JSON & YAML
Selective conversion	Pick specific endpoints, skip the rest
Base URL override	Point to staging, production, or localhost
Browser persistence	Your conversions are saved automatically
Multi-tab workflow	Manage multiple API conversions at once
One-click copy	Clipboard-ready n8n node configurations

Why This Works

Zero friction - Browser-based, no install, no account required
Spec as source of truth - OpenAPI already documents everything; this just transforms it
Selective imports - Don't bloat your workflow with endpoints you won't use
Time savings - What took 30 minutes of clicking now takes 30 seconds

Try It

Head to the converter and try it with one of the pre-loaded APIs:

https://n8n-openapi.vercel.app

Try converting the GitHub or Stripe API spec first—they're already in the Popular APIs section.

GitHub: quochuydev/n8n-openapi

Live Demo: n8n-openapi.vercel.app

How do you currently handle integrating complex APIs into n8n? Would love to hear if there are endpoints or specs that break the converter—PRs welcome!

How I Built a Custom Login UI for ZITADEL That Actually Looks Good

Huy Pham — Tue, 06 Jan 2026 03:39:49 +0000

Ever tried customizing ZITADEL's default login page and realized you're stuck with their hosted UI? I needed full control over the login experience—branding, flows, languages—so I built a drop-in replacement using Next.js that speaks OIDC natively.

The Problem

ZITADEL is great for identity management, but the default login UI has limitations:

Customization options are restricted to themes and basic branding
No control over the actual login flow UX
Adding custom pages (passkeys, TOTP setup) requires workarounds
Multi-language support needs external tooling
Self-hosted instances still look like hosted ZITADEL

The Solution: Custom Login UI

A Next.js app that replaces ZITADEL's login interface entirely. Same OIDC flows, your design.

# Your app redirects to your login UI, not ZITADEL's
OIDC Authorization → Your Custom UI → ZITADEL API → Token

Full control over every screen: login, register, password reset, TOTP, passkeys.

How It Works

OIDC-compliant - Implements standard authorization flows, works with any OIDC client
Service user auth - Talks to ZITADEL's API using service account tokens
i18n built-in - Multi-language support via next-translate out of the box
Modern stack - Next.js 14 App Router, TypeScript, Tailwind CSS, React Hook Form + Zod

Your existing apps just point to this UI instead of ZITADEL's hosted login.

Get Started in 30 Seconds

git clone https://github.com/quochuydev/zitadel-login-ui.git
cd zitadel-login-ui
cp .env.example .env
yarn install
yarn dev

This gives you:

Login page - Username/password authentication
Registration - New user signup flow
Password reset - Self-service password recovery
TOTP setup - Two-factor authentication with QR codes
Passkeys - WebAuthn/FIDO2 passwordless login

Authentication Routes

Route	Purpose	Features
`/login`	User authentication	Username/password, remember me
`/register`	New account creation	Form validation, email verification
`/password`	Password management	Reset flow, change password
`/totp`	2FA setup	QR code generation, backup codes
`/passkeys`	Passwordless auth	WebAuthn registration and login
`/account`	User profile	Manage account settings

Environment Configuration

Variable	Purpose
`APP_URL`	Your login UI URL (e.g., `http://localhost:3333`)
`ZITADEL_URL`	Your ZITADEL instance URL
`ZITADEL_SERVICE_USER_ID`	Service user ID from ZITADEL
`ZITADEL_SERVICE_USER_TOKEN`	API token for service user
`RESEND_API_KEY`	Optional: for email delivery

Setting Up ZITADEL Service User

Go to https://YOUR_ZITADEL/ui/console/instance/members
Create a service user with IAM_OWNER role
Generate a personal access token
Add the user ID and token to your .env

Why This Works

Full design control - Every pixel is yours, not ZITADEL's theme system
Standard OIDC - Any app expecting OIDC works without changes
Production-ready stack - Next.js 14, TypeScript, Tailwind—battle-tested
i18n from day one - Add languages by dropping translation files in /locales
Modern auth methods - Passkeys and TOTP built in, not bolted on

Try It

Live demo: zitadel-login-ui-v2.vercel.app

git clone https://github.com/quochuydev/zitadel-login-ui.git
cd zitadel-login-ui
yarn dev

Start with the login page, then explore the TOTP and passkey flows to see the full auth experience.

GitHub: quochuydev/zitadel-login-ui

Live Demo: zitadel-login-ui-v2.vercel.app

Are you using ZITADEL's default UI or did you build something custom? I'd love to hear how others handle login customization.

How I Built a One-Command Observability Stack for Dokploy

Huy Pham — Tue, 06 Jan 2026 03:26:55 +0000

Ever deployed an app to production and then realized you have zero visibility into what's happening? No logs, no traces, no idea why users are complaining. I got tired of stitching together monitoring tools from scratch every time, so I built a complete observability stack that just works with Dokploy.

The Problem

Setting up proper observability is painful:

Grafana, Tempo, Loki, and collectors each need separate configuration
Getting them to talk to each other requires networking magic
OpenTelemetry setup has a steep learning curve
Most tutorials assume you have infinite time to debug YAML
Dokploy's Docker network adds another layer of complexity

The Solution: Dokploy Grafana Compose

A pre-configured monitoring stack that deploys alongside your Dokploy apps. Four services, one docker-compose up, done.

# All four services on dokploy-network, pre-wired
services:
  alloy:    # Collects traces, logs, metrics
  tempo:    # Stores traces
  loki:     # Stores logs
  grafana:  # Visualizes everything

Your apps send telemetry to Alloy, and everything flows to the right place automatically.

How It Works

Alloy receives data - OTLP receiver on port 4317/4318 accepts traces, logs, and metrics from your apps
Data routes automatically - Traces go to Tempo, logs go to Loki, metrics go to Prometheus
Grafana correlates everything - See a slow request? Jump from trace to related logs instantly
Faro captures frontend - Browser-side Real User Monitoring included on port 12347

No configuration files to edit. Just deploy and instrument your apps.

Get Started in 30 Seconds

git clone https://github.com/quochuydev/dokploy-grafana-compose.git
cd dokploy-grafana-compose
docker compose up -d

This deploys:

Grafana Alloy v1.11.3 - Unified telemetry collector with OTLP and Faro receivers
Tempo v2.9.0 - Distributed tracing backend
Loki v3.5.8 - Log aggregation system
Grafana v12.2.1 - Pre-provisioned dashboards for traces and logs

Stack Components

Service	Purpose	What It Does
Alloy	Data Collection	Receives OTLP (4317/4318) and Faro (12347) telemetry
Tempo	Trace Storage	Stores distributed traces, enables TraceQL queries
Loki	Log Storage	Aggregates logs, enables LogQL queries
Grafana	Visualization	Correlates traces + logs + metrics in one UI

Instrumenting Your App

The repo includes a Node.js example. Key dependencies:

pnpm add @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node \
  @opentelemetry/exporter-trace-otlp-http @opentelemetry/exporter-logs-otlp-http

Then initialize the SDK pointing to Alloy:

const traceExporter = new OTLPTraceExporter({ url: 'http://alloy:4318/v1/traces' });
const logExporter = new OTLPLogExporter({ url: 'http://alloy:4318/v1/logs' });

Run the example: (cd examples/node && pnpm start)

Why This Works

Zero configuration - All services pre-wired on dokploy-network, just deploy
Production versions - Uses stable releases of Grafana ecosystem tools
Auto-restart - All containers use unless-stopped restart policy
Standard protocols - OTLP means any OpenTelemetry-compatible app works
Frontend monitoring included - Faro receiver captures browser telemetry out of the box

Try It

If you're running Dokploy and want observability without the setup headache:

git clone https://github.com/quochuydev/dokploy-grafana-compose.git
cd dokploy-grafana-compose
docker compose up -d

Open Grafana at http://localhost:3000 and run the Node.js example to see traces flowing in.

GitHub: quochuydev/dokploy-grafana-compose

Docs: Grafana | OpenTelemetry | Dokploy

How do you handle observability in your Dokploy deployments? Would love to hear what stacks others are using.

How I Built a Plan-Based Development Workflow for Claude Code

Huy Pham — Thu, 01 Jan 2026 02:45:29 +0000

Ever started a feature, gotten halfway through, then realized you forgot a critical dependency? Or had Claude Code build something, only to realize the tasks were done in the wrong order? I got tired of managing complex features in my head, so I built a plugin that brings structured planning directly into Claude Code.

The Problem

When building features with AI assistance:

You explain the feature, Claude starts coding, but forgets earlier context
Multi-step tasks get jumbled—tests written before the code they test
You lose track of what's done vs. what's pending
Dependencies between tasks aren't respected (middleware before routes, etc.)
Context switching kills momentum—you forget where you left off

The Solution: Plan-Mode

What if you could define your entire feature as a dependency graph, and have Claude execute it step-by-step?

You:    /plan JWT Authentication
Claude: Creates .claude/plans/jwt-authentication.md with 6 tasks
You:    /plan-execute jwt-authentication
Claude: Executes next available task respecting dependencies

That's it. Structured planning meets AI execution.

How It Works

Create a plan - /plan <feature> generates a YAML-based plan with tasks and dependencies
Track progress - /plan shows all plans with completion metrics
Execute systematically - /plan-execute <name> runs the next available task
Manual control - /plan-update <name> [id] [status] lets you adjust as needed

Plans live in your repo at .claude/plans/, versioned with your code.

Get Started in 30 Seconds

/plugin marketplace add quochuydev/cc-plan-mode
/plugin install plan-mode@cc-plan-mode

This adds:

/plan command - View and create structured plans
/plan-execute command - Run tasks sequentially with dependency awareness
/plan-update command - Manually adjust task status

Commands

Command	Purpose	Example
`/plan`	List all plans with progress	Shows completion % per plan
`/plan <desc>`	Create new plan	`/plan user authentication`
`/plan-execute <name>`	Execute next task	`/plan-execute auth-system`
`/plan-update <name> [id] [status]`	Update task status	`/plan-update auth-system 3 completed`

Plan Format

Plans use YAML frontmatter for clean structure:

---
name: jwt-authentication
overview: Add JWT-based authentication to the API
todos:
  - id: 1
    content: Install jsonwebtoken and bcrypt dependencies
    status: pending
  - id: 2
    content: Create User model with password hashing
    status: pending
    dependencies: [1]
  - id: 3
    content: Implement auth middleware
    status: pending
    dependencies: [2]
---

Why This Works

Dependency awareness - Tasks execute in the right order, always
Persistent state - Plans survive across sessions, stored in your repo
Clear visibility - See exactly what's done, what's next, what's blocked
AI-native execution - Claude understands context from the plan file

Try It

If you're building multi-step features with Claude Code and want more structure:

/plugin marketplace add quochuydev/cc-plan-mode
/plugin install plan-mode@cc-plan-mode

Then run /plan my-feature and watch it break down your feature into manageable, ordered tasks.

GitHub: quochuydev/cc-plan-mode

How do you currently manage complex, multi-step features when working with AI assistants? I'd love to hear what workflows have worked for your team.