How We Built an AI-Powered Career RPG Quest for the YouthCodeX Hackathon 🚀🎮

Hey DEV community! 👋

For the YouthCodeX AI Hackathon, my partner and I wanted to build something that solves a massive problem for teenagers: career decision paralysis and job hunt readiness.

Most career advisors are static lists of links. We wanted to build something that feels alive—so we built PathFinder AI: a gamified, level-locked career RPG simulator featuring Web Audio synth effects, Apple Siri-style voice visualizers, side-by-side ATS resume diffs, and boss-fight salary negotiations.

Here is how we built it, the tech stack, and what we learned.

💡 The Core Experience: From "Intern" to "Executive Partner"
To make career guidance engaging, we gamified the entire flow. Users earn EXP by:

Completing milestones on their career trees.
Solving quick-fire coding riddles on the Dashboard.
Conducting mock voice interviews.
Surviving Day-in-the-Life RPG scenarios.
As they climb ranks, features unlock progressively:

Level 1: Dashboard & AI Voice Interviews
Level 2: Nigeria Cost-of-Living Rent Calculator & Resume ATS Critique
Level 3: Salary Negotiator Sandbox (Scrooge & Victoria Boss fights)
Level 4: 3D Holographic Skills Radar Map & Career Explorer
Level 5: Day-in-the-Life text RPG Simulator
Level 6: Hard-mode Mentor Marketplace
When a user levels up, a full-screen Level Up Celebration Modal triggers, throwing a physical particle explosion across their screen accompanied by a synthesizer major sweep chord!

🛠️ Key Features & Tech Stack
Our stack is lightweight and zero-dependency to optimize load speed and responsiveness:

Frontend: React (Vite) + Context API
AI Integration: Direct client-side SDK integration with the Google Gemini API (@google/generative-ai) with high-fidelity local mock fallbacks for demo modes.
Styling: Vanilla CSS establishing a sleek, glassmorphic dark-neon design system.
Visualizations: Zero-dependency HTML5 Canvas rendering for 3D projections and physics.

1. Zero-Dependency 3D Vector Math on Canvas 🌐 Instead of importing heavy WebGL packages, we wrote custom 3D rotation projection matrices directly onto HTML5 2D contexts:

Interactive 3D Skill Radar: Concentric spider-web polygons showing core capabilities vs gaps. Includes parallax mouse-tilt and floating course tags connect via dashed trails.
Cinematic Laboratory Space: Silhouetted teenagers pointing at floating holograms (code blocks, AI coaches, resume scorecards) with a slow panning matrix.

1. Apple Siri-Style Bezier Waveform 🎙️ During mock interviews, a canvas plots multiple overlapping translucent Bezier curves with varying amplitudes and phases. When the Web Speech API reads questions aloud, the wave height dynamically pulses, and flatlines once silent.

// Siri-style waveform envelope generator preview
const drawWave = (ctx, width, height, time, speed, amplitude, offset) => {
ctx.beginPath();
for (let x = 0; x < width; x++) {
const scale = Math.sin((x / width) * Math.PI); // Clamp wave edges
const y = Math.sin(x * 0.02 + time * speed + offset) * amplitude * scale + height / 2;
if (x === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
};

1. Web Audio Synth Soundscapes 🔊
   To maintain a high-fidelity retro-modern aesthetic, we bypassed heavy audio assets and synthesized game cues locally using the Web Audio API:
   // Lightweight major arpeggio sweep chord on level up
   export const playLevelUpSound = () => {
   const ctx = new AudioContext();
   const now = ctx.currentTime;
   const notes = [261.63, 329.63, 392.00, 523.25, 659.25, 1046.50]; // C4 -> C6 sweep
   notes.forEach((freq, idx) => {
   const osc = ctx.createOscillator();
   const gain = ctx.createGain();
   osc.type = "triangle";
   osc.frequency.setValueAtTime(freq, now + idx * 0.06);
   gain.gain.setValueAtTime(0.06, now + idx * 0.06);
   gain.gain.exponentialRampToValueAtTime(0.001, now + idx * 0.06 + 0.3);
   osc.connect(gain);
   gain.connect(ctx.destination);
   osc.start(now + idx * 0.06);
   osc.stop(now + idx * 0.06 + 0.35);
   });
   };

2. Interactive Salary Negotiator Boss Fight 💼
   Instead of a simple salary slider, users go head-to-head with strict virtual hiring managers (Alex the HR Intern, Scrooge the Finance Lead, Victoria the VP, and Karen the CFO Boss).

Gemini API acts as the strict boss analyzing counter-offers.
Ultimate Stress HUD: Users must justify counter-proposals with career keywords (e.g. React, PyTorch). Begging or excessive rates deplete the boss's patience gauge and trigger biometric alarm sound pulses, culminating in a rescinded offer if it hits zero!

💡 What We Learned
AI Prompts need strict structures: To feed charts, progress bars, and scorecards in real-time, we configured Gemini to return structured JSON. Cleaning Markdown blocks (

json wrapper overrides) using clean RegExp regex replacements was critical to preventing client-side JSON.parse() parser crashes.
Web Audio is a superpower: You don't need megabytes of .wav assets to make an application sound immersive. A few lines of Oscillator nodes can trigger blips, clicks, and chords at near-zero latency.
Visual Diffs aid comprehension: When correcting a resume, users hate raw suggestions. Highlighting deletions in red strikethrough and insertions in green is intuitive and familiar to developers.

🔮 What's Next?
We plan to integrate a persistent database to sync profiles across devices, add more RPG scenarios, and expand our local cost-of-living calculations database to index rent indexes across more African tech hubs.

Check out our project and let us know what you think! We’d love to hear your feedback on the gamification setup or the canvas animations.

Leave a ⭐ if you liked the idea! Happy hacking!