Portfolio

Vibe Coding Portfolio of Ha Nguyen

Product Manager | System Designer | AI-Driven Builder

단순한 화면 기획을 넘어, 시스템 설계(ERD)부터 AI를 활용한 실제 구현(Vibe-Coding)까지.
K-Hub 프로젝트를 통해 아이디어를 실제 프로덕트로 완성해내는 저만의 업무 프로세스를 소개합니다.

View ProjectAbout Me

THE K-HUB ECOSYSTEM

K-Hub Mastery: Zero to One

ACTOR LAYER
Students
Guest User
Administrator
APPLICATION
FRONTEND

(Brand & Enrollment Hub)

⭐Brand Story
🎓Mentoring Exp.
✅Course Info
📋Enrollment
SALES & MARKETING
홍보 및 마케팅

REST API

/api/v1/

BACK-OFFICE CMS

(Admin)

📒Manage Enrollment / Leads
📦Manage Course Info
📂Content Management
EFFICIENT OPERATION
운영 효율성
DATA LAYER
MySQL

Unified Database

SQLite (dev) · MySQL (prod)

Tech & Tools

DESIGN
FigmaFigmaDraw.io
FRONTEND
Next.jsTailwindReactReact
BACKEND / CMS
LaravelLaravelFilament
THE "CO-FOUNDER" : AI-ASSISTED DEVELOPMENT
ClaudeClaudeGeminiGeminiVS CodeVS Code
Prompt EngineeringCode GenerationSystem Analysis

MY "VIBE-CODING" WORKFLOW

산출물(Deliverables)기술 자료에서 살아있는 프로덕트로

📌

[Context Note] 본 워크플로우는 사전에 준비된 포트폴리오 산출물(시스템 개요서, ERD, Figma UI)을 바탕으로 진행됩니다. Step 1과 2가 전통적인 기획·설계의 기반(Foundation)이라면, Step 3는 AI-Agentic 역량이 본격적으로 발휘되는 핵심 단계입니다.

As UI Designer
Traditional
UI/UX Design

Step 1 - 시각적 흐름 설계
(UI/UX Design)

모든 코드의 시작은 매끄러운 사용자 경험에서 출발합니다. 수강생 모집이라는 목표를 달성하기 위해, 유저가 콘텐츠에 설득되고 수강 신청에 이르는 여정(User Journey)과 전환율을 고려하여 직접 Figma로 UI를 설계했습니다.

As BA
Traditional
System Design & ERD

Step 2 - 시스템 설계 - 데이터 모델링
(System Design & ERD)

AI가 코드를 작성할 수는 있지만, 시스템을 대신 설계해 주지는 않습니다. 저는 직접 개체 관계도(ERD)를 그리고, 데이터 구조와 권한 체계를 설계하여 운영 리소스를 최소화하는 데이터베이스 아키텍처를 완성했습니다.

→ AI Takes Over ✨
As AX-BA
AI-Agentic ✨
claude-code · vibe-coding
✨ Prompt Engineering> Generate Next.js component...✓ Filament form created> Fix API endpoint...✓ Auth guard configured⚡ AI-Agentic loop active

Step 3 - 프롬프트 주도 개발
(Prompt-Driven Implementation)

‘바이브 코딩’의 진가가 발휘되는 단계입니다. 복잡한 문제를 잘게 쪼개고 심층적인 프롬프트 엔지니어링을 통해, AI가 홍보에 최적화된 Next.js 컴포넌트와 Filament 폼을 생성하도록 이끌어냅니다.

OUTCOMES & IMPACT

실질적으로 활용 가능한 CMS Ecosystem의 완성

Input

Traditional Deliverables

Static Assets (Figma, ERD, Specs)

Figma Design
Go to ERD/Figma Design file
✨Powered by AI-Agent
Output

Actual Production App with AI

Live Web Platform (K-Hub)

Frontend

User Hub (Front-end)

K-Hub Front-end
Go to Front
Admin Portal

Management System (Admin)

Filament Admin
Go to Admin

[Living Portfolio] 정적 산출물에서 생동감 있는 프로덕트로 전환

ERD나 Figma 디자인 같은 정적인 기획 문서(Deliverables)만 나열하는 전통적인 방식을 넘어, 기획안이 실제 작동하고 상호작용하는 웹 플랫폼으로 완벽하게 구현된 ‘살아 숨 쉬는 결과물’을 증명해 냈습니다.

About Me

THE MIND BEHIND THE WORK
Ha Nguyen

Ha Nguyen

Project Manager (기획 PM)

Product ManagerSystem DesignerAI-Driven Builder

I’m Ha Nguyen. Let’s connect and build something amazing together.

  • PM / BrSE/ BA with over 5 years of experience in software development.
  • Cross-border Coordinator (사업관리) with over 10 years in Korean-Vietnam market.
  • Certified CBAP®, CCBA®, Google Cloud ML Engineer.