← BackProject · 06
MBTI City Matcher
React · Supabase · TypeScriptGITHUB ↗
- Each MBTI dimension (E/I, S/N, T/F, J/P) is mapped to city characteristics (population density, cultural pace, infrastructure, openness) via a weighted scoring matrix. The result isn't a lookup table; it's a ranked score across 50+ cities that surfaces unexpected matches.
- Supabase handles authentication via magic link and persists quiz results per user, so people can retake the quiz and compare results over time. Serverless API routes proxy Supabase calls so credentials never reach the client.
- Framer Motion drives all quiz transitions: each question slides in on entry, answers animate on selection, and the city reveal uses a staged fade sequence timed to feel deliberate rather than instant.
- Deployed to Vercel; the entire stack (auth, database, storage) runs through Supabase so there's no backend infrastructure to manage.
Tech Stack
REACT
REACTTYPESCRIPT
TYPESCRIPTSUPABASE
SUPABASETAILWIND CSS
TAILWIND CSSFRAMER MOTION
FRAMER MOTION