PROJECTS

Software Engineer

Frontend & React

Modern client-side engineering with React 19, TypeScript, and Vite: real state-management patterns, intent-named custom hooks, accessible drag-and-drop, unit-tested logic, and live deployed demos.

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

Workflow Board Live

A Trello-style drag-and-drop task board built with React 19, TypeScript, and Vite — full card editing, per-column WIP limits, search/filter, and a simulated multiplayer layer with presence and an activity feed.

  • Drag & drop: accessible board powered by @dnd-kit — reorder cards within a list and move them across columns.
  • Card editing: title, description, assignee, priority, labels, and due dates edited in a modal.
  • Architecture: a single normalized store driven by useReducer + Context; components dispatch only through intent-named custom hooks.
  • Mock multiplayer: a simulated-collaborator engine, live presence, an activity feed, and localStorage state synced across browser tabs.
React 19 TypeScript Vite @dnd-kit useReducer + Context Custom hooks localStorage sync
Live demo

  • State model: columns, tasks, and users stored as id-keyed maps plus ordering arrays (a normalized store) so moves and edits are O(1) lookups.
  • Data flow: a single useReducer + Context store; UI never mutates state directly — it calls intent-named hooks (useBoard, useTasks, useFilters, useCurrentUser).
  • Drag & drop: @dnd-kit/core + sortable for keyboard-accessible reordering and cross-column moves.
  • Collaboration mock: useSimulatedCollaborators drives presence + an activity feed; useLocalStorage persists and syncs state across tabs.
  • Tooling: Vite dev/build, TypeScript throughout, deployed on Vercel.

Open the live demo — drag cards, switch users, hit “Simulate,” and watch state sync across browser tabs.

Interactive Habit Tracker Live

A habit tracker built on logic, not checkboxes — schedule-aware streaks, rolling completion percentages, and a clickable contribution heatmap, all driven by pure, unit-tested functions. Built with React 19, TypeScript, and Vite.

  • Schedule-aware streaks: current and longest streaks count only the days a habit is actually due — a weekday habit survives the weekend, and an unchecked-but-not-over today gets a grace period instead of resetting to zero.
  • Dynamic completion %: a rolling 30-day consistency ring per habit, plus a board-wide today ring and streak aggregates in the header.
  • Interactive heatmap: a GitHub-style grid of the last 18 weeks — click any day to backfill or undo it and watch every number recompute.
  • Tested core: the streak and percentage engine is a set of pure functions shipped with a Vitest suite.
React 19 TypeScript Vite useReducer + Context Custom hooks Vitest localStorage sync
Live demo

  • Pure engine: all streak/percentage math lives in streaks.ts as pure functions of (habit, completions, today) — trivial to reason about and unit-test.
  • State model: normalized habits + completions maps in a useReducer + Context store; components read and act through custom hooks (useHabits, useHabitStats, useOverview).
  • Scheduling: every day / weekdays / weekends / custom weekday sets, with timezone-stable ISO yyyy-mm-dd date helpers.
  • Persistence: localStorage with cross-tab sync.
  • Tooling: Vite dev/build, TypeScript throughout, Vitest for the engine, deployed on Vercel.

Open the live demo — mark a day done and watch the ring, streak, and header recompute; click heatmap squares to backfill past days.

Password Validator Live

A real-time strength checker beyond a checklist: an entropy-based score that penalizes predictable patterns, a time-to-crack estimate, breach-style common-password detection, and a crypto-secure generator — all client-side, no password leaves the page.

React 19 TypeScript Vite Web Crypto Custom hooks Vitest
Live demo

  • Pure engine: all scoring lives in strength.ts / entropy.ts as pure functions of a single password — easy to reason about and unit-test.
  • No global store (by design): there is no shared cross-component state, so it uses local state + custom hooks over the pure core — the repo’s other React apps use Context + useReducer where that’s warranted.
  • Entropy model: detects character pools, then discounts low variety, sequences, and repeats before scoring 0–4 and estimating crack time.
  • Privacy: 100% client-side — nothing is sent anywhere, and the secure generator uses the Web Crypto API.
  • Tooling: Vite dev/build, TypeScript throughout, Vitest (19 cases), deployed on Vercel.

Interactive Stocks Live

A stock dashboard pulling live market data through a server-side API-key proxy — ticker search, a live quote, a hand-built interactive SVG chart with range tabs, and a saved watchlist with sparklines. Falls back to labeled demo data so it always runs.

React 19 TypeScript Vite Edge Functions SVG charts Vitest
Live demo

  • Server-side key proxy: the browser never sees the API key — it calls a same-origin /api/massive proxy that injects the key and forwards an allow-listed path to the market API.
  • One proxy, two runtimes: the same proxy logic runs as a Vercel Edge Function (prod) and a Vite dev middleware (local), so behavior is identical in both.
  • Graceful degradation: on no key / error / rate-limit the proxy returns 503 and the client falls back to deterministic, clearly-badged demo data — it never breaks.
  • Hand-built charts: the price chart and sparklines are custom SVG (no chart library), with a hover crosshair + tooltip and 1W/1M/3M/1Y ranges.
  • Tested core: response parsers, chart geometry, and the demo-data generator have a Vitest suite.

BMI Calculator Live

A BMI calculator past the one-line formula: the WHO band your number lands in, a hand-built SVG gauge, the healthy weight range for your height, and BMI Prime. Metric and imperial switch without clearing your numbers — BMI framed as a screening tool, not a diagnosis.

React 19 TypeScript Vite SVG gauge Custom hooks Vitest
Live demo

  • Pure core: every number on screen comes out of bmi.ts as a plain function of its arguments, with evaluate the single entry point the UI calls; categoryFor matches half-open WHO intervals, so 18.5 reads Healthy weight and 25 reads Overweight, and a twelve-row it.each table pins every edge from both sides.
  • Inverted, not classified: healthyWeightRange solves the formula backwards for a fixed height instead of classifying a weight, and deltaToHealthy turns the result into “18.7 kg above the healthy range” — the tests assert the round trip, so both returned bounds classify back as normal.
  • Lossless unit switching: useMeasurements keeps raw strings per unit system and exposes one canonical cm/kg pair to the maths, so toggling carries your numbers across rather than clearing them — 175 cm / 70 kg becomes 5′8.9″ / 154.3 lb and the BMI still reads 22.9.
  • Hand-built gauge: BmiGauge.tsx is plain SVG — six WHO bands drawn to scale and clipped to a fixed BMI 15–40 span, ticks at 18.5/25/30/35, and a marker clamped to the ends. No charting library.
  • Tooling: Vite dev/build, TypeScript throughout, Vitest (28 cases), measurements and a 10-entry history in localStorage with cross-tab sync, deployed on Vercel.