Payee Check

Inspiration

I wanted to make something practical for owners and bookkeepers at small trades and construction firms. A supplier email requesting new bank details creates a consequential task: checking the change before paying. Payee Check turns that task into a clear workflow with a record of what was checked.

What it does

The app shows a fictional weekly payment run with two bank-change requests. It guides the user to the supplier’s trusted number already on file, collects the supplier’s stated details, and locks that answer before comparing it with the email.

A mismatch or incomplete check keeps the simulated payment held. A successfully saved match marks it ready to pay. Each attempt creates a dated, printable record.

How I built it

I used the Devpost Learn Skill Pack in Claude Code, with AI-assisted planning and reviews of the scope, product requirements, technical specification and build checklist.

Claude Code implemented the app and tests in six checked slices. The stack is React, TypeScript and Vite, with zod validation and localStorage. No AI model runs inside the app.

I tried both sample journeys and completed the final hands-on review. The recorded final checks passed 470 unit tests, 59 end-to-end tests and the TypeScript check. Nine deliberate code changes were also used to check that the relevant tests would catch broken safeguards.

Challenges and lessons

One important design flaw was allowing someone to edit their answer after seeing the comparison. The fix locks answers before comparison, preserves that lock across navigation and reloads, and makes retries separate attempts.

Other challenges included preserving leading zeros, handling failed storage writes without falsely showing success, and keeping earlier records unchanged.

The main lesson was turning “make it high quality” into specific, testable requirements—and checking that the tests fail when those requirements are deliberately broken.

Limitations

This is a local proof of concept using fictional suppliers and simulated calls and payments. It cannot prove a call happened or authenticate the person answering. Records remain in one browser, and there is no live inbox integration.

Built With

• claude-code
• devpost-learn-skill-pack
• localstorage
• playwright
• react
• typescript
• vite
• vitest
• zod