thevudev.site · Vu Nguyen

Selected work

Products where I owned the UI, from the first token to the last pixel check.

DevHabit / Landing

DevHabit design system gallery with tokens and primitives

DevHabit - Coding Platform

A learning platform where developers fix real bugs in short Work Cases to build a daily coding habit. I designed the product and its design system, then built every screen from it.

Tokens before screens: 120+ HSL tokens, including product ones for XP and streaks
Dark mode by token override only, without touching a component
5 primitives documented in a 16-section living gallery

Role: Solo, product design and frontend

React
TypeScript
Vite
Tailwind CSS

Live demo Design tokens GitHub

Nodus / Editor

The Nodus design system page in Light, Paper, Nord, Dracula and Dark, side by side

Nodus design system page with OKLCH color tokens

Nodus - Note Graph

A personal knowledge base where notes connect through [[wiki-links]] and a graph shows how ideas relate. Designed and built end to end, from the editor to the Go API.

Five themes, one token set: OKLCH colors with the same semantic roles in every theme
Links that draw the graph: [[ autocomplete in a CodeMirror editor, automatic backlinks
Spec first: four spec versions, FRDs and an ERD written before each build

Role: Solo, product design and full stack

Nuxt
TypeScript
Tailwind CSS
Go
PostgreSQL

Live demo Design tokens GitHub

Arobid / Home

Arobid - B2B Marketplace

An AI-powered B2B trade platform. For its v2 rebuild I created AroboUI, the platform's first design system, and shipped the marketplace, TradeXpo, supplier and admin screens with it.

Styles and behavior split: framework-agnostic CSS on Tailwind v4, headless React on React Aria, modelled on HeroUI v3
Hard parts first: date pickers, range calendars and comboboxes, accessible by default
Storybook docs and Playwright UX tests, ten npm releases in four weeks

Role: Frontend engineer, freelance

Next.js
Tailwind CSS
React Aria
Storybook

Visit arobid.com npm

How I work

From brief to handover. Design and frontend in one person, so nothing gets lost between them.

Understand
Turn the brief into a written flow.

Questions and edge cases, answered before anything is drawn.
Design
Design the UX, or refine it with your designer.

Figma flows on design tokens from day one.

DevHabit Nodus
Build
Build it on a shared component library.

Typed and component-driven. AI speeds it up; I review every change.

My agent setup
Verify
Test it, then check it against the design.

Unit, integration and manual QA. Pixel-level when the project calls for it.
Hand over
Walk you through it, then ship.

A short walkthrough and notes in plain English.

Writing

Notes from real projects: frontend, backend, design systems and how I work.

Sep 2026
Before I hand over a UI ticket
Ways of working4 min
A simple quality loop before handover: understand the ticket, check the intended UI with Figma MCP, let Playwright cover the repeatable checks, then a manual pass.
Sep 2026Ways of working4 min
Aug 2026
What preparing for an AWS certification changed about how I learn
Backend & cloud3 min
Learning only what each task needed left gaps. Preparing for the AWS Solutions Architect Associate exam gave that learning a structure, and changed the habit.
Aug 2026Backend & cloud3 min
Mar 2026
A 200 OK is not the end of the story
Backend & cloud3 min
A successful response does not prove the right thing happened. Idempotency, database constraints, failure paths and reviewable infrastructure close the gap.
Mar 2026Backend & cloud3 min
Jan 2026
The real talk: what’s actually hard about a design system
Design systems5 min
The hard part of a design system came before the components: understanding the product, its position, and what it should feel like to use.
Jan 2026Design systems5 min
Oct 2025
What is a design system, really?
Design systems4 min
A product that started without a design system showed me one can begin small: shared tokens, the components the product needs, and visible decisions.
Oct 2025Design systems4 min
Sep 2025
Before the handoff: working with designers
Ways of working3 min
Frontend work often starts before a Figma file is ready. Treating the handoff as a conversation makes a screen easier to build, clearer to use and easier to maintain.
Sep 2025Ways of working3 min
Apr 2025
Making CSS layers work together
Frontend4 min
Global CSS, Sass, component styles, Ant Design and Tailwind can live in one project, as long as each has a clear job and the cascade is used on purpose.
Apr 2025Frontend4 min
Jan 2025
Where does this backend concern belong?
Backend & cloud4 min
Middleware, guards, pipes, interceptors and exception filters all run around a request. Starting from the concern, not the decorator, narrows the choice quickly.
Jan 2025Backend & cloud4 min
Nov 2024
Where TypeScript stops being enough
Frontend3 min
A type describes what the code expects. It does not check what actually arrives at runtime, so data from outside the codebase needs validating at the boundary.
Nov 2024Frontend3 min
Sep 2024
A NestJS module is more than a folder
Backend & cloud3 min
As an application grows, a module becomes a boundary: what a feature owns, what it offers to the rest of the app, and what it needs in return.
Sep 2024Backend & cloud3 min
Jun 2024
Testing as a developer: building confidence before handoff
Ways of working3 min
Starting from the risk rather than the test type: unit, integration and end-to-end checks each answer a different question, and a manual pass covers the rest.
Jun 2024Ways of working3 min
Mar 2024
Small changes that make an SPA feel faster
Frontend3 min
Performance work does not always need a new caching layer. Often the first useful step is finding where people wait and removing a little of it.
Mar 2024Frontend3 min
Oct 2023
The bugs between requests: keeping async UI consistent
Frontend4 min
When every request succeeds and the screen is still wrong: late responses, stale refetches and loading states that no longer matter.
Oct 2023Frontend4 min
Jun 2023
The invisible work behind a Vue or React SPA
Frontend4 min
Most of the experience lives in loading, empty, error and pending states, and in where each piece of state belongs.
Jun 2023Frontend4 min
Mar 2023
Before the merge: working in a shared codebase
Ways of working4 min
Git, deployment, conflicts and dependencies are part of building a feature in a team. Making them visible early saves the next person from surprises.
Mar 2023Ways of working4 min

About

Background, and what I pay attention to.

Vu Nguyen Frontend engineer, UI/UX

I work as a full-stack developer, delivering features end to end. Since 2022 I have built product UI with React and Next.js, and the APIs and infrastructure behind it with Node.js, Go and AWS.

I care most about the details a design file rarely shows, and keep them consistent through design tokens and component libraries.

I work remotely and communicate in English. Some of what I have learned along the way is in Writing.

Stack