• 

  Logo

Project Story

Inspiration

The journey to mastering Data Structures and Algorithms (DSA) is often lonely, intimidating, and unstructured. We noticed that while there are thousands of resources—LeetCode, YouTube tutorials, ancient textbooks—there wasn't a single, cohesive roadmap that felt like an adventure. We wanted to turn the "grind" into a game. Inspired by the structure of university curriculums but the engagement of RPGs, we created AlgoQuest: a 28-week journey to go from zero to FAANG-ready.

What it does

AlgoQuest is a comprehensive, gamified learning platform that guides users through a structured 28-week curriculum.

• Structured Roadmap: From "Prerequisites" (Big O, Memory) to advanced concepts like "Dynamic Programming" and "Graph Theory."
• Gamified Progress: Users earn XP, maintain daily streaks, and unlock achievements (like "Weekend Warrior" or "Early Bird") as they solve problems.
• Curated Resources: We don't just list topics; we provide the best video lectures (MIT, Abdul Bari) and specific practice problems for every single day.
• Smart Lecture Notes: Our newest feature allows users to view detailed, beautiful Markdown summaries of complex lectures (with LaTeX math support!) right next to the video.

How we built it

We built AlgoQuest using the modern Next.js 14 stack to ensure performance and scalability.

• Frontend: React with TypeScript for type safety. We used Tailwind CSS for a bespoke, high-contrast "black & white" aesthetic that feels premium and focused.
• Animations: Framer Motion powers the smooth page transitions, progress bars, and satisfying interaction feedback that makes the app feel "alive."
• Backend & Auth: Supabase handles our authentication (email/password) and PostgreSQL database. We implemented a robust sync engine that merges local guest progress with cloud data upon sign-up, ensuring no progress is ever lost.
• Content Rendering: We integrated react-markdown with remark-gfm to render complex lecture notes, enabling enriched content with tables, code blocks, and mathematical notation:

$$ T(n) = 2T(n/2) + O(n) \implies O(n \log n) $$

Challenges we ran into

• Data Synchronization: One of the hardest parts was handling the "guest to user" transition. We had to write complex logic to detect conflict between local storage (guest data) and Supabase (cloud data) and merge them intelligently so a user doesn't lose their 15-day streak when they finally decide to log in.
• Curriculum Density: Designing a UI that can display a massive 28-week schedule without overwhelming the user was a UX challenge. We solved this with a single-viewport CSS grid layout that is both dense and readable.

Accomplishments that we're proud of

• The "Lecture Notes" Modal: We successfully implemented a feature that parses raw Markdown from our database and renders it beautifully in real-time, complete with syntax-highlighted code blocks.
• Auth Persistence: Fixing the edge cases where sessions would drop or data wouldn't load immediately on refresh.
• The Design: We stuck to a strict design system that stands out from the generic "SAAS templates" usually seen in hackathons.

What we learned

Building AlgoQuest taught us the importance of seamless data portability. We learned how to manage complex state transitions between unauthenticated and authenticated sessions. We also deep-dived into content delivery, learning how to optimize the rendering of Markdown and LaTeX to ensure a smooth educational experience. Finally, we learned that micro-interactions (XP gains, streak counters) are powerful drivers for user retention in educational software.

What's next for AlgoQuest

• AI Tutor: Integrating an LLM to provide hints for LeetCode problems without giving away the answer.
• Multiplayer Battles: Real-time coding races against friends.
• Employer Integration: Allowing users to export their "Verified 28-Week Certificate" directly to LinkedIn.

Built With

• css
• framer
• motion
• next.js
• supabase
• tailwind
• typescript
• vercel