MYSTIC OS

Inspiration Let's face it: staring at dry technical documentation and textbook PDFs is a massive grind. While tackling brutal 300-level computer science assignments like Operating Systems and Applied Cryptography, we realized traditional EdTech is failing us. It’s passive, unengaging, and frankly, boring. We wanted to build a tool that we would actually want to use to study for our own university exams.

Inspired by the visual aesthetics of Transistor and the addictive gameplay loops of classic 16-bit JRPGs, we asked ourselves: What if we intercepted the standard study loop and tricked the brain into learning? MYSTIC OS was born—a platform that turns boring coursework into an epic, retro-cyberpunk video game.

What it does MYSTIC OS is a gamified Learning Management System disguised as a retro-hacker operating system. Users upload their actual study materials (like a syllabus or a cryptography PDF), and our engine translates that text into a playable 2D game world.

Instead of taking a standard multiple-choice quiz, students use their knowledge to fight dynamically generated enemies. For example, answering a question about Symmetric Encryption correctly triggers a physical attack against the "Brute-Force Behemoth," complete with floating damage numbers, screen shakes, and EXP gains. You aren't taking a test; you are clearing a dungeon.

How we built it We built the application primarily using React and Tailwind CSS.

The Architecture: We utilized React State to manage a complex, multi-view game loop. The app tracks totalEXP, currentLevel, and inventory across distinct views (Lobby, World Map, Codex, Combat Arena).

The Visuals: We completely overrode standard UI libraries to build a custom global design system. We used deep navy (bg-slate-950), monospace typography, sharp corners, and neon-gold/cyan accents to create a true hacker terminal vibe.

The Animations: To make the combat feel punchy and tactile without a massive game engine, we heavily leveraged CSS clip-path angles, transition-transform lunges, and dynamic keyframe animations to simulate weapon strikes and taking damage.

Challenges we ran into Our biggest hurdle was the initial combat arena engine. We originally attempted to build a fully interactive 3D isometric environment using WebGL and Three.js. However, integrating complex 3D math and lighting models inside a cloud-based development environment led to severe dependency corruption, PostCSS crashes, and continuous server failures during the hackathon.

With the clock ticking, we had to make a hard pivot. We abandoned the broken 3D engine and refocused entirely on a high-end 2D JRPG Visual Novel style.

Accomplishments that we're proud of We are incredibly proud of our ability to pivot under intense pressure without sacrificing the core vision of the app. By leaning entirely into advanced React/CSS animations instead of relying on a heavy 3D library, we achieved a much faster, 100% stable, and honestly more visually striking combat experience. It feels like a real game, built entirely with standard web technologies.

What we learned Scope Management: Knowing when to abandon a failing technical approach and pivot to a stable alternative is the most valuable skill in a hackathon. A highly polished 2D UI will always beat a broken 3D prototype.

State Management: Building a game loop in React forced us to deeply optimize how we handle complex, cascading state updates (like triggering an animation, calculating damage, and updating an HP bar sequentially) without causing infinite re-renders.

What's next for MYSTIC OS We plan to hook up a live Supabase backend to allow for persistent user profiles across devices. We also want to introduce multiplayer leaderboards and a shared "Alms-House" shop where students can trade the "Knowledge Points" they earn in battle for digital study aids, cheat sheets, and new character classes.

Built With

• css3
• html5
• javascript
• medo
• react
• shadcn-ui
• tailwindcss
• vite