League of Studies

Inspiration

We love procrastinating on League of Legends an online videogame, but what if we invested our time into better use? Let us present you with League of Studies

What it does

LeagueOfStudies transforms studying into a social, competitive experience. Students upload notes or describe what they're learning, and AI instantly generates personalized study questions.

They can join game modes, compete for XP, track their stats, and climb a live leaderboard — making academic learning fun, motivating, and community-driven.

How we built it

--> Next.js 14 frontend for fast, responsive user experience.

--> Tailwind CSS for a sleek, clean UI.

--> Supabase as our backend database (authentication, user profiles, game stats).

--> Google Gemini API for dynamic AI question generation from user-uploaded material.

--> Platform to allow you uploading your material

--> Real-time leaderboard sorting with badges for top players (gold, silver, bronze).

Challenges we ran into

✦ Handling large AI responses and properly structuring the output (nested JSON).

✦ Setting up secure API key usage while maintaining fast API response times.

✦ Dynamic fetching of user stats and leaderboard data without server crashes.

✦ Managing real-time database updates while keeping the app reactive.

✦ Implementing good game logic to allow multiplayer lobbies

Accomplishments that we're proud of

➢ Fully functional leaderboard with live XP, levels, and ranking badges.

➢ Clean, mobile-responsive design and smooth user experience.

➢ Building a fully working AI-assisted learning platform in a short amount of time!

What we learned

How to properly interact with AI APIs like Google Gemini inside Next.js.

✤ Deeper understanding of real-time database queries with Supabase.

✤ Client-side file parsing and managing memory with uploaded content.

✤ Importance of clean data validation and structured API responses.

✤ Better UX/UI design principles for educational gamified apps.

What's next for League of Studies

Create custom study sets and share them with friends.

➢ Build achievements and badges beyond just the leaderboard (e.g., "7-day streak!").

➢ Support LaTeX/math questions for STEM-heavy material.

➢ Add mobile app support and real-time notifications for challenges.

Built With

• auth0
• css
• geminiapi
• html
• next.js
• supabase
• tailwindcss
• typescript