DEV Community

Cover image for Building Patch Pay: A Beginner's Journey with Kiro
CabbageCacheKid
CabbageCacheKid

Posted on

Building Patch Pay: A Beginner's Journey with Kiro

How I used Kiro to Resurrect a 1920s Switchboard for Modern Money Movement As A Beginner

I found out about Kiroween, and Kiro for that matter, with less than a week left in the hackathon. In six days, I was able to build a site that is aimed at helping users find the most efficient ways to transfer their money. As someone relatively new to coding, I'm still processing how that's even possible. The answer? My new friend Kiro! (I do like the ghost logo, if I am being honest.)

Brainstorming
After generating a list of ideas for each category, I decided to go with "Resurrection: Revive an obsolete technology for the modern era." However, I got some inspiration from another category too - "Frankenstein: Stitch together different, seemingly incompatible technologies into a single, powerful application."

I've always been frustrated by how expensive and slow it is to move money between my own accounts. Banks charge fees, payment apps have limits, and I never know if I'm choosing the cheapest or fastest option. I'd think "there has to be a better way to figure this out."

The vintage switchboard aesthetic came from a conversation with a friend about moving money. We joked about how we felt like telephone operators, who manually connected calls by plugging cables, when we have to move money between accounts. We were trying to find the best way to connect our cash from one account to another. We were manually "routing" transfers. That metaphor became the heart of the project: using dead technology to solve a modern problem.

Getting Started
I wanted to solve a real problem: moving money between my own accounts costs too much and takes too long. I never know if I'm choosing the cheapest or fastest option. So I decided to build an algorithm that would figure it out for me—analyzing all possible routes and balancing cost, speed, and risk.

The catch? I'd never built anything outside of some vibe-coded prototypes. I had to watch a lot of YouTube videos just to make sure I understood the submission criteria.

Discovery: Spec-Driven Development
Kiro introduced me to spec-driven development, and it changed everything. Instead of diving into code, I spent two days working with Kiro to write formal requirements and design documents. We defined 33 "correctness properties"—statements about what should always be true in my algorithm. But here's what I learned: I didn't actually understand my own problem until I tried to explain it formally. Kiro kept asking clarifying questions that exposed gaps in my thinking. What happens if there's no direct path? What if the deadline is on a weekend? What if I need to combine multiple accounts?

Admittedly, I started this way because my first instinct was to ask one of my favorite generative AI chatbots to help me create a plan. I realized later that I didn't need to tack on that additional pre-work step. At first, implementing the plan felt painfully slow. I was cueing up tasks not knowing if I was "doing it right". I think I even asked Kiro something along the lines of, "are we making something?"

Once the spec was complete, Kiro generated 203 tests from it—170 unit tests and 33 property-based tests. Then we implemented the algorithm systematically, task by task. According to Kiro, there are zero bugs. I believe it, but I still feel like my knowledge gap is making it hard for me to trust that. I also wanted to do some things I had to set aside due to time constraints that would have made the final product a bit more user friendly and would have made my project more useful.

The Fun Part: Vibe Coding
For the user interface, I took a completely different approach. I had this vision of a vintage 1927 telephone switchboard—dead technology solving modern problems. Instead of writing specs, I just talked to Kiro naturally: "Create a vintage switchboard with brass accents and mechanical sounds." I uploaded some images for inspiration which Kiro was able to translate into design changes.

Kiro generated a complete Web Audio API implementation with low-pass filters for authentic muffled clicks. The first sounds it added were funny and did not fit the vibe, but I let Kiro know, and it fixed it no problem.

When I said "make it mobile-friendly but keep the vintage aesthetic," Kiro created a completely different vertical layout instead of just shrinking the grid.

The Secret Weapon: Steering Documents
About three days in, I discovered steering documents—small files that Kiro always reads for context. I created three: one explaining what I'm building (financial routing), one defining my tech stack (TypeScript, Vitest), and one showing my architecture (functional pipeline).

The difference was immediate. Kiro stopped making assumptions. Every new file went in the right place. Every test used the right framework. I stopped repeating myself in every conversation. It felt like Kiro finally understood my project.

Challenges and Breakthroughs
The hardest part was learning when to use which approach. I tried spec-driven development for the UI—too slow. I tried vibe coding for the algorithm—too risky. Finding the balance took experimentation.

Account synchronization between pages was tricky until Kiro helped me implement React Context. The mobile switchboard layout stumped me until Kiro suggested a vertical flow instead of a spatial grid.

But the biggest challenge was trusting the process. As a beginner, I wanted to see code immediately. Spec-driven development forced me to think first, code second. That discipline made all the difference.

The Outcome
Six days. 85+ files. 8,000+ lines of code. 203 tests passing. Zero bugs in the core algorithm. WCAG AA accessible. Mobile responsive. PWA-capable. One switchboard, resurrected to help improve modern money movement.

More importantly, I learned how professional software is built: understand the problem deeply, design formally, implement systematically, prove correctness with tests. Kiro didn't just generate code—it taught me a mental model for tackling complex problems.

I now know I can build complex, correct software—even as a beginner and I am motivated to keep learning more.

Screenshots from my Kiroween Project

Working in Kiro

Trying to Figure out the Accounts Algorithm

My First Hook

Patch Pay: Early Iterations

An Early Version of the Control Room Page

Patch Pay: Final Iterations
The Patch Pay Switchboard Page

Patch Pay: My Process

Patch Patch: System Architecture (made with with Kiro)

Patch Patch: System Architecture (made with with Claude)

Patch Pay: Spec Driven Documentation vs. Vibe Coding (made with Nano Banana)

Thanks for reading!

Github Link: https://github.com/cabbagecachekid/Patch-Pay

Shoutouts: Kiro, The Kiroween Community, & All the YouTubers I got help from!

P.S. I'm a Senior UX Design Researcher with experience collaborating with teams to build Fintech/AI/Security products that meet user needs. I would love to join a hackathon team in the future. If anyone wants UX expertise, let's connect. Maybe I'll even get better at coding.

Top comments (0)