Portfolio

Vibe Coding Portfolio of Ha Nguyen

Product Manager | System Designer | AI-Driven Builder

Beyond simple screen planning — from system design (ERD) to real implementation with AI (Vibe-Coding).
Introducing my unique workflow that turns ideas into actual products through the K-Hub project.

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
Promotion & Marketing

REST API

/api/v1/

BACK-OFFICE CMS

(Admin)

📒Manage Enrollment / Leads
📦Manage Course Info
📂Content Management
EFFICIENT OPERATION
Operational Efficiency
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

From Deliverables to a Living Product

📌

[Context Note] This workflow builds upon pre-prepared portfolio deliverables (System Overview, ERD, Figma UI). While Steps 1 and 2 lay the traditional planning & design foundation, Step 3 is where AI-Agentic capabilities truly come into play.

As UI Designer
Traditional
UI/UX Design

Step 1 - Visual Flow Design
(UI/UX Design)

Every line of code begins with a seamless user experience. To achieve the goal of student recruitment, I designed the UI in Figma considering the User Journey and conversion rates — guiding users from content persuasion to course enrollment.

As BA
Traditional
System Design & ERD

Step 2 - System Design & Data Modeling
(System Design & ERD)

AI can write code, but it cannot design the system for you. I personally drew the Entity Relationship Diagram (ERD), designed data structures and permission hierarchies, and completed a database architecture that minimizes operational resources.

→ 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 Development
(Prompt-Driven Implementation)

This is where ‘Vibe Coding’ truly shines. By breaking complex problems into smaller pieces and applying deep prompt engineering, I guide AI to generate marketing-optimized Next.js components and Filament forms.

OUTCOMES & IMPACT

A Practical, Production-Ready 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] From Static Deliverables to a Vibrant Product

Going beyond the traditional approach of listing static planning documents (Deliverables) like ERDs and Figma designs, this project proves a ‘living, breathing outcome’ — where plans are fully implemented into a working, interactive web platform.

About Me

THE MIND BEHIND THE WORK
Ha Nguyen

Ha Nguyen

Project Manager

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 the Korean-Vietnam market.
  • Certified CBAP®, CCBA®, Google Cloud ML Engineer.