The work, in your hands
Less explanation.
More interaction.
Three small examples built for this portfolio. Change an input, inspect the behavior, and follow the code.
01 / FRONTEND
An interface that
keeps up.
Add a task, change its status, filter the list, and reload. Progress follows the data.
- React state and derived values
- Keyboard-accessible controls
- Browser storage with recovery
Small tasks. Clear progress.
- Reproduce the reported issue
- Trace the API response
- Add a regression test
- Verify the phone layout
Changes stay in this browser.
02 / BACKEND
Good data starts
at the boundary.
This interface calls a real server endpoint. It validates fields, normalizes email addresses, and catches duplicates before returning a preview.
Read the route handlerUse fictional data. The server previews up to 25 rows and stores nothing.
A real request. A readable result.
Choose a sample, edit a field, and run the check. The response comes from the Next.js API.
03 / INVESTIGATION
Reproduce it.
Then prove the fix.
A deliberately small bug: two versions of the same address slip past a raw string comparison. Switch implementations to see why.
Read the regression testsTHE SAME EMAIL / TWO INPUTS
"alex@example.com" " ALEX@EXAMPLE.COM "
COMPARISON KEYS
"alex@example.com" " ALEX@EXAMPLE.COM "
Duplicate missed.
Comparing the raw strings treats these addresses as different contacts.
emailThis demonstration runs in the browser. The import example above applies the same rule on the server.
Try the duplicate sample in the APIBehind the examples
Small pieces.
A connected way of thinking.
Explore the larger application, or read how Abe approaches a problem across the stack.