Skip to content
Hen HeangHen Heang.
Back to Projects
Hengo — Focused Korean Learning Platform

Full-Stack Application · Personal Project

Hengo — Focused Korean Learning Platform

Solo Developer 2024 — Present 1 developer
Live
GitHubLive Demo
  • Next.js 16
  • React 19
  • TypeScript
  • Supabase
  • Vercel AI SDK
  • OpenAI
  • Tailwind CSS

Project Summary

Problem

Generic Korean apps teach textbook basics but rarely help an engineer explain a production incident, decode a manager's message, or practice workplace Korean under realistic pressure.

Approach

Hengo V2 is a practical Korean-learning assistant for someone living and working in Korea. Its focused product loop is Capture → Review → Practice → Speak → Improve, with Today, Vocabulary, Practice, Coach, and Study as the five primary destinations.

Screenshots

Hengo — Focused Korean Learning Platform — screenshot

What I Built

  • Today’s Mission combines due vocabulary, phrases, corrections, and scenario practice
  • AI Coach supports conversation, message analysis, phrasing, and structured feedback
  • K-Specialist interview preparation includes practice, scoring, and retry flows
  • Goals, habits, progress, and learning history share one mobile-friendly workspace

Implementation

Next.js 16 and React 19 form a client-side SPA over Supabase Auth and Postgres with RLS. TanStack Query manages server state, while thin Next.js AI routes verify the Supabase JWT and use the Vercel AI SDK with OpenAI for structured JSON, streamed SSE feedback, transcription, speech, and voice-coach workflows. Tailwind CSS v4 and shadcn-style primitives provide the responsive interface.

Architecture Flow

Next.js 16 + React 19 SPA
Supabase Auth + RLS
TanStack Query + domain API clients
Next.js AI route handlers
OpenAI via Vercel AI SDK
Feature data goes directly from browser-side domain clients to Supabase under Row Level Security. AI work is the only server-side application path: the route verifies the caller with a per-request Supabase client before generating or persisting feedback. There is no separate backend service in the deployed web application.

Backend Evidence

Key endpoints

  • POST/api/ai/chat/stream

    Stream an authenticated AI coaching conversation

  • POST/api/ai/analyzer

    Analyze workplace Korean tone and meaning

  • POST/api/ai/vocab/generate

    Generate a structured vocabulary deck

  • POST/api/ai/message-generator

    Generate workplace Korean at an appropriate formality level

Engineering Decisions

  1. Challenge

    Combining learning, interview, and productivity tools without creating a crowded interface

    Decision

    Organized features into focused workspaces with Today’s Mission as the daily entry point

  2. Challenge

    Keeping AI requests secure while most application data is accessed directly from the browser

    Decision

    Kept data behind Supabase RLS and routed only AI calls through JWT-verified Next.js handlers

Takeaways

  • A product becomes easier to return to when its first screen answers one clear daily question
  • Hide-and-preserve is a safer product migration strategy when existing routes and user data still have value
Next Project

Luyra — Personal Finance Workspace