I Built a Personality Check That Reads Your Image Swipes

#nextjs #cloudflare #webdev #showdev

The Idea

What if you could check your personality just by swiping images?

Not a 50-question quiz. Not a wall of text. Just images.

Swipe right for "That's me!" — swipe left for "Not me." 10 images, 10 seconds.

That's Swipe Ocean.

How It Works

The app is based on the Big Five (OCEAN) personality model — the most scientifically validated framework in psychology.

Each image maps to one of 5 traits (Openness, Conscientiousness, Extraversion, Agreeableness, Sensitivity). Your swipe pattern reveals your balance across these traits, and you get matched with one of 8 personality types.

The key insight: your results change with your mood. Take it on Monday morning vs Friday night — you might get a completely different type. And that's the point. It's not a label. It's a snapshot of who you are today.

The Tech Stack

Next.js 16 (App Router) + React 19 + TypeScript
Tailwind CSS 3 — dark theme with gradient backgrounds
Cloudflare Workers via @opennextjs/cloudflare
Gemini AI — personalized type descriptions based on your scores
Sharp — OGP image generation (static, not dynamic — Workers can't run resvg-wasm)

Scoring Algorithm

Each swipe changes your trait scores:

Swipe	Direction	Effect
"That's me!" →	high trait	+0.1
"That's me!" →	low trait	-0.1
← "Not me"	high trait	-0.05
← "Not me"	low trait	+0.05

"That's me!" swipes have 2x the impact of "Not me" swipes. Your gut feelings shape your scores.

The full scoring logic is transparent — check the /about page.

AI Personalization

After scoring, Gemini AI generates a unique description for your type based on your exact scores. Same type, different scores = different text every time.

The AI runs server-side via a Next.js API route. If it fails (rate limit, timeout), the app falls back to pre-written descriptions. Progressive enhancement — the core experience never breaks.

Cloudflare Workers Gotchas

next/og doesn't work — resvg-wasm requires a ?module import that Workers don't support. Solution: pre-generate all OGP images with Sharp scripts.
Secrets aren't in process.env — @opennextjs/cloudflare doesn't map wrangler secrets to process.env. Use getCloudflareContext().env instead.
WSL required for deploy — Windows can't build the Workers bundle due to native binary issues. Deploy script auto-switches to WSL.