PROJECTS

Software Engineer

Frontend & Angular

Modern client-side engineering with Angular 22: standalone components and signals, computed-derived state persisted through effects, dependency-free SVG, hand-rolled SCSS design tokens, and live deployed demos.

Integration Java .NET Python AI/ML Data React Angular
Back to Projects

John's AI Lab Live

An Angular 22 front-end for three Google Gemini agents — a review analyst whose tool calls stream into the UI as they run, a grounded portfolio concierge, and a math-mission generator whose schema-validated JSON becomes a playable game. The API key never reaches the browser: Angular talks to Vercel serverless functions that run the agents server-side.

  • Signals everywhere: per-agent chat state (messages, busy, model, draft) lives in a service as signals keyed by agent id — each tab keeps its own conversation, including a half-typed draft.
  • Streaming without a library: a hand-rolled NDJSON reader over fetch streams parses tool-start / tool-end / delta events and updates the pending message live — spinning-gear trace steps, then a typing caret.
  • Reusable chat shell: one agent-chat component (signal input()s) powers both chat agents; the mission stage is a separate playable state machine (setup → loading → play → done).
  • Dev ergonomics: ng serve proxies /api to a local Node stand-in for the Vercel functions, so one npm run dev runs the whole stack.
Angular 22 Signals Google Gemini NDJSON streaming Vercel Functions SCSS
Live Demo
John's AI Lab — three Gemini agents with a live streamed tool-call trace, live on Vercel

Watch the agent's tool calls stream in live, then play a Gemini-generated math mission.

Personal Budget Planner Live

A client-side personal-finance tracker built with Angular 22 — standalone components and signals. Track income and expenses, set per-category monthly budgets, and watch a live dashboard with a custom SVG donut chart, all stored in the browser via localStorage. No backend.

  • Signal-driven state: a single store holds transactions and budgets as signals, derives every total via computed, and persists each change through an effect.
  • Live dashboard: total balance, monthly income / expenses / net, savings rate, a dependency-free SVG donut of spending by category, and budget bars that turn red when you go over.
  • Transactions & budgets: add / edit / delete income and expenses with filter and search; set per-category monthly limits with live spent-vs-limit bars.
  • Persistence: everything saved to localStorage through a fail-safe JSON wrapper and reloaded on return; sample data is seeded on first run.
Angular 22 TypeScript Signals Standalone SCSS Vitest
Live Demo

  • Signals store: services/budget-store.ts is the single source of truth — transactions and budgets as signals, all totals derived with computed, and every change persisted via an effect.
  • Fail-safe persistence: services/storage.ts wraps localStorage in a try/catch JSON layer; sample data is seeded on first run.
  • Custom donut: a dependency-free SVG donut-chart component computes arc geometry from category totals — no charting library.
  • Routing & structure: dashboard, transactions, and budgets are lazy-loaded standalone routes, with a reusable transaction-form modal and typed models for transactions, budgets, and the category catalogue.
  • Tooling: Angular CLI build, hand-rolled SCSS design tokens in styles.scss, TypeScript throughout, Vitest unit tests.

A signals-driven dashboard — the totals, the SVG donut, and the budget bars all recompute live as you add transactions.

Hangman Encyclopedia Live

Hangman with a collection meta-game, built with Angular 22 — every word you solve unlocks a real “did you know” entry in your personal encyclopedia: 434 fact-checked entries across 12 volumes, all stored client-side in localStorage, wrapped in a vintage-encyclopedia design with light and dark themes.

  • Collection meta-game: pick from 12 volumes, including the new Mythology, Music, Inventions, and Human Body. Win and the word joins My Encyclopedia with its fun fact; lose and the fact is shown but not collected. Streaks, best streak, and win/loss record persist between visits.
  • Light & dark themes: a “lamplight” dark palette with WCAG AA contrast. It follows your OS until you choose, remembers the choice, is applied before first paint so there’s no flash, and crossfades with the View Transitions API.
  • Signal-driven game: a single GameStore holds the round as signals, derives misses and letter tiles via computed, and persists stats + collection through effects.
  • Thoughtful rules: six misses, an on-screen keyboard plus full physical-keyboard support, and a hint that costs one miss — but is never allowed to be the losing one.
  • Hand-built UI: a dependency-free ink-style SVG gallows (one body part per miss), a self-coloring keyboard, and vintage-parchment SCSS design tokens.
Angular 22 TypeScript Signals Custom SVG SCSS tokens Dark mode Vitest
Live Demo

  • Signals store: services/game-store.ts models the whole game — round state as signals, misses and tiles derived with computed, and stats + collection persisted through effects.
  • Curated word banks: 12 banks, 434 entries (word, hint, fact, difficulty), drafted by a multi-agent pipeline, fact-checked twice against web sources, and playtested for hint leaks and difficulty before being committed as typed data files. A Vitest guard spec (word-banks.spec.ts) enforces the rules: letter pattern, unique ids, no hint leaks, no repeats across volumes.
  • Theming: services/theme.ts holds the theme as signals. It follows prefers-color-scheme until overridden, persists the choice, and stamps <html data-theme>; an inline pre-paint script prevents a flash, and toggles crossfade through the View Transitions API.
  • Routing & structure: lazy-loaded standalone routes for play and encyclopedia, with reusable gallows and keyboard components.
  • Design system: hand-rolled SCSS with a vintage-encyclopedia token set (parchment, ink, and the Fraunces serif), plus a dark “umber paper, parchment ink” palette swapped in under [data-theme='dark']. Category colors lift toward white in dark mode to stay legible.
  • Tooling: Angular CLI build, TypeScript throughout, Vitest unit tests for the theme service and word banks, deployed on Vercel.

Open the live demo — pick a volume, solve the word, and watch the entry join your encyclopedia. The sun/moon button switches themes.