Portfolio 2026 · Bangkok

Building polished web products with React, Next.js, and AI workflows.

I’m Panyakorn Boonyong, a frontend-focused web developer with 5+ years of experience building production applications, financial and exchange-style flows, authentication, KYC, wallet experiences, and AI-integrated product features.

Bangkok-based Frontend / Full-stack Developer

Available for frontend, full-stack, and AI-enabled product teams.

View featured work ↓Download resume Contact me

Panyakorn Boonyong

Production frontend architecture, AI product integrations, secure user flows, and reusable UI systems.

5+Years building production web apps

ReactNext.js, TypeScript, state and data architecture

AILLM APIs, n8n automation, AI workflows

Selected work

Private project experience, written as portfolio-safe case studies.

These highlights avoid confidential project names while still showing the scope, responsibilities, and technical depth behind the shipped work.

Flagship · AI workflow operations

live production

AI Workflow Studio — from workflow idea to observable production run

I built a standalone operations console for creating and finding agentic workflows, starting authenticated runs, and following each execution stage live. It turns the portfolio’s AI story into a working product surface rather than a static prototype.

Open live studio ↗View frontend source ↗

AI Workflow Studio

Execution inspector / production

Live

Production path · portfolio → studio → backend → Supabase

Production system path

LIVE

1
Portfolio
Introduces the case study and routes visitors to the live product.
2
Workflow Studio
Renders workflows, metrics, run controls, and the live execution inspector.
3
Go backend
Owns admin sessions, mutations, SSE, rate limits, and audit behavior.
4
Supabase
Persists workflows, executions, and execution stages through the backend.

Workflow lifecycle

SSE

Security boundaries

Session

Shipped outcomes

Shipped

The problem

Agent workflows become difficult to operate when definitions, execution state, approvals, cost, and failures live in separate tools. A useful studio needed a clear workflow inventory and a trustworthy, execution-specific timeline without placing backend credentials in the browser.

The solution

A responsive Next.js control plane backed by the portfolio Go API. Public overview data remains resilient, while protected run controls use an admin session. Persisted stages arrive through a same-origin SSE proxy with validation, reconnect, and a safe fallback.

Workflow lifecycle

Searchable workflow inventory with status filters and persisted execution history.
Execution-specific stage timeline streamed over SSE, with reconnect and fallback states.
Operational signals for run volume, success, latency, and recorded cost.

Security boundaries

Authenticated run mutations are proxied by a session-backed BFF that forwards only the named admin cookie.
Backend mutation rate limiting and persistent audit records protect and trace studio actions.
The browser uses same-origin routes; backend credentials and internal origins stay server-side.

Shipped outcomes

Live at studio.panyakorn.com as a separate, responsive production application.
CI runs tests, lint, build, and deployment-script validation before publishing an immutable SHA-tagged image.
Health-gated VPS deployment automatically restores the previous image on failure and supports manual SHA rollback.

Next.js 16 · React 19 · TypeScript · Go · Supabase · SSE · Docker · GitHub Actions

View backend source ↗

custom-ai-skills and n8n/workers are planned integration points for reusable agent tools and long-running jobs; this case study does not present them as part of the currently shipped Studio runtime.

Financial platform

Exchange-style web experience

Frontend modules for market pages, trading and convert journeys, dashboard, wallet, deposit, withdrawal, fiat and OTC flows, and transaction history.

Authentication-aware routing with access and refresh-token handling plus protected pages.
KYC, email verification, 2FA checks, OTP requests, withdrawal pre-checks, and confirmation modals.
Thai and English structure using Next.js App Router and i18n routing patterns.

Next.js · React · TypeScript · Axios · i18n · KYC

AI product

AI-enabled web application console

Feature modules for chatbot configuration, knowledge management, workflow management, meetings, billing-related screens, and team-owned product areas.

Typed data layers with React Query, query-key factories, mutation hooks, and SDK clients.
Auth0 authentication and real-time updates through SSE and WebSocket integrations.
Shared UI components inside a pnpm and Turborepo monorepo with strict TypeScript boundaries.

React Query · Auth0 · SSE · WebSocket · Turborepo · LLM

Commerce

Bilingual storefront and automation flows

Commerce and reseller features covering product catalog, cart, checkout and payment, customer accounts, flash sales, commission logic, and CMS-driven content.

Built account, checkout, payment, and reseller or commission user journeys.
Created mobile deep-link previews, store fallback, and Open Graph sharing infrastructure.
Self-hosted n8n with Docker to connect LLM outputs into downstream workflow steps.

Next.js · CMS · n8n · Docker · Open Graph · Payments

Streaming platform

Online course video streaming experience

End-to-end video streaming platform features — HLS playback, adaptive bitrate, live classes, quizzes, certificates, subscription payments, and content protection.

Built a video streaming player with HLS adaptive bitrate, play/pause/seek, playback speed, chapter navigation, and resume-watching across sessions.
Developed course catalog with search/filter, multi-level learning paths (chapter → lesson), live-class WebRTC streaming with real-time chat and Q&A, and quiz/certificate automation.
Implemented payment/subscription flows, coupon/promotion management, transaction handling, DRM-inspired content protection, and student/instructor dashboards.

React · Next.js · HLS · WebRTC · WebSocket · Payments

About

Frontend craft with product, security, and AI context.

I work across product requirements, API integration, frontend architecture, and production support. My strongest fit is a team that needs someone who can own complex web flows end-to-end: from typed data fetching and state management to reusable UI systems and user-facing polish.

Ship production-ready interfaces that work across desktop and mobile.

Build secure user journeys around auth, KYC, wallet, and transaction flows.

Turn APIs into typed, reusable frontend data layers and UI patterns.

Use AI tools pragmatically to automate workflows and accelerate product delivery.

Portfolio ecosystem

A connected portfolio, AI console, backend API, and custom skill system.

These public repositories work together as a production portfolio stack: the frontend presents the experience, the backend powers content and AI endpoints, the AI console demonstrates the private assistant workspace, and the custom skills repository manages reusable AI context for public and internal surfaces.

Frontend platform

↗

Bilingual portfolio with live AI assistant

A production Next.js portfolio for presenting frontend, full-stack, and AI integration work with Thai/English content, articles, contact flows, and a public-safe AI assistant.

01 / Next.js · React · TypeScript · Tailwind CSS · Docker · GitHub Actions

Backend API

↗

Go API for content, contact, admin, and AI routes

A separate Go backend that keeps database, admin, contact, article, and AI adapter logic outside the frontend while exposing clean HTTP APIs for the portfolio site.

02 / Go · go-zero · Supabase REST · Redis · Docker · Ollama

AI workspace

↗

Open WebUI-inspired private AI console

A custom AI console interface inspired by Open WebUI and the panyakorn.com dark emerald visual system, designed for a VPS-hosted Ollama stack.

03 / Next.js · React · TanStack AI · Tailwind CSS · SSE · Ollama

AI context system

↗

Repo-managed skills for public and internal AI assistants

A repository for managing AI skill profiles, Ollama Modelfiles, and deployment assets so different AI surfaces can load the right context safely.

04 / Python · Ollama Modelfile · GitHub Actions · Skill profiles · VPS

Experience

Frontend Engineer

DEV DOGDOG CO., LTD.

Frontend Engineer
2024 – Present · Bangkok, Thailand · Sole frontend engineer

Sole frontend engineer responsible for architecture, development, and delivery of production Next.js/React applications across fintech, AI SaaS, and e-commerce product domains simultaneously.
Owned all frontend decision-making end-to-end — API integration, state management (Redux, Zustand, React Query), form validation, and reusable UI components — with no dedicated frontend team to delegate to.
Independently integrated Claude/OpenAI LLM APIs and built n8n automation pipelines, serving as the sole point of contact across design, backend, and product stakeholders for all frontend decisions.

EDUCATION PLUS STREAMING AND SERVICE CO., LTD.

Frontend Engineer
2021 – 2024 · Bangkok, Thailand · Promoted from Junior Developer

Built the video streaming player end-to-end (HLS playback, adaptive controls, resume-watching) and developed the course catalog, search/filtering, and multi-level learning paths with progress tracking.
Implemented live-class streaming with real-time chat and Q&A, quiz/assessment modules with automated certificate generation, and student/instructor dashboards.
Built payment and subscription flows for course purchases, including promotions and transaction handling.

Capabilities

Modern frontend systems with pragmatic AI workflows.

The stack is broad, but the through-line is consistent: clear architecture, reliable delivery, and interfaces that stay maintainable after launch.

Frontend: React.js, Next.js, TypeScript, JavaScript, HTML5, CSS3, responsive UI
State / Data: React Query, Redux, RTK Query, Zustand, Context API, Axios, REST APIs
UI Systems: Tailwind CSS, Ant Design, Material UI, Radix UI, Bootstrap, Styled-components
AI / LLM: Claude API, OpenAI API, prompt design, n8n workflow automation, AI-assisted development
Backend / CMS: Node.js, Golang, PHP / WordPress, Directus, JSON APIs
Tools: Git, Docker, pnpm, Turborepo, Vitest, Biome, Postman, Swagger, JIRA, Confluence

Writing

Notes on frontend architecture, AI product work, and practical delivery.

A small library of portfolio-safe articles about building production interfaces, integrating AI into products, and keeping web systems maintainable.

Frontend systems · 6 min

Shipping frontend systems that stay understandable after launch

A practical look at breaking complex product flows into reusable UI systems, typed data boundaries, and reviewable states.

↗02

AI integration · 5 min

Designing AI workflows that help the product instead of decorating it

How I think about embedding LLM features into real workflows with clear inputs, safe outputs, and handoff points that teams can support.

↗03

Next.js · 7 min

A clean localization pattern for Next.js portfolio and product routes

Notes on organizing locale-aware routes, metadata, and content files in a way that scales from a portfolio to a larger product surface.

↗04

AI Product Engineering · 12 min

Building AI Workflow Studio: from portfolio idea to observable production system

A practical case study of turning an AI portfolio concept into a standalone workflow operations console with secure controls, persisted execution stages, live SSE updates, auditability, and rollback-ready delivery.

↗

Let’s build useful, secure, and polished web products.

Open to frontend, full-stack, AI integration, and product-focused web development opportunities.

contact://intake

POST /api/contact

Send a project note directly from the site.

This form now posts into the portfolio backend, stores the inquiry in PostgreSQL, and can optionally forward it to a webhook for follow-up workflows.

Emailpanyakorn40@gmail.com GitHubgithub.com/panyakorn04 LinkedInPanyakorn Boonyong LINEchannarong3932 ResumeDownload PDF

Building polished web products with React, Next.js, and AI workflows.

Bangkok-based Frontend / Full-stack Developer

Available for frontend, full-stack, and AI-enabled product teams.

Flagship · AI workflow operations

live production

AI Workflow Studio — from workflow idea to observable production run

Open live studio ↗View frontend source ↗

AI Workflow Studio

Execution inspector / production

Live

Production path · portfolio → studio → backend → Supabase

Production system path

LIVE

1
Portfolio
Introduces the case study and routes visitors to the live product.
2
Workflow Studio
Renders workflows, metrics, run controls, and the live execution inspector.
3
Go backend
Owns admin sessions, mutations, SSE, rate limits, and audit behavior.
4
Supabase
Persists workflows, executions, and execution stages through the backend.

Workflow lifecycle

SSE

Security boundaries

Session

Shipped outcomes

Shipped

The problem

The solution

Workflow lifecycle

Searchable workflow inventory with status filters and persisted execution history.
Execution-specific stage timeline streamed over SSE, with reconnect and fallback states.
Operational signals for run volume, success, latency, and recorded cost.

Security boundaries

Authenticated run mutations are proxied by a session-backed BFF that forwards only the named admin cookie.
Backend mutation rate limiting and persistent audit records protect and trace studio actions.
The browser uses same-origin routes; backend credentials and internal origins stay server-side.

Shipped outcomes

Live at studio.panyakorn.com as a separate, responsive production application.
CI runs tests, lint, build, and deployment-script validation before publishing an immutable SHA-tagged image.
Health-gated VPS deployment automatically restores the previous image on failure and supports manual SHA rollback.

Next.js 16 · React 19 · TypeScript · Go · Supabase · SSE · Docker · GitHub Actions

View backend source ↗

custom-ai-skills and n8n/workers are planned integration points for reusable agent tools and long-running jobs; this case study does not present them as part of the currently shipped Studio runtime.