This is a submission for Weekend Challenge: Passion Edition
What I Built
This weekend, I built a gamified, AI-driven learning platform that treats mastering software engineering like clearing an S-Rank dungeon.
When i watched the Anime Solo leveling i was inspired by the thing in the Anime called "System". basically, you act as a "Player" receiving instructions from the "System." You choose a career path (e.g., Full Stack Web Developer, Rust Systems Engineer), and the AI generates a dynamic curriculum. The System acts as your Quest Master, giving you hands-on coding tasks. You submit your code, the AI grades it, and if you pass, you level up your engineering stats. If you fail, you trigger a brutal Penalty Zone task to force your growth.
Simple... Isn't it ? It took a good amount of time to configure the supabase and the Google AI and make it really usable + deploy it just over the weekend
Demo
🎮 Live Demo:
Here is the Demo, if you are evaluator or just want to see how the application works here is the video
Because the app requires Google OAuth to register your "Player Profile," here is a look at what happens inside the System once you awaken:
Status of the Player
Code
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more…
How I Built It
I tried to keep the architecture simple and as it is a prototype application, i use the NextJS with the Supabase for the authentication with Google OAuth Setup.
- Frontend & Framework: Next.js 16 (App Router) paired with React 19. The UI relies on TailwindCSS v4 to build a highly customized, immersive "System" skin featuring dark modes, monospace formatting, pulsing neon accents, and responsive layout structures.
- Database & Auth: Supabase PostgreSQL houses the entire player state. It tracks persistent user profiles, historical quest completion records, active roadmaps, and independent skill trees (Frontend, Backend, Low-level, System Programming, DevOps).
-
AI Integration: I integrated the
@google/genaiSDK using thegemini-3.1-flash-litemodel to act as the core game engine.
Interesting Technical Decisions:
Instead of hardcoding the learning paths, I used Gemini to dynamically generate the roadmaps based on user input, outputting strict JSON schemas so the frontend could map the data without parsing errors.
When a player submits code, it is sent via a system prompt to the Gemini API alongside the strict rules of the quest. The model acts as an isolated sandbox evaluator, returning a Pass/Fail boolean, a score out of 100, and actionable feedback directly into the UI.
Prize Categories
I am submitting this project for Best Use of Google AI.
The entire "Quest Master" and "Automated Code Evaluator" features are powered entirely by the Google Gemini API (gemini-3.1-flash-lite). The AI not only generates the curriculum but dynamically scores the player's code to determine if they earn EXP or trigger a Penalty task.
This was all about the Submission , below this line, the rest of the post starts that contains the user journey and other things like technical details of the project.That makes a post instead of jsut a submission...
💡 Inspiration: The Passion Behind the Project
Stop the Weakness.....
This weekend, I wanted to capture the ultimate feeling of obsession, progression, and self-improvement by bringing the mechanics of the iconic anime Solo Leveling into the real world.
In the story, the protagonist receives access to a mysterious System that grants:
- Daily quests
- Immediate stat upgrades
- Brutal penalty zones
- Continuous progression
allowing him to evolve from the Weakest Hunter of All Mankind into humanity's strongest.
This application follows the same idea and uses AI to give the paths for the developers to select from and practical quests, although it is just an AI and don't put your carrer on the line. But, when i saw the system in the Anime i thought it would be great for the most of us lazy engineers.
It bridges the gap between raw passion for building software and the structured discipline required to become a stronger software engineer.
🎮 The Player(User) Journey
Image Generated by ChatGPT given the user flow diagram using lucidchart
🛠️ Technical Deep Dive & Architecture
The application is built on a modern web stack designed to feel responsive, immersive, and game-like.
Frontend
- Next.js 16 (App Router)
- React 19
- TailwindCSS v4
The interface recreates the aesthetic of the Solo Leveling System with:
- Terminal-inspired UI
- Dark theme
- Neon blue accents
- Responsive layouts
- Animated status panels
Database & Authentication
Powered by Supabase.
The database stores:
- Player Profiles
- Active Roadmaps
- Quest History
- EXP
- Levels
- Individual Skill Trees
- Achievement Progress
Authentication is handled through Google OAuth.
State Management
Players can freely multiclass.
Switching learning paths instantly loads independent:
- Stats
- EXP
- Roadmaps
- Progress
without affecting other classes.
🤖 Best Use of Google AI
The heart of the application is the @google/genai SDK using:
gemini-3.1-flash-lite is used for the generation of the tasks and the evaluation of the code,
without the safe mode,
without any high load,
because i cann't afford.
HeHe ( Internal Rapper Sleeps ) 🤘🎤🎶🔥
Here are the following detials about the AI and what does it do :
1. Dynamic Curriculum Engine
Instead of hardcoding learning paths, Gemini creates personalized progression trees based on:
- User goals
- Current experience
- Desired specialization
Every roadmap is unique (Hopefully, you cann't Trust AI. can you).
Lazy me
2. Intelligent Code Evaluation
Submitted code is evaluated using Gemini with strict system prompts.
Example response:
{
"pass": true,
"score": 88,
"feedback": "Clean implementation of the sorting algorithm. However, you can optimize the spatial complexity by avoiding the slice allocation on line 14.",
"statAllocated": "Low-level Programming",
"expAwarded": 25
}
Players immediately receive:
- Pass / Fail
- Numerical score
- Personalized feedback
- EXP rewards
- Skill allocation
without requiring a human reviewer.
🔮 Future Roadmap
Currently, it is a good idea i would say but we can further increase it by adding communnities and Collaborative Events.
👥 The Shadow Army (Collaborative Raids)
Multi-player boss battles where developers collaborate to:
- Build open-source projects
- Complete architectural challenges
- Defeat timed raid bosses
Teamwork becomes progression.
⚡ Instant Dungeon ( Similar to CodinGames)
A dedicated arena for:
- Timed coding challenges
- Code golf
- Algorithm battles
- Rare rewards
- Exclusive profile titles
Designed for quick daily practice sessions.
🎯 Vision
Learning software engineering shouldn't feel like completing another checklist.
It should feel like stepping into a dungeon, accepting increasingly difficult quests, overcoming failures, and watching your character and your real-world skills—grow stronger every single day.
The System has awakened.
Will you answer the call?
Top comments (2)
Good luck — go win that big prize 🏆
Thank you, Fingers Crossed...🤞