SkillQuest

• 

• 

• 

  OCR STUDIO

• 

  Dashboard

💡 Inspiration Career development often feels like a chore—static resumes, disconnected job descriptions, and endless lists of courses. On the other hand, RPG games are incredibly engaging because they provide immediate feedback, clear progression trees, and a sense of "leveling up."

We built SkillQuest to bridge this gap. We wanted to create a "Career Operating System" where every action—scanning a certificate, analyzing a job description, or researching a new topic—is rewarded with XP and mapped onto a visual Skill Tree.

🛠️ How we built it SkillQuest is a full-stack React application designed for speed and intelligence:

Frontend: Built with React 18, TypeScript, and Vite, using Tailwind CSS and shadcn/ui for a sleek, "gaming-grade" interface. Backend: Leverages Supabase for real-time authentication and a relational database that tracks user XP, streaks, and skill masteries. Intelligence: We integrated multiple AI Edge Functions: AI Search: Powered by Gemini with Google Grounding for real-time web research. OCR Studio: 6 specialized pipelines for digitizing certificates, JDs, and handwritten notes. Web Scraper: An automated reader that extracts clean markdown from any URL for the Learning Studio. The Pipeline: We moved beyond isolated features by building "logic bridges." For example, the JD Analyzer doesn't just show text; it calculates skill gaps and creates actual database rows in the user's Skill Tree and Quest Board. 🚧 Challenges we faced One of the biggest hurdles was managing the state synchronization between the AI-generated content and the user's permanent progression. We had to ensure that when a user "completed a quest" in the AI Arena, the XP was accurately reflected across the Dashboard and Profile without page refreshes. We solved this using a custom event-driven architecture and Supabase real-time listeners.

🧠 What we learned Building SkillQuest taught us the power of "Feature Plumbing." An app is more than the sum of its parts; it’s about how those parts talk to each other. Wiring OCR to a Skill Tree sounds simple, but creating a seamless user journey where a physical certificate becomes a digital "Mastery Level" is where the real value lies.

Built With

• actual
• analyzer
• and
• and-handwritten-notes.-web-scraper:-an-automated-reader-that-extracts-clean-markdown-from-any-url-for-the-learning-studio.-the-pipeline:-we-moved-beyond-isolated-features-by-building-"logic-bridges."-for-example
• and-skill-masteries.-intelligence:-we-integrated-multiple-ai-edge-functions:-ai-search:-powered-by-gemini-with-google-grounding-for-real-time-web-research.-ocr-studio:-6-specialized-pipelines-for-digitizing-certificates
• and-vite
• calculates
• creates
• database
• doesn't
• frontend:-built-with-react-18
• gaming-grade"-interface.-backend:-leverages-supabase-for-real-time-authentication-and-a-relational-database-that-tracks-user-xp
• gaps
• in
• it
• jd
• jds
• just
• quest
• rows
• show
• skill
• streaks
• text;
• the
• tree
• typescript
• user's
• using-tailwind-css-and-shadcn/ui-for-a-sleek