Pathfinder: Learn Anything Like a Game

Project Story: Pathfinder About the Project I have a confession: I have bought 47 online courses. I have finished exactly 3.

This wasn't out of laziness. It was because staring at a 40-hour video playlist with zero adaptive structure makes my brain leak out of my ears. I would open a "Complete Python Mastery" course, watch the introduction, feel great about my life choices, and then immediately forget why I wanted to learn Python in the first place.

What I actually needed was a map. A dynamic guide that said: "Here is exactly what to learn next, here is why it matters right now, and here is a micro-dose of dopamine when you finish it."

So, I built the platform I wished existed.

One night at 2:00 AM, I was playing an RPG and leveling up my character’s skill tree. A realization hit me: Why doesn't real-life upskilling work like this? Why do I get a +5 Greatsword for slaying a digital dragon, but absolutely zero systemic reward for finally mastering recursion or pointer arithmetic?

That was the seed. Pathfinder started as a simple concept—"What if learning felt like a game?"—and evolved into an AI-driven engine that procedurally generates interactive, gamified skill trees for any topic imaginable.

What I Learned Prompt engineering is software engineering. I spent over 20 hours wrestling with LLM outputs to generate logical, progressive skill trees. Early iterations would jump directly from "Introduction to Python" to "Advanced Metaclass Metaprogramming" with no structural bridge. I learned that AI needs strict architectural guardrails. The breakthrough came when I moved away from single monolithic prompts and implemented prompt chaining, strict JSON schema validation, and graceful structural fallbacks for when models hallucinated non-existent concepts.

Perceived performance > actual performance. Originally, the AI generated an entire skill tree in one massive backend call. It took 15 seconds. User retention plummeted. I refactored the pipeline to stream nodes via Server-Sent Events (SSE) alongside custom-tailored loading animations. Even though the absolute computation time remained identical, users perceived the app as "blazing fast" because they saw immediate visual progress. Psychology beats engineering.

State management is not a feature to postpone. I initially built the app with localized useState hooks, transitioning to useContext as complexity grew. Eventually, I hit a massive prop-drilling wall that required a grueling refactor of half the codebase. I learned the hard way that for highly interactive, multi-state visual applications, committing to a robust state architecture (like Zustand or Redux) on Day One is non-negotiable.

The internet never sleeps (and hates light mode). I launched v1.0 with a clean light theme. Within hours, a developer on Discord roasted my UI choices so ruthlessly that I stayed up until 5:00 AM implementing a comprehensive CSS variable-based theme engine. They were completely right—the application looks infinitely cleaner in dark mode.

How I Built It Frontend Architecture: Built using React 18, TypeScript, Vite, and Tailwind CSS, with a component foundation from shadcn/ui. The core skill tree is rendered dynamically using custom interactive SVGs coordinated with Framer Motion to make nodes gracefully "bloom" upon generation. To solve the mobile responsiveness issue (where complex trees turn into unreadable spaghetti), I engineered an alternative compact list-view toggle for mobile screens.

Multi-LLM Orchestration: I designed a three-tier AI routing architecture to balance speed, cost, and contextual reasoning. Groq (Llama 3) handles ultra-fast, low-latency text and JSON streaming for individual nodes, quick lessons, and quiz questions. Google Gemini is deployed for complex, high-context reasoning tasks like career path reverse-engineering and comprehensive educational assessment generation. OpenAI acts as an automated, high-availability fallback layer whenever upstream rate limits or outages occur.

Backend & Data Layer: Powered by Supabase for secure authentication (Magic Links + OAuth) and a PostgreSQL database managed via Edge Functions. The database tracks user progress, hierarchical skill nodes, nested quiz score states, user streaks, and achievements. The database schema went through five distinct migrations to elegantly support granular user metrics like telemetry on quiz retries and temporal streak data.

Procedural Career Path Generator: This was the most demanding feature to ship. When a user inputs a target role (e.g., "Machine Learning Engineer"), the system reverse-engineers a complete multi-year curriculum. I built a custom pipeline that first extracts core industry job descriptions, filters them into distinct, learnable skill clusters, ranks them by hard logical dependencies, and calculates realistic time allocations before structuring the final payload.

Challenges Faced The API Token UX Dilemma: I wanted the application to have zero friction, allowing users to try it instantly without an aggressive signup wall. However, running complex AI queries for unauthenticated anonymous traffic meant my server costs would spike instantly. I adopted a hybrid "bring-your-own-key" framework. To fix the initially disjointed UX of forcing users to copy-paste an API key right at the landing page, I built a client-side demo mode fueled by cached Mock Data. Once users saw the immediate value of the application, a contextual notification gently guided them to integrate their own keys in the settings panel.

Tree Topology & Layout Algorithms: Dynamically arranging arbitrary nodes in an asynchronous graph without overlapping lines or uneven spatial budgeting is a known graph theory challenge. Standard flexbox layout engines failed completely. After testing three external graph libraries that bloated the bundle size, I wrote a lightweight, custom recursive layout algorithm. It explicitly calculates the spatial coordinate system where mapping vectors are explicitly defined by layout coordinates ((X, Y)) based on tree depth, parentage, and sibling counts. To safeguard against massive 50+ node trees breaking the boundary boxes, I wrapped the viewport in a hardware-accelerated pan-and-zoom canvas wrapper.

Eradicating Low-Quality Quizzes: Early AI-generated quizzes were laughably simple, offering obvious answers (e.g., "What is Python? A) A snake B) A language..."), which ruined the feeling of achievement. I revised the prompt engineering system across 30+ iterative evaluations. I forced the LLM to generate complex contextual scenarios, utilize highly plausible distractors (incorrect answers that look syntactically correct), and implement variable difficulty parameters based on the user's historical performance.

Reconciling Mermaid.js with Dynamic Themes: I embedded mermaid.js to render highly detailed career-path roadmaps. However, Mermaid's base theme engine resisted dynamic dark/light client switches, resulting in unreadable text and broken contrast lines when the user changed modes. I built a custom DOM mutation observer that hooks into the application's global theme state. It intercepts the rendered SVG container at runtime and injects localized CSS custom properties directly into the Mermaid iframe shadow root, forcing instant, seamless color synchronization.

Shipping Production-Ready Stripe Billing Under Hackathon Constraints: Implementing a robust, secure paywall for premium features during a high-speed hackathon often results in flaky webhook handling, race conditions, or unhandled payment failures. I decoupled the billing flow by leveraging Supabase Edge Functions as an isolated middleware layer to process incoming Stripe Webhooks. Instead of manually managing complex state transitions client-side, the app subscribes directly to real-time PostgreSQL database updates. The second a webhook confirms successful payment, the database updates a premium tier flag, triggering a confetti celebration on the user interface and instantly unlocking full platform access without requiring a manual page refresh.