Marketer DNA

A 60-second quiz that types marketers, roasts them gently, and makes them want to share.

ConnectsBlue is a popularity contest where the voters are the competitors. We inverted the ask: instead of begging 1,000 fellow marketers for a vote, we hand them a piece of identity content about themselves that they voluntarily broadcast to their professional network.

Personality quizzes are one of the most battle-tested viral mechanics on the internet. Tickle hit 150M users, and Spotify Wrapped had 200M+ people interact in the first 24 hours of 2025. Marketer DNA ports that same self-disclosure loop into the marketer-identity space.

What it does

Marketer DNA is a 60-second, 10-question quiz that types the taker as one of 12 marketer archetypes — The Hook Gremlin, The Dashboard Monk, The LinkedIn Philosopher, and nine more. Each result is a screenshot-perfect 9:16 Spotify-Wrapped-style card with an AI-personalized 3-line roast blurb, a superpower/kryptonite stat bar, and one-click share to X, LinkedIn, WhatsApp, and Threads. Every caption is pre-filled with a link back to our ConnectsBlue submission.

How we built it

Built on Next.js 14 App Router + Tailwind + TypeScript in a single codebase. Claude Haiku 4.5 generates the personalized blurbs via an /api/roast route that reads the user's key from an x-user-anthropic-key header and falls back to hand-written canonical blurbs when no key is present. @vercel/og renders the 1080x1920 share card PNG at the edge. An in-memory stats store seeded with 1,047 plausible responses powers the live leaderboard without needing a database. A settings page persists API keys in localStorage and links directly to each provider's signup.

Challenges

The hardest part wasn't code — it was the copy. Archetype names, taglines, and roast blurbs needed to land in the sweet spot of 90% flattering / 10% playfully self-deprecating so people would actually share them. We hand-edited all 12 archetypes and 10 questions until every forced-choice felt like a specific marketer we knew. The second hard problem was the share loop: every share caption needed to look organic, tag the archetype, and drive a backlink without reading like a call-to-action.

Accomplishments

A complete viral loop that works end-to-end with zero external dependencies out-of-the-box. Result cards that render in under a second. A leaderboard that looks populated from first page-load. And copywriting that our early testers screenshot-and-send instead of politely closing.

What we learned

Self-disclosure activates the same dopamine circuit as food and money — so if your hackathon asset is about the voter, you don't need to ask for the vote. We also learned that Satori (the engine behind @vercel/og) requires explicit display:flex on every multi-child div, which is the kind of tiny footgun that eats an hour if you're not ready for it.

What's next

1. Wire the in-memory stats store to Supabase for cross-device persistence.
2. Add a third AI-generated hook variant for each share caption so the same archetype doesn't post the same tweet twice.
3. Add a ConnectsBlue referral tracker that attributes votes back to the taker who brought them.
4. Add a "sibling archetype" explanation — why you're 72% Hook Gremlin, 18% Meme Whisperer, 10% Viral Savant.
5. Add an admin export of the raw answer matrix for trend reports.

Built With

• anthropic-claude
• docker
• next.js-14
• react-18
• satori
• tailwindcss
• typescript
• vercel-og