Mentor Matching Quiz
A career mentor matching quiz, designed, built, and deployed with Claude code as a full-stack collaborator, from first prototype to live product in 18 hours.
Try it ↗
Background
AAPD is a Taiwan-based mentoring platform for product builders, and one I contribute to in my spare time. With 20+ coaches available, visitors often didn't know who to pick, so a guided quiz felt like the right fix: ask a few questions, match them with the right coach.
The team had tried a third-party quiz tool before, but it hit customisation limits and usage caps. As project lead, I decided to build one in-house, with AI writing all the code. No coding background needed.
Before: Third-party tools brought ads, limited customisation, and no brand control.
After: In-house build, consistent branding throughout, without ads.
About Build process
I started with this prompt in Claude Code: point it to the old tool, give it some project context.
The first prompt got the interaction right but the UI felt generic, nothing close to AAPD's
First prompt, cold start.
I tried iterating with prompts, but the results were mediocre with a lot of back and forth.
This got me thinking: is there a more efficient way to do this?
Iteration: getting better, but still lacking in a lot of detail.
Rather than iterating blindly, I took two steps:
#1 I fed the existing AAPD site to AI as a style reference
#2 I had AI generate screens directly in Figma so I could adjust them by hand.
This became the core workflow for the rest of the build, minor changes went straight through prompts. For anything structural or visual, I worked it out in Figma first, then had AI translate the design into code.
Hosting & backend
With the UI in place, two questions remained: where to store the coach data, and how to get the tool online.
For the data, I asked AI to walk me through the options. Firebase came up first, but it introduced a maintenance overhead the team couldn't sustain. I pushed back, and we landed on Google Sheets with Apps Script: familiar, easy to edit, and straightforward to connect. It's also more accessible to non-coders, which matters when the team needs to add or update coach data down the line.
Google Sheets + Apps Script as the data layer
For hosting, the answer was GitHub Pages. This is a lightweight tool, not a product that needs real infrastructure. Free static hosting was the right call, and it keeps deployment simple enough for anyone on the team to manage.
GitHub Pages for hosting
Testing & launch
Before shipping, I tested the flow with five people from the AAPD team. It held up well, smooth and intuitive overall, but two things came up: the quiz was Chinese-only, and nobody had checked how it looked on mobile.
Both got fixed before launch. Conversion tracking went live at the same time, so we could start measuring how many users actually followed through to book a coach.
Some Details
English and Mandarin support with toggle
Responsive Design
Dark/Light Mode
Token library and MD file for future reuse
Try it ↗
Reflection
Building Mentor Match changed how I think about working with AI. The real decisions weren't about prompting. They were about knowing when to step in. Choosing what needed Figma, questioning what the algorithm was measuring, picking Google Sheets over Firebase: these were calls AI couldn't make alone.
AI handled execution. I handled judgment. There were moments where I could see exactly what needed fixing but had to route through AI to get there. That friction made me want to pick up enough code to move faster when the fix is obvious.
From first prompt to backend live: 18 days, 24 coaches, built from scratch. It's a small tool, but it was the first time I took something from a real pain point all the way to working code. That feeling made me want to build something bigger.
Mentor Matching Quiz