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 stay correct through a three-state counted marker that survives at-least-once and out-of-order delivery, rather than by clamping at zero — clamping would hide a miscount instead of fixing it. 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 — 270+ 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. Compare two runs side by side, or index every session on the machine at once — all of it parsed 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 File System Access — 3 dependencies} · live · repo

ToneDown · a live tone coach for heated conversations

Acoustic and semantic signals combined into one score every two seconds, and every reminder opens into a timeline explaining why it fired. 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 163 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 official regulatory news. The data comes from 130 US visa bulletins and every Canadian Express Entry draw since 2015, refreshed by a scheduled job every morning.

_{Next.js 16 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

Three views over any public repository: Replay walks the default branch commit by commit, Compare puts any two commits or tags side by side, and Insights tracks how size and structure moved. 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 six-level platformer across three worlds starring the dog in my avatar, with variable-height jumps, coyote time, buffered input, a Dog Mode, and a best time and a ghost kept for every level.

Also: a Dota-flavored snake that calls your killstreaks and keeps a record for each of four rank tiers, Gomoku against a negamax opponent with alpha-beta pruning and iterative deepening, a neon Pong you steer by hovering, tank battles, two quick-draw duels for one keyboard (split-screen and western), an iaido duel decided inside a single window, a gravity-collapse survival that remembers your best runs, a fluid sim, an n-body gravity sandbox, fireworks, and a handful of cognitive drills. Most are 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.