MISSION_LOG — J. TORGBE-COFIEpayload dossier · filed from the archive · return for other payloads

● DOSSIER 04 — OPENED

← RETURN TO INDEXSITE: INDEX · PAYLOAD DOSSIER · ARCHIVE

PAYLOAD 04 — INDEPENDENT · REACT + HONOFILED CAREER DISCOVERY PLATFORM

IvefoundMe

ROLE: FRONTENDCLASS: SELF-DISCOVERYSTATUS: IN FLIGHT

A gamified career discovery platform that turns the RIASEC personality assessment into a guided quest — users answer questions, get their archetype, build a self-portrait, and receive a personalized career roadmap.

MISSION OBJECTIVE — why this payload flew

Career assessments are usually boring: a long form, a PDF, a number. IvefoundMe reframes the RIASEC model as a quest — six steps from personality questions to a self-portrait to a career roadmap delivered to your inbox. The goal was to make self-discovery feel like exploration, not evaluation.

I owned the frontend end to end — the quest flow, the design system, the motion language, and the email/PDF delivery. The product needed to feel like a gallery and a game at the same time: curated, editorial, but with just enough game mechanics to keep people moving forward. Like celestial navigation, it's about finding your position by the stars — except the stars here are personality traits.

What if your career path was a game you couldn't lose?

telemetry — counters, no invented KPIs

6QUEST STEPS welcome → setup → assessment → results → portrait → finalize

36RIASEC QUESTIONS 6 sets of 6, yes/no tap-to-select

61DESIGN AUDIT TESTS preventing token drift across the system

1CAREER ROADMAP delivered as PDF via email

SYSTEMS BREAKDOWN — what I built, module by module

SYS.01 – 05

SYS.01Quest flow & onboardingSix-step guided journey from welcome to results. Each screen is a gallery piece — editorial typography, wall-label metadata, hairline rules. Built mobile-first with tap-to-select interactions.JOURNEY

SYS.02RIASEC assessment engine36 personality questions across 6 RIASEC dimensions. Server-owned scoring computes the archetype — like stellar classification, but for personality types. Results reveal a 3-letter code with descriptor and score visualization.CLASSIFICATION

SYS.03Self-Portrait ForgeUsers select personality statements from a canvas grid to build a personal narrative. Like astrophotography — capturing and composing your own image from available light.COMPOSITION

SYS.04Career roadmap deliveryPersonalized PDF career report generated with React Email and @react-pdf/renderer, delivered via Resend. The Scroll of Truth — a document users can keep and share.DOWNLINK

SYS.05Design system & motionTokenized color system with 6 RIASEC accent ramps, Fraunces + Instrument Sans typography, CSS-only motion with View Transition API. A 61-test audit suite prevents token drift.CRAFT

instrument rack — carried on this flight

React 19 · TypeScriptfrontend

TanStack Start · Router · QuerySSR + routing + state

Hono · Node.jsbackend

NeonDB · Drizzle ORMdatabase

Tailwind CSS v4 · shadcn/uistyling

Zustandclient state

Resend · React Email · @react-pdfemail + PDF delivery

Vitest · Testing Librarytesting