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

divinefavour1234567 — Tue, 23 Jun 2026 13:23:25 +0000

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.

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.

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();
};

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);
});
};
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!

Title: How I Built ZenPlan: A Premium AI Habit Tracker with Next.js, Vercel OIDC, and Amazon DynamoDB

divinefavour1234567 — Sat, 20 Jun 2026 16:32:29 +0000

I built this for the Hack the Zero Stack with Vercel v0 and AWS Databases Hackathon.
Here's the thing—building a habit tracker sounds easy until you actually start building it. Check off a box, increment a counter, save it. Done, right? Wrong. If you want it to feel premium, look polished, and actually work without lag or weird edge-caching bugs, it gets complicated fast.
So I decided to build ZenPlan—a dark, glassmorphic habit tracker and routine planner that actually feels like a real app. I deployed it serverless on Vercel, hooked it up to Amazon DynamoDB, and ran into some genuinely interesting engineering problems. Let me walk you through how I built it.
What's ZenPlan Actually Do?
I didn't want just another boring checklist. The whole point was to make it feel alive and interactive.
When you check off a habit, it triggers this CSS particle animation that actually feels good. I also built an AI Coach you can chat with—like, actually useful. If the coach suggests something (morning meditation, whatever), it renders an "Add to Dashboard" button right in the chat and writes it straight to your database. No copy-paste, no manual entry.
On top of that, there's an analytics section showing your streaks, a checkout modal where you can simulate upgrading to Pro, and even an interactive architecture diagram showing how data actually flows through the system in real-time.
For the tech stack, I went with Next.js 16 (App Router), Tailwind CSS, and Framer Motion on the frontend, backed by Amazon DynamoDB.
The Security Thing: Vercel OIDC + AWS IAM
Technical Deep Dive 2: Tackling Edge Caching & State Persistence
During deployment on Vercel, I noticed that upgrading or cancelling a subscription plan would occasionally show outdated badges on the navbar due to Edge caching. I'd click upgrade, Vercel would execute it successfully, but the UI badge wouldn't update until a hard browser refresh.

To fix this, we forced dynamic routing on the API and injected explicit Cache-Control header directives into src/app/api/profile/route.ts: import { NextResponse } from 'next/server';
import { db, isDynamoConfigured } from '@/lib/db';

export const dynamic = 'force-dynamic';

export async function GET() {
try {
const profile = await db.getProfile();
return NextResponse.json({
...profile,
dbMode: isDynamoConfigured ? 'Amazon DynamoDB' : 'Local File Simulator',
}, {
headers: {
'Cache-Control': 'no-store, max-age=0, must-revalidate',
},
});
} catch (error) {
console.error('API GET profile error:', error);
return NextResponse.json({ error: 'Failed to fetch profile' }, { status: 500 });
}
} Alongside this server-side configuration, client-side fetches were updated with cache-busting search parameters: const response = await fetch(/api/profile?t=${Date.now()}, {
cache: 'no-store'
}); This double-layered solution ensures state modifications (e.g., ticking off a habit or upgrading a subscription) reflect instantly without reloading or facing stale client mismatches.

Technical Deep Dive 3: Single-Table DynamoDB Mode
For maximum performance and cost optimization, we structured profiles and habits in a single DynamoDB table. When DYNAMODB_TABLE_NAME is configured, the application appends partition keys (PK) and sort keys (SK):

Profile Key: PK: PROFILE#default-user | SK: PROFILE
Habit Key: PK: HABIT# | SK: HABIT
Doing index scans on these partition and sort keys allowed us to fetch all dashboard dependencies in index scans, resulting in blazing fast loads.

What I Learned
OIDC is the Future: Passwordless integrations make serverless deploys safer and easier to maintain.
Edge Cache Busting: When compiling React Server Components and Edge Route handlers, you must be extremely explicit about cache control header policies to keep client views synchronized. Links
Live Demo: https://zenplan-six.vercel.app
GitHub Repository: https://github.com/divinefavour1234567/zenplan
Thank you to Vercel and AWS for hosting this amazing Hackathon! If you liked ZenPlan, please drop a star on the repo!

DEV Community: divinefavour1234567

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

Title: How I Built ZenPlan: A Premium AI Habit Tracker with Next.js, Vercel OIDC, and Amazon DynamoDB