PB

Panyakorn Boonyong

frontend/full-stack developer

เกี่ยวกับผลงานEcosystemทักษะประสบการณ์ติดต่อ
บทความ
ENติดต่อผม

เมนู

session://nav
01เกี่ยวกับ02ผลงาน03Ecosystem04ทักษะ05ประสบการณ์06ติดต่อ07บทความ08ติดต่อผม

พอร์ตโฟลิโอ 2026 · กรุงเทพฯ

สร้างเว็บโปรดักต์ที่สวย ใช้งานจริง และต่อยอดได้ด้วย React, Next.js และ AI workflows

ผมคือ Panyakorn Boonyong นักพัฒนาเว็บสาย frontend ที่มีประสบการณ์มากกว่า 5 ปีในการสร้างเว็บแอปพลิเคชันสำหรับใช้งานจริง ครอบคลุมระบบแนว financial และ exchange, authentication, KYC, wallet flow และฟีเจอร์ที่เชื่อมต่อ AI เข้ากับโปรดักต์

Frontend / Full-stack Developer จากกรุงเทพฯ

เปิดรับทีมที่ต้องการคนทำ frontend, full-stack และ AI-enabled product

ดูผลงานเด่น ↓ดาวน์โหลด Resumeติดต่อผม
รูปโปรไฟล์ของ Panyakorn Boonyong

Panyakorn Boonyong

Frontend architecture สำหรับงาน production, การเชื่อมต่อ AI เข้ากับโปรดักต์, secure user flows และ reusable UI systems

5+ปีในการสร้างเว็บ production
ReactNext.js, TypeScript และ state/data architecture
AILLM APIs, n8n automation และ AI workflows

01

ผลงานที่เลือกมา

ประสบการณ์จากโปรเจกต์จริง นำเสนอในรูปแบบที่ปลอดภัยต่อ portfolio

ส่วนนี้ไม่เปิดเผยชื่อโปรเจกต์จริง แต่ยังคงสื่อสารขอบเขตงาน บทบาท และความลึกด้านเทคนิคของงานที่ส่งมอบได้ชัดเจน

02

E-Commerce

Storefront สองภาษาและระบบ Automation

  • สร้าง storefront แบบ end-to-end ตั้งแต่ catalog และ cart ไปจนถึง account, checkout และ payment journeys
  • พัฒนา flash-sale flows, reseller/commission logic, CMS-driven content และประสบการณ์ใช้งานสองภาษา
  • Self-host n8n ด้วย Docker เพื่อสร้าง automation pipeline ที่เชื่อมผลลัพธ์จาก LLM เข้ากับ web services และ workflow ขั้นถัดไป

Next.js · React · CMS · n8n · Docker · Payments

03

แพลตฟอร์มการเงิน

เว็บแพลตฟอร์มแนว Exchange

  • จัดการ routing ที่ขึ้นกับ authentication พร้อม access/refresh-token handling และ protected pages
  • พัฒนา flow ด้าน KYC, email verification, 2FA checks, OTP requests, withdrawal pre-checks และ confirmation modals
  • วางโครงสร้างหลายภาษา เช่น ไทย/อังกฤษ ด้วย Next.js App Router และ i18n routing patterns

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

04

AI Product

Web console สำหรับ AI-enabled application

  • สร้าง typed data layers ด้วย React Query, query-key factories, mutation hooks และ SDK clients
  • เชื่อม Auth0 authentication และ real-time updates ผ่าน SSE/WebSocket
  • พัฒนา shared UI components ใน pnpm + Turborepo monorepo พร้อม TypeScript boundaries

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

05

แพลตฟอร์มสตรีมมิง

ระบบเรียนออนไลน์แบบ Video Streaming

  • สร้าง video streaming player พร้อม HLS adaptive bitrate, play/pause/seek, ปรับspeed, ปุ่มข้ามบท และ resume-watching ข้าม session
  • พัฒนาระบบค้นหา/กรองคอร์ส, learning path แบบหลายระดับ (บท → บทย่อย), live-class ผ่าน WebRTC พร้อมแชทและ Q&A แบบเรียลไทม์, ระบบ quiz และใบ certificate อัตโนมัติ
  • implement ระบบ payment/subscription, คูปอง/โปรโมชั่น, การจัดการธุรกรรม, content protection แบบ DRM, และ dashboard สำหรับนักเรียน/ผู้สอน

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

02

เกี่ยวกับ

งาน frontend ที่เข้าใจทั้ง product, security และบริบทของ AI

ผมทำงานได้ตั้งแต่การทำความเข้าใจ requirement, เชื่อมต่อ API, วาง frontend architecture ไปจนถึงดูแลระบบหลังขึ้น production เหมาะกับทีมที่ต้องการคนดูแล web flow ที่ซับซ้อนแบบ end-to-end ตั้งแต่ typed data fetching, state management, reusable UI system ไปจนถึงการปรับแต่งประสบการณ์ผู้ใช้ให้ใช้งานลื่นไหล

01

สร้าง interface ที่พร้อมใช้งานจริงทั้งบน desktop และ mobile

02

สร้าง user journey ที่ปลอดภัย เช่น auth, KYC, wallet และ transaction flows

03

แปลง API ให้เป็น data layer และ UI pattern ที่ typed ชัดเจนและนำกลับมาใช้ซ้ำได้

04

ใช้ AI tools อย่างเหมาะสมเพื่อ automate workflow และช่วยให้ส่งมอบงานได้เร็วขึ้น

03

ระบบพอร์ตโฟลิโอ

พอร์ตโฟลิโอที่เชื่อม frontend, backend, AI console และ custom AI skills เข้าด้วยกัน

ทั้ง 4 repo นี้ทำงานร่วมกันเป็นระบบพอร์ตโฟลิโอจริง: frontend ใช้นำเสนอผลงาน, backend ดูแล API และ AI adapter, AI console ใช้เป็นพื้นที่ทำงานส่วนตัวกับโมเดลบน VPS และ custom-ai-skills ใช้จัดการ context ของ AI ให้เหมาะกับแต่ละพื้นที่

Frontend platform

↗

พอร์ตโฟลิโอสองภาษาพร้อม AI assistant

เว็บพอร์ตโฟลิโอ production ที่สร้างด้วย Next.js สำหรับนำเสนอประสบการณ์ frontend, full-stack และ AI integration พร้อมเนื้อหาไทย/อังกฤษ บทความ ฟอร์มติดต่อ และ AI assistant สำหรับผู้เข้าชม

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

Backend API

↗

Go API สำหรับ content, contact, admin และ AI routes

Backend แยกด้วย Go สำหรับจัดการ database, admin, contact, articles และ AI adapter โดยให้ frontend เรียกผ่าน HTTP API ที่ชัดเจน

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

AI workspace

↗

Private AI console ที่ได้แรงบันดาลใจจาก Open WebUI

UI สำหรับ AI console ที่ออกแบบในสไตล์ dark emerald/glass คล้าย Open WebUI เพื่อใช้กับ Ollama stack บน VPS

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

AI context system

↗

ระบบจัดการ skills สำหรับ AI assistant หลายพื้นผิว

Repo สำหรับจัดการ AI skill profiles, Ollama Modelfiles และ deploy assets เพื่อให้ AI แต่ละตัวโหลด context ที่เหมาะกับงานของตัวเอง

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

04

ประสบการณ์

Frontend Engineer

DEV DOGDOG CO., LTD.

Frontend Engineer
2024 – ปัจจุบัน · กรุงเทพฯ · วิศวกร frontend คนเดียวในทีม

  • รับผิดชอบ architecture, development และ delivery ของ Next.js/React applications ในระบบ production ครอบคลุมทั้ง fintech, AI SaaS และ e-commerce ไปพร้อมกัน
  • ตัดสินใจด้าน frontend ทุกอย่างเอง end-to-end ตั้งแต่ API integration, state management (Redux, Zustand, React Query), form validation และ reusable UI components
  • เชื่อมต่อ Claude/OpenAI LLM APIs และสร้าง n8n automation pipelines ด้วยตัวเอง พร้อมเป็นจุดเชื่อมต่อระหว่าง design, backend และ product stakeholders

EDUCATION PLUS STREAMING AND SERVICE CO., LTD.

Frontend Engineer
2021 – 2024 · กรุงเทพฯ · เติบโตจาก Junior Developer

  • สร้าง video streaming player เอง end-to-end (HLS playback, adaptive controls, resume-watching) พร้อมพัฒนา course catalog, search/filtering และ multi-level learning paths
  • พัฒนา live-class streaming พร้อม real-time chat และ Q&A, quiz/assessment modules พร้อมระบบสร้าง certificate อัตโนมัติ และ dashboard สำหรับนักเรียน/ผู้สอน
  • สร้าง payment และ subscription flows สำหรับการซื้อคอร์ส รวมถึงระบบโปรโมชั่นและการจัดการธุรกรรม

05

ความสามารถ

ระบบ frontend สมัยใหม่ พร้อม workflow ที่ใช้ AI อย่างมีเหตุผล

แม้เครื่องมือจะหลากหลาย แต่แกนหลักของงานยังเหมือนเดิม คือ architecture ที่ชัด ส่งมอบได้จริง และดูแลต่อหลัง 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

07

ติดต่อ

มาสร้างเว็บโปรดักต์ที่มีประโยชน์ ปลอดภัย และใช้งานดีร่วมกันครับ

เปิดรับโอกาสด้าน frontend, full-stack, AI integration และการพัฒนาเว็บที่เน้นคุณค่าของโปรดักต์

contact://intake

POST /api/contact

ส่งข้อความเกี่ยวกับโปรเจกต์ได้จากหน้าเว็บนี้ทันที

ฟอร์มนี้จะส่งข้อมูลเข้า backend ของพอร์ต บันทึกลง PostgreSQL และสามารถ forward ต่อไปยัง webhook สำหรับ workflow ถัดไปได้

บันทึกผ่าน portfolio backend API

อีเมลpanyakorn40@gmail.comGitHubgithub.com/panyakorn04LinkedInPanyakorn BoonyongLINEchannarong3932เรซูเม่Download PDF

© 2026 Panyakorn Boonyong · v0.1.130

GitHubLinkedIn

06

งานเขียน

บันทึกเรื่อง frontend architecture, งาน AI product และการส่งมอบงานแบบใช้งานได้จริง

รวมบทความที่เล่ามุมคิดในการสร้าง production interface, เชื่อม AI เข้ากับโปรดักต์ และดูแลระบบเว็บให้ขยายต่อได้ง่าย

01

Frontend systems · 8 นาที

สร้าง frontend systems ที่ยังอ่านง่ายและดูแลง่ายหลังขึ้นใช้งานจริง

แนวทางวาง frontend architecture ที่ทำให้ product boundary, state, API contract, observability, test และการส่งต่องานยังชัดเจนหลังระบบขึ้น production

↗02

AI integration · 8 นาที

ออกแบบ AI workflows ให้ช่วยงานจริง แทนที่จะเป็นแค่ของตกแต่งโปรดักต์

แนวทางวางขั้นตอนที่ใช้โมเดลไว้ใน workflow ของโปรดักต์อย่างมีขอบเขต ตรวจสอบได้ มีจุดให้คนตัดสินใจ และรับมือกับต้นทุนหรือความล้มเหลวได้จริง

↗03

Next.js · 8 นาที

รูปแบบ localization ที่สะอาดสำหรับ route แบบ Next.js

สถาปัตยกรรม localization ที่ให้ route เป็นจุดตั้งต้น แล้วทำให้ dictionary, data fetching, metadata, navigation, API, fallback และแผน migration ใช้ข้อตกลงเดียวกัน

↗04

AI Product Engineering · 11 นาที

เบื้องหลัง AI Workflow Studio: จากไอเดียใน Portfolio สู่ระบบ Production ที่ตรวจสอบได้

บันทึกเชิงวิศวกรรมจากซอร์สจริง ว่าระบบวาด Workflow ถูกพัฒนาให้เป็นงาน Production อย่างไร ตั้งแต่สัญญาข้อมูลแบบมีเวอร์ชัน คิวที่คงทน การจัดการ Credential ไปจนถึง Timeline ที่ตรวจสอบย้อนหลังได้

↗
บทความล่าสุด