SkillForge

Stop researching. Start learning.

Comment

Inspiration

Most people don't quit hobbies because they lack motivation. They quit before they even start.

You decide to learn guitar, photography, or watercolour. You open YouTube. You open Reddit. An hour later, you've read about how to learn and haven't practiced a single thing — and the excitement is already fading. That's not a willpower problem. That's a missing-product problem.

I built SkillForge for one specific person: the busy adult who knows exactly what they want to learn, but doesn't have time to spend hours figuring out where to begin. The internet has infinite content — what it lacks is a clear, structured path through it. SkillForge generates that path in seconds, so you can stop planning and start doing.

What it does

SkillForge turns "I want to learn X" into a gamified, hands-on roadmap — instantly, no research required. No account. No setup. No API key. Just type what you want to learn and go.

Type in any hobby or skill. SkillForge generates a 5–7 phase curriculum with specific tasks, real YouTube links, and Google search queries baked in — so you're not just reading a list, you're one click away from actual practice.

But the real differentiator is how it feels to use:

  • AI-Generated Curriculums: 5–7 sequential phases with specific tasks, YouTube links, Google search queries, and hands-on practice resources — everything you need to go from zero to proficient.
  • Gamified Progression: Phases unlock sequentially, mirroring how real skill-building works: fundamentals before flourishes. Complete all tasks in a phase and the app rewards you — screen shake, phase unlock, progress dot glides forward.
  • Spring-Physics Travel Dot: A buttery-smooth progress indicator built on a custom requestAnimationFrame loop with stiffness and damping — it glides, it doesn't snap. A small detail that makes the whole experience feel premium.
  • Persistent State: Your roadmap and task progress are saved to local storage. Close the tab, come back tomorrow — you're exactly where you left off.
  • Product Analytics: Integrated with Novus.ai to track how real users navigate their learning paths, where they stall, and what keeps them moving.

This isn't a resource list. It's a structured journey — specific enough to actually follow, light enough to actually finish.

How we built it

I built SkillForge using a deliberate, lightweight tech stack — because I wanted it to feel like a fast, shipped SaaS product, not a hackathon prototype.

  • Frontend: Vanilla HTML5, CSS3, and ES6 JavaScript. CSS Custom Properties for a cohesive dark-mode UI, and the Orbitron font for a high-tech, mission-control aesthetic.
  • AI Engine: Groq API (meta-llama/llama-4-scout-17b-16e-instruct) generating strictly formatted JSON roadmaps with enforced sequential timelines and hands-on practice tags.
  • Backend/Security: A lightweight Node.js/Express proxy server keeps the Groq API key hidden from the client entirely — users never need to provide or manage a key, they just use the app.
  • Deployment: Render, with continuous deployment from GitHub.
  • Product Analytics: Novus.ai for user behavior tracking, feature adoption, and funnel drop-off analysis.

Challenges we ran into

1. The "Rigid Dot" Misalignment: The core UI features a zig-zag timeline. Initially, the progress dot tracked the vertical center of the phase card. Because the card expanded and collapsed as tasks were checked off, the center point shifted, causing the dot to jump rigidly and unalign from the horizontal "dash" connector. I solved this by strictly querying the DOM dash coordinates and rewriting the tracking logic so the dot perfectly snaps to the connector, regardless of card height.

2. Choppy Animations During State Changes: Using standard CSS transition for the dot's movement resulted in janky stuttering when a user expanded a task while the dot was moving. I solved this by stripping out CSS transitions and building a custom requestAnimationFrame loop with Spring Physics. By applying stiffness and damping to the dot's velocity, it now smoothly glides to its target, dynamically adjusting if the UI shifts beneath it.

3. AI Hallucinating Roadmaps: LLMs love to output "Ongoing" for timeframes or repeat "Week 1-3" for every phase, which destroys the sequential feel. I engineered strict constraints in the prompt (e.g., "If Phase 1 is Week 1-3, Phase 2 MUST be Week 4-7") and forced JSON object responses to ensure the data structure never broke the UI parser.

4. Exposed API Keys: Initially, the Groq API key was exposed in the frontend JavaScript. I had to quickly pivot and architect a secure Express.js backend proxy to inject the key from server-side environment variables before forwarding requests.

Accomplishments that we're proud of

  • The Spring-Physics Dot: The detail that makes everything feel alive. Spring physics — not CSS transitions — means the dot dynamically adjusts mid-flight if the UI shifts beneath it. It's the kind of detail users don't notice consciously, but feel.
  • Shippedness: A full-stack app with a secure backend, persistent local storage, and live analytics — fully deployed, working on mobile and desktop, accessible to a stranger right now via a public URL. That's a real product, not a demo.
  • Prompt Engineering: Taming the LLM to consistently output 5–7 strictly sequential, practical phases took serious iteration. The roadmaps it generates are genuinely useful — not filler.

What we learned

Building SkillForge taught me that shipping a product is entirely different from writing code.

Getting the AI to return data was easy; getting it to return reliable, sequential, structured data was a product challenge. Making a div move was easy; making it glide with spring physics without janking the UI was a craft challenge.

But the biggest shift was Novus.ai. Integrating real analytics moved me from "I built this feature" to "are people actually using this feature?" Seeing where users stall — do they generate a roadmap but never check a task? Do they complete Phase 1 and drop off at Phase 2? — turns gut instinct into product decisions. That's the difference between a hackathon demo and something worth iterating on.

What's next for SkillForge

  • Community Roadmaps: Let users publish their generated roadmaps publicly — so beginners can skip the AI generation and follow proven paths built by others who've already walked that road.
  • Streaks & Accountability: Daily practice prompts, push notifications, and completion streaks to keep users moving through their path.
  • Novus-Powered Insights: Surface data like "most users take 4 days on Phase 1" and use it to suggest realistic timeline adjustments based on real completion rates — not guesses.
  • Embedded Resources: Instead of linking out to YouTube, embed the top video directly into the task card. Zero-friction practice, zero context switching.

Built With

Share this project:

Updates