I build web apps end to end, and I turn what I learn into something you can click.

That habit turned into a set of interactive course sites. When I could not find a good explanation of how an AI agent works, I built one that shows the messages array growing in real time. Same for data structures, algorithms, Redis, TypeScript, and APIs.

Open to frontend / full-stack roles — new grad through mid-level — in the SF Bay Area or Irvine, CA.

PetNote · pet-centric social app, multi-owner by design

Two people can co-manage one pet profile, which is where most of the difficulty is. Account deletion writes a TTL tombstone, so a second open tab cannot bring the profile back. Counters carry a counted flag and cannot go below zero. Invite codes are re-validated inside the transaction, so two people redeeming the same code cannot both succeed.

_{React 19 Firebase Cloud Functions Tailwind 4 — 200+ commits} · live · repo

AgentTape · replay a Claude Code session that already happened

Drop a transcript on the page and step through the run: the messages array as it grew, the step that blew up the context, and whether that payload is still being re-sent every turn since. Parsing happens in your browser, so nothing is uploaded. agenttape check runs the same expectations from the command line and exits non-zero when one breaks, so it can sit in CI.

_{Next.js 15 TypeScript Canvas DevTools Protocol — 3 dependencies} · live · repo

ToneDown · a live tone coach for heated conversations

Acoustic and semantic signals combined into one score every two seconds. The reducer never calls Date.now(); every transition reads the timestamp off a TICK event instead, which is what lets the demo replay from a script and keeps its 100+ tests deterministic. Falls back from Groq Whisper to Web Speech to raw loudness, so it still works with the network off.

_{React TypeScript Groq Vitest Playwright} · demo · repo

GreenLane · immigration timeline tracker

Ten years of visa bulletin history, wait-time estimates, and email alerts when a category moves. The data comes from 130 US visa bulletins and 424 Canadian Express Entry draws, refreshed by a scheduled job every morning.

_{Next.js 15 SSR Python GitHub Actions} · live · repo

KOVA Flooring · brand site and dealer portal, shipped for a client

The public brand site is statically exported, so there is no server to run and Firebase never reaches the public bundle. Behind a login sits a dealer portal where each dealer sees pricing for their own tier next to live inventory, plus an admin console for editing price per product per tier and importing stock by CSV.

_{Next.js 15 Static Export Firebase Auth Firestore Cloudflare} · live

Repo Time Machine · a playable history of a public GitHub repository

Paste a repository URL and watch its default branch grow commit by commit. File trees are rebuilt from checkpoints and diffs, with exact and reconstructed states labelled separately. The GitHub token stays on the server, and a synthetic 16-commit demo runs without spending GitHub quota.

_{Next.js 16 TypeScript GitHub REST API Vitest Playwright} · live · repo

iCanDoIt · a native macOS day planner

Attach a reward to each task; clear them all and the app throws confetti. Built with SwiftUI and SwiftData as a plain Swift package. Two hidden flags do the testing: --snapshot renders every screen offscreen to PNG without asking for screen-recording permission, and --selftest asserts what screenshots can't prove, like drag-and-drop placement and schema backfill.

_{SwiftUI SwiftData} · repo

Interactive courses and practice tools, with progress kept in the browser where applicable.

_{AgentLab's responses are recorded in lib/scenarios/, so it runs without an API key. Each wrong answer in its exercises comes with an explanation of why it is wrong.}

CyberFan — four cartoon appliances drawn in 1940s cel style, with working gears and no audio files: every sound is oscillators and filtered noise, and the airflow is aimed at the camera instead of across it.

Renren Across Tabs — open multiple browser rooms and send a cartoon Renren from one tab to another. No account, no backend — just browser tabs talking.

Avatar Dash — a small platformer starring the dog in my avatar, with variable-height jumps, coyote time, and buffered input.

Also: a Dota-flavored snake that calls your killstreaks, a neon Pong you steer by hovering, tank battles, a fluid sim, an n-body gravity sandbox, and a handful of cognitive drills. Each is a single HTML file — open it in a browser.

Portfolio · LinkedIn · Email

© 2026 Weiren Feng. All rights reserved. Published for reading and portfolio purposes; not licensed for reuse, modification, or redistribution.