LearnX

💡 Inspiration

Navigating the vast sea of online tutorials can be overwhelming. As computer science students constantly trying to keep up with new frameworks and technologies, we realized that the hardest part of learning isn't finding content—it's structuring it. We wanted to build a platform that eliminates the "tutorial hell" by instantly generating a structured, time-bound learning path. More importantly, we wanted it to be completely frictionless—no tedious sign-ups, just instant learning and rewarding outcomes.

⚙️ What it does

SkillX is a frictionless, AI-driven EdTech platform.

• Dynamic AI Roadmaps: Users simply enter what they want to learn (e.g., "Full-Stack Next.js in 3 months"). Our AI generates a step-by-step, milestone-based checklist.
• Smart Resource Linking: Instead of just giving topic names, the AI attaches high-quality, official documentation links for every single step.
• Frictionless Tracking: Users can track their progress directly on the generated roadmap URL.
• Auto-Certification: Once a user hits 100% completion, the system captures their name and instantly generates a highly professional, downloadable PDF certificate of completion.

🛠️ How we built it

We adopted a modern, cutting-edge full-stack architecture optimized for speed and scale:

• Frontend: Built with Next.js 15 (App Router) and React 19. For the UI, we used Tailwind CSS, Shadcn UI, and Framer Motion (specifically for our premium, animated rotating prompt ticker).
• Backend: Completely serverless using Next.js Server Actions.
• Database: Neon (Serverless PostgreSQL) paired with Drizzle ORM for type-safe, blazing-fast data operations. We designed it to store dynamic roadmaps without needing complex user authentication schemas.
• AI Engine: Powered by Groq AI. We engineered strict system prompts to guarantee structured JSON outputs and built-in guardrails (gracefully handling non-educational queries without breaking the app).
• Media & Export: Client-side PDF generation using html2canvas and jspdf, alongside Cloudinary for scalable media management.

🚧 Challenges we ran into

• AI Hallucinations & Injection: We had to carefully engineer the Groq AI prompt to only answer educational queries. If a user asks a random question, the AI safely falls back to a custom JSON response guiding them back to learning, preventing our UI from crashing.
• Client-Side PDF Generation: Converting modern CSS (like Tailwind and Shadcn) into a downloadable PDF format without server-side rendering bottlenecks was tricky. We had to resolve CORS issues and exact DOM targeting using html2canvas.
• Frictionless State Management: Tracking user progress and capturing their name for the final certificate—all without traditional authentication (JWT/Sessions)—required clever database routing and state management.

🏆 Accomplishments that we're proud of

• Implementing a blazing-fast AI response time using Groq and Neon.
• Building the Animated Suggestion Ticker, which gives the platform a highly premium, ChatGPT-like feel.
• Successfully implementing the frictionless auto-certificate flow that delights users immediately upon finishing their goals.

📚 What we learned

• Mastering Drizzle ORM with Neon Postgres for rapid schema iteration during a hackathon.
• Forcing LLMs to output strict, predictable JSON structures using Next.js AI SDK integrations.
• Enhancing UI/UX with Framer Motion to make standard forms feel alive.

🚀 What's next for the project

• Community Paths: A public feed where users can see and clone popular learning paths generated by others.
• Micro-Bounties: Partnering with companies to attach small, real-world tasks to specific roadmap milestones.

Built With

• artificial-intelligence
• cloudinary
• drizzle-orm
• framer-motion
• groq
• neon
• next.js
• postgresql
• react
• shadcn-ui
• tailwind.css