Create Next App

Shopping List API

A REST API backend for a Shopping List website. Users can create shopping lists, add/update/remove items, mark items as bought, and view lists with their items. The API includes interactive documentation via Swagger.

Macca Van Phuc

JavaScriptReduxFirebaseReact-Bootstrap

A production-ready single-page application (SPA) for selling macadamia products. It includes a customer-facing storefront and an authenticated admin console for content editing and order/customer management.

Cordon Bleu

NextjsAntdFormikYupFirebase

A mini application where users can log in and contribute their special recipes that they discovered from mistakes. Non-login users can view all the contributed recipes.

Portfolio 2019

VuejsBootstrapFirebase

A personal portfolio website showcasing projects, skills, and professional experience. The project emphasizes accessible, responsive interfaces with a polished visual design and subtle animations.

Our Rainbow

VuejsBootstrapFirebase

A content site that aggregates news and articles across multiple topics. It includes a public storefront for readers and an authenticated admin console for editing and managing content.

The Cocktail Factory

NextjsAntdReact QueryBuilder Pattern

A lightweight Next.js 14 app for cocktail discovery. Users can search recipes by name or ingredient, and results are rendered with a clean, responsive UI.

Matching Quizzes

NextjsAntdReact HookTailwind

A small Next.js 13 app showcasing several matching games (card-style). Players flip cards, check matches, and reset rounds in a smooth, responsive UI.

Fetch English

NodejsExpressMongoDBHTML5Bootstrap 4CSS

A web platform for English learners to register for and manage online courses with FetchEnglish. Once registered, students and teachers can log in to track lesson progress and review feedback after each class.

RHF MUI and Zod

NextjsMUIZodTailwind

A minimal demo app showcasing reusable form inputs built with React Hook Form (state/control), MUI (UI components), and Zod (schema-based validation).

NextAuth Demo

NextjsNextAuthjsZodPostgreSQLMUI

A Next.js 15 demo focusing on authentication and role-based authorization. It uses NextAuth.js with both Credentials and Google OAuth providers, enforces account linking, and protects routes/APIs with role checks.

Responsive Navigation

NextjsAntdFormikYupFirebase

A responsive Next.js 15 navigation bar that auto-measures available width and moves overflowed links into a “More” dropdown. The visible links adapt to the viewport so the layout stays clean across devices.

One step at a time