I Built a Personality Check That Reads Your Image Swipes

shumatsumonobu — Tue, 07 Apr 2026 01:24:53 +0000

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.

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.

Try It

→ swipeocean.surf — 10 swipes, 10 seconds, find your color today

What type did you get? Drop a comment — curious to see if developers skew toward Explorer or Planner 🤔

Built by @shumatsumonobu

I Built a Hosting Diagnostic Tool on Cloudflare Workers

shumatsumonobu — Mon, 30 Mar 2026 10:12:19 +0000

The Problem

$ hostme --why

Every time I finish building something, I hit the same wall: where do I deploy this?

Vercel? Netlify? Cloudflare? Railway? The options keep growing, and each one has different pricing, limits, and trade-offs. I wanted a tool that could cut through the noise — something fast, transparent, and opinionated enough to actually help.

So I built hostme.

What It Does

hostme is a terminal-style web tool that asks you 7 questions about your project and scores 10 hosting services to recommend your TOP 3.

The whole flow takes about 30 seconds. No signup. No tracking.

The Tech Stack

Next.js (App Router) + TypeScript
Tailwind CSS v4 — runtime theme variables via CSS custom properties
framer-motion — scroll animations on the landing page
Cloudflare Workers via @opennextjs/cloudflare
Dynamic OGP — next/og ImageResponse

Building the Terminal UI

The entire UI is designed to look like a terminal. Here's the approach:

Typing animation: A custom TypingText component renders text character by character. Speed scales with text length — short strings type slower (more dramatic), long strings type faster (less tedious).

Keyboard navigation: Every page responds to keyboard input. Number keys select options, Enter confirms, Backspace goes back. The goal: you should be able to complete the entire diagnosis without touching the mouse.

CSS theming: All colors are CSS custom properties in :root. The terminal green (#00ff41 on #0a1a0a) gives that retro feel while maintaining WCAG contrast ratios.

The Scoring Algorithm

Each of the 7 questions maps to a score matrix: every answer awards 0–3 points to each of the 10 services.

scoreMatrix[question][answer][service] → 0 | 1 | 2 | 3

3 = ideal match
2 = good fit
1 = acceptable
0 = not recommended

Region bonuses are applied separately — e.g., Cloudflare Workers gets +2 in Asia due to its edge network.

The scoring logic is fully transparent: users can view the complete matrix on the /about page.

Dynamic OGP on Cloudflare Workers

This was the trickiest part. I wanted each diagnosis result to generate a unique OGP image showing the user's #1 recommendation.

The problem: next/og (powered by Satori) works on Cloudflare Workers, but font loading via self-referencing fetch fails silently. Workers block loopback requests.

The solution: Load fonts from Google Fonts CDN with a try-catch fallback:

let fontData: ArrayBuffer | undefined;
try {
  const res = await fetch("https://fonts.gstatic.com/s/jetbrainsmono/...");
  if (res.ok) fontData = await res.arrayBuffer();
} catch {
  // Fall back to default font
}

return new ImageResponse(<OgpComponent />, ogpOptions(fontData));

If the font fetch fails, the image still renders with a default font. No 500 errors.

Lightweight i18n

Instead of heavy i18n libraries, all UI text lives in a simple Record<Lang, TextMap>:

export const uiText: Record<Lang, UiText> = {
  ja: { start: "診断スタート", ... },
  en: { start: "Start Diagnosis", ... },
};

Language is determined by URL parameter (?l=ja), and document.documentElement.lang is set dynamically. Total i18n code: ~200 lines across 2 files.

What I Learned

Cloudflare Workers have quirks — no loopback fetch, Edge Runtime not always better than Node.js runtime
Terminal UIs are surprisingly engaging — keyboard navigation makes the tool feel fast and fun
Transparent scoring builds trust — showing the algorithm removes the "black box" skepticism

Try It

→ hostme.dev — find your ideal hosting in 30 seconds

The scoring logic is fully transparent — check the /about page to see exactly how it works.

What's your go-to hosting for side projects? I'm curious how you decide. Drop a comment — I'd love to compare notes.

Built by @shumatsumonobu. We ship on Sundays.

DEV Community: shumatsumonobu

I Built a Personality Check That Reads Your Image Swipes

The Idea

How It Works

The Tech Stack

Scoring Algorithm

AI Personalization

Cloudflare Workers Gotchas

Try It

I Built a Hosting Diagnostic Tool on Cloudflare Workers

The Problem

What It Does

The Tech Stack

Building the Terminal UI

The Scoring Algorithm

Dynamic OGP on Cloudflare Workers

Lightweight i18n

What I Learned

Try It