Inspiration

As an Informatics Engineering student preparing for a rigorous career in AI, I spend countless hours studying complex technical concepts, which often leads to severe learning fatigue. I realized that traditional learning roadmaps and textbooks are incredibly boring. I wanted to build something that gamifies productivity and education into an addictive, story-driven RPG experience where you level up in real life by mastering new skills.

What it does

Aetheros is an interactive medieval fantasy RPG learning platform with a dark visual novel aesthetic.

  1. Users log in securely using Google Auth and choose their character avatar (Tobin, Hugo, Saint Elric, Kael, or Reven).
  2. Users input a specific topic they want to master (e.g., Mathematics, Machine Learning).
  3. The system generates a dynamic quest timeline based on that topic.
  4. An AI "Tactical Guild Master" teaches the core concepts step-by-step through a narrative dialogue before testing the user with interactive quizzes.
  5. Answering correctly drops Gold (+20) and EXP (+50).
  6. Answering incorrectly triggers a screen shake, deducts 1 HP heart, and provides a "Try Again" button so the user doesn't get stuck.
  7. If HP reaches 0, a Game Over modal appears, requiring the user to revive.
  8. The dashboard features "The Oracle's Chamber," an analytics engine that calculates the correlation between a user's habits and their quiz success.

How we built it

We utilized the MeDo platform's full-stack generation capabilities.

  1. Instead of standard cloud storage, we forced the architecture to use a local browser IndexedDB to prioritize user privacy for state tracking (Hero_Profile, Story_Progress).
  2. We heavily customized the LLM Chat Plugin through strict prompt engineering to act as the "Tactical Guild Master," ensuring it followed a mandatory "Teach then Quiz" flow rather than just randomly generating questions.
  3. We integrated HTML5 audio to loop a medieval theme song continuously for atmosphere.

Challenges we ran into

Getting the MeDo platform to render complex Visual Novel UI components without distorting them was a massive hurdle. Initially, the platform stretched our custom parchment scroll assets and placed white text on light backgrounds, making it unreadable. We had to write aggressive CSS overrides (using background-size: 100% 100%; object-fit: contain;) and force dark charcoal text colors to ensure the UI remained compact, readable, and visually proportional. Dealing with broken image links also required migrating our assets to direct hosting platforms to ensure they rendered properly.

Accomplishments that we're proud of

We successfully forced a no-code/low-code AI builder to output a highly customized, tightly packed RPG dashboard with working complex game states. The fact that the HP system, Game Over modals, and the "Try Again" retry logic all work flawlessly without breaking the application state is a huge win.

What we learned

We learned the absolute importance of strict state management and UI constraint prompting when working with generative UI platforms. We also discovered how to effectively structure multi-turn AI interactions to act as an educational mentor rather than just a simple chatbot.

What's next for Aetheros

We plan to expand the "Oracle's Chamber" analytics to track long-term skill retention and introduce a full inventory shop where users can spend their accumulated Gold on new background environments and character classes.

Built With

  • css
  • google-auth
  • html5-audio
  • indexeddb
  • llm-chat-plugin
  • medo
Share this project:

Updates

Submission history