Phong Truong — Multiverse Software Engineer Portfolio

01

GitHub ↗ Demo ▶

Inventory Application

A full-stack inventory management tool built with React, Express, and SQLite/Sequelize. Implements complete CRUD functionality, search filtering, and input validation, developed collaboratively via GitHub PR workflows.

React Express SQLite Sequelize Jest/Supertest MUI

Key Features

View All & Single Item: Displays all items with name, description, price, category, and image; single item pages show full details.
Add Item: React form with validation; submits POST requests to create new items with instant UI updates.
Delete & Update: DELETE request to remove items; pre-filled PATCH form for editing with front-end and back-end validation.
Search & Filter: Search bar for filtering items by name or category on the client side.

My Contributions

Implemented Tier 1 front-end view for a single item
Built Tier 2 "Add item" form and POST /items Express route with a reusable validateItem function
Expanded Sequelize model to include a quantity field with validation and default values
Added Search, Quantity handling, and client-side validation features
Fixed bugs and iterated via multiple focused PRs

STAR Story

Situation

Team was tasked with rebuilding an inventory management system as a full-stack React and Express/Sequelize application requiring reliable CRUD and user-friendly features.

Task

Implement core features connecting front-end and back-end - Add/Edit Item flows, quantity handling, search functionality, input validation, and PR-driven improvements.

Action

Built React components, implemented CRUD routes, added reusable server-side validation, and expanded Sequelize models. Delivered changes through clear, incremental PRs.

Result

Fully functional full-stack workflow with reliable item creation, updating, validation, and searching. Improved stability, data integrity, and usability across the app.

Key Takeaways

Strengthened full-stack engineering by delivering tightly integrated React front-end features with Express/Sequelize APIs
Learned the value of incremental tier-based delivery to maintain code quality and project momentum
Gained experience collaborating on a shared codebase - coordinating features through structured PRs, rebases, and iterative code reviews

02

GitHub ↗ Demo ▶ Live ↗

Cashflow Guru - Final Bootcamp Project

A full-stack personal finance application that goes beyond passive expense tracking by delivering actionable, AI-powered financial guidance - built end-to-end solo with TypeScript, React, Node.js/Express, and Prisma ORM.

TypeScript React Node.js/Express Prisma Google Gemini API npm workspaces

Key Features

Dashboard: Monthly income summary, total expenses, debt balance, savings progress, and cash flow snapshot with key metrics visualizations.
CRUD Tracking: Add, view, edit, and delete income sources and categorized expense entries with real-time dashboard updates.
Debt & Savings Goals: Input debt details (balance, interest rate, minimum payment) and savings targets, persisted via Prisma.
AI Advice Engine: Button-triggered analysis generating tailored advice via Google Gemini - debt payoff strategies, expense cut suggestions, accelerated savings plans.

Purpose & Goals

Address limitations in traditional budgeting tools by providing personalized, actionable guidance for debt payoff and savings acceleration. Users input income, expenses, debt obligations, and savings goals - then receive tailored recommendations powered by Google Gemini AI.

Solo end-to-end ownership - design to deployment.

STAR Story

Situation

Final bootcamp capstone: build a full-stack personal finance app requiring reliable data persistence, user-friendly input flows, financial calculations, and external AI integration - solo.

Task

End-to-end ownership: design Prisma schema, build RESTful APIs for CRUD, create React components for input and visualization, and integrate Google Gemini for personalized advice.

Action

Designed Prisma models, built Express CRUD routes with validation, developed typed React components with hooks, integrated Gemini API, and handled async calls, error cases, and secure key management.

Result

Functional full-stack app that reliably tracks finances, generates intelligent personalized advice, and provides a responsive interface - demonstrating complete end-to-end solo engineering ownership.

Key Takeaways

Deepened full-stack TypeScript proficiency end-to-end: React, Node/Express, Prisma
Gained hands-on mastery of Prisma ORM - schema design, migrations, relations, efficient querying
Strengthened integration skills: secure API key management, async handling, error resilience
Built confidence with end-to-end solo project ownership from setup to polished UX

03

GitHub ↗ Demo ▶

The Wish Granting API - Back-End Module

A secure, feature-rich RESTful API with JWT authentication, Google OAuth 2.0, role-based access control, and Gemini AI-generated wish outcomes - inspired by The Fairly OddParents.

Node.js/Express Sequelize/SQLite JWT Google OAuth 2.0 Gemini AI Jest/Supertest

Key Features

Auth: Local JWT + Google OAuth 2.0 with Passport; both flows issue signed JWTs for protected routes.
CRUD for Wishes: Full CRUD with categories (fun/practical/chaotic), user ownership, and relational User data in responses.
Fairy Management: Admin-only CRUD for Fairies with a requireAdmin middleware guard.
RBAC: Basic users manage only their own wishes; admins manage all resources. Clear 401/403/400 error semantics.
AI Wish Outcomes: Gemini API generates ironic, humorous magical outcomes in the style of The Fairly OddParents.

My Contributions

Full CRUD for Wishes: model, routes, validation, category support, and relational User data in responses
Category-based filtering with safe validation for invalid categories
Fairy CRUD: model, routes, admin-only protection, User associations
Built reusable WishAPI frontend client: auth headers, token storage, error handling, helper methods
Dashboard, Wishes, and Fairies frontend pages - role-aware UI behavior

STAR Story

Situation

Build a secure API supporting auth, RBAC, multiple resource types (Wishes, Fairies, Users), and optional AI-generated wish outcomes - while serving a frontend client.

Task

Implement major backend features (CRUD for Wishes/Fairies, category filtering, validation) and build the frontend integration layer for authenticated, role-aware data rendering.

Action

Built Wishes CRUD, Fairy CRUD, category filtering, WishAPI frontend utility class, dashboard pages, and delivered PR-focused incremental features through tier-based milestones.

Result

Secure, stable, role-aware API with functional CRUD, seamless frontend integration, and Gemini-driven wish outcomes. Users can sign in, manage wishes, view filtered lists, and interact with fairies.

Key Takeaways

Gained practical experience implementing JWT, Google OAuth, and RBAC authorization patterns
Improved Sequelize modeling discipline with enums, associations, and 4xx error semantics
Strengthened full-stack ownership by building complete resource flows from model and route to validation and frontend integration

04

GitHub ↗ Demo ▶

Medieval Times - Front-End Module

An immersive RPG-style Next.js application with drag-and-drop inventory, quest systems, character progression, persistent state, and animations - built with TypeScript, Context + Reducer, and thoroughly tested with Vitest and Playwright.

Next.js TypeScript @dnd-kit React Spring TailwindCSS Vitest Playwright

Key Features

Drag-and-Drop Inventory: Interactive grid and equipment slots built with dnd-kit, supporting mouse, touch, and keyboard sensors with slot acceptance rules.
Quest System: Message Board with rotating quests, card-flip UI, accept/decline workflows; Quest Log with Active/Completed tabs, detail modal, and completion flow.
Quest Reward Engine: Parses reward strings, injects items into inventory, calculates XP, and triggers level-ups with stat increases.
Persistent State: Full game state serialized to local storage for save-file persistence across reloads.
Animated Completion Modal: React Spring staggered reveal for gold, items, and level-up updates.

My Contributions

Quest System Foundation: Message Board, quest rotation, card-flip UI, accept/decline logic
Quest Log UI with Active/Completed tabs, responsive card grid, and modal view
Items database (100+ typed JSON entries) and reward parsing + item lookup utilities
Quest Completion Engine: gold, items, XP/level logic integrated into reducer
Animated Quest Completion modal with React Spring staggered reveals

STAR Story

Situation

Build a fully interactive RPG front-end combining inventory management, quest progression, character stats, animations, and persistent state - using Next.js and TypeScript with professional engineering practices.

Task

Architect and implement the quest board, quest log, reward engine, items database, and complete quest completion flow - plus navigation, state persistence, and animations.

Action

Built Message Board system, Quest Log, items database + reward parsing utilities, Quest Completion Engine, animated completion modal, responsive header/navbar, and contributed Vitest + Playwright tests.

Result

Polished, immersive RPG experience - users can equip items via drag-and-drop, accept and complete quests, gain rewards and levels, view animated progression, and maintain persistent state across sessions.

Key Takeaways

Strengthened front-end architecture by building a multi-component system with reducers, context, typed models, and drag-and-drop
Learned to build for accessibility and responsiveness with keyboard-based DnD, mobile navigation, and inclusive modal interactions
Built confidence creating polished interactive interfaces blending engineering patterns with thoughtful design

05

GitHub ↗ Demo ▶

Plan Pilot - Deployment Module

A production-deployed, full-stack project management app - teams create projects, share unique access codes to invite collaborators, manage tasks, and generate AI-assisted project plans via Gemini. Deployed on Render with PostgreSQL, Docker, SSL, and CORS config for cloud readiness.

React Node.js/Express PostgreSQL Sequelize styled-components Docker Render Gemini AI

Key Features

Access Code Collaboration: Unique randomized project codes - share with teammates to instantly join with no password friction.
Tasks System: Full CRUD with status, priority, difficulty, estimated time, and modal-based creation UI.
AI Project Plan: Compiles tasks and team members into a Gemini prompt to generate a summary, suggested timeline, and delegation recommendations.
Deployment-Ready: SSL for production Postgres, CORS allowlists, health checks, Docker builds for Render.
Project Dashboard: View all your teams and projects at a glance with live task counts and team membership summaries.

My Contributions

Foundational backend: Users, Teams, Tasks, TeamMembers Sequelize models, routes, controllers, and validation middleware
Access code system - generate, validate, and join teams end-to-end
Docker + Docker Compose, env-specific DB config, health check endpoints, and full Render deployment resolution
Centralized API wrapper handling fetch, error parsing, JSON safety, and env-based base URLs
Production CORS allowlist, PostgreSQL SSL settings, and environment variable alignment for Render

STAR Story

Situation

Build a fully functional, deployment-ready full-stack app supporting collaborative project management - running on Render with production constraints (CORS, SSL, env config).

Task

Implement core API endpoints, access-code collaboration flow, validation/auth middleware, data models, frontend integration, project dashboard, and fix deployment issues for production.

Action

Built full backend with Sequelize + Express, implemented the access code flow, wrote reusable validation middleware, created a polished React frontend, and built a centralized API client.

Result

Fully operational cloud-deployed app - teams create projects, join via code, manage tasks, and generate AI project plans. Runs smoothly across environments with a polished, intuitive UX.

Key Takeaways

End-to-end production deployment experience: Docker, Render, PostgreSQL SSL, environment management
Strengthened full-stack TypeScript and Node/Express architecture under real deployment constraints
Learned cross-team integration: managing shared state, access control, and data consistency at scale

PhongTruong

About Me

Experience

Projects

Inventory Application

Cashflow Guru - Final Bootcamp Project

The Wish Granting API - Back-End Module

Medieval Times - Front-End Module

Plan Pilot - Deployment Module