Forem: Huy Pham

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.

How I Built a Documentation-Driven Development Workflow with Claude Code

Huy Pham — Thu, 25 Dec 2025 07:41:00 +0000

Ever had a PM write requirements in Slack, a developer interpret them differently, and QA test against something else entirely? I got tired of this chaos, so I built a workflow that makes documentation the single source of truth—and Claude Code does the heavy lifting.

GitHub: github.com/quochuydev/workflow
Docs: quochuydev.github.io/workflow

The Problem

In most teams:

PM writes requirements somewhere (Notion, Jira, Google Docs)
Developer reads it, makes assumptions, builds something
QA tests against... what exactly?
Bugs get filed, fingers get pointed

The documentation drifts from reality. Nobody knows what's correct anymore.

The Solution: Docs as Code

What if the spec file is the source of truth, and AI reads it directly?

PM/BA: /write-spec user-export     → creates docs/user-export/spec.md
Dev:   /develop-feature user-export → Claude reads spec, builds feature

That's it. No telephone game. Claude reads the same spec the PM wrote.

How It Works

PM runs /write-spec - Claude asks questions, generates structured spec
Dev runs /develop-feature - Claude reads the spec, builds with full context
GitHub Actions notify - Team stays in sync when specs change

No back-and-forth. No "what did you mean by X?"

Get Started in 30 Seconds

npx create-ai-team

This scaffolds:

.claude/commands/ - The workflow commands
docs/example-feature/spec.md - A template to follow
.github/workflows/ - Optional automation

The Commands

Command	Who	What
`/write-spec`	PM/BA	Create spec via guided conversation
`/develop-feature`	Dev	Build feature from spec
`/fix-issue`	Dev	Fix bugs with doc context
`/trace-flow`	Dev	Understand code flow

Why This Works

Single source of truth - The spec file is canonical
AI reads context - No copy-pasting requirements into prompts
Structured format - Mermaid diagrams, error codes, test cases
Version controlled - Specs live in git, changes are tracked

Open Source

The whole thing is open source:

Repo: github.com/quochuydev/workflow
Docs: quochuydev.github.io/workflow
NPM: npx create-ai-team

Try It

If you're tired of requirements getting lost in translation, give it a shot:

npx create-ai-team

Then run /write-spec my-feature and see how it feels to have AI understand your full context.

What's your current workflow for keeping specs and code in sync? I'd love to hear how other teams handle this.