KidCareer MVP

Showcase
, , , ,
1

What this app is

KidCareer is an AI-assisted experience for kids and teens (roughly ages 8–18) to explore possible careers through a playful, low-pressure journey. Users do not sign up or log in: each browser gets a guest session so they can finish an adventure or questionnaire and see tailored career suggestions. The homepage features a “Future Explorer Adventure” story with scenes and choices; the app route also supports a structured questionnaire tied to assessments stored in Supabase. Results can be explored on Dashboard and Results, and optionally shared via a link (no account required).

The initial UI and scaffolding were generated and iterated in v0 by Vercel (Vercel’s prompt-to-UI workflow), then taken into this repo—where auth was removed in favor of guest-mode, APIs were tightened, and Supabase/schema changes were documented for production-style hosting.

You can visit the app here: https://v0-kidcareer-mvp.vercel.app/

How to use it (step by step)

  1. Open the site (/). You land on the Future Explorer Adventure landing experience.

  2. Start the adventure — enter name, age, and pick Boy or Girl (this picks scene art paths).

  3. Play through scenarios — read each mini story, choose an answer, advance until all scenes are done.

  4. Wait for AI results — after the final choice, the app calls the /api/evaluate route to generate top career matches with scores and explanations.

  5. Review outcomes — see your primary match and alternates; use Share (native share where available, otherwise copy/prompt link) or Download card (image export).

  6. Optional: structured path — from Dashboard go to Assessment for the questionnaire-style flow; results feed Dashboard / Results and can use share from Results when tied to completed assessments.

Technologies used

Area Choice
Framework Next.js (App Router)
Language TypeScript
UI React 19, Tailwind CSS, Radix-based / shadcn-style UI primitives
Database & backend-as-a-service Supabase (Postgres-style tables); server-only reads/writes with service role + guest session cookie (kidcareer_guest_id)
AI Vercel AI SDK (ai, @ai-sdk/react, @ai-sdk/openai); /api/chat streaming + tools; /api/evaluate for structured career recommendations
Images / extras next/image; html-to-image for downloadable result cards
Tooling pnpm, ESLint-ready setup, Next.js Turbopack in dev

Deployed on Vercel