Binary Fallout

Restore the foundations of reality, one challenge at a time.

Comment

☢️ Inspiration

Binary Fallout draws inspiration from the game series Fallout and the manga/live-action series Alice in Borderland, blending post-apocalyptic storytelling with gamified learning. I wanted to reimagine UCF’s Foundation Exam prep as more immersive and interactive.

In the year 2099, reality has broken down, fractured by a rogue cascade of corrupted code. Time glitches, landscapes distort, and the simulation holding Earth together is falling apart. In response, an emergency protocol known as Project: 404-EARTH activates.

You play as a UCF student, armed with knowledge from the Foundation Exam. Your mission: draw from the Knightmare Deck, a set of cards infused with core Computer Science I concepts. Each card has a challenge question regarding algorithms, data structures, or bitwise operators/bit conversion and dynamic memory allocation problems. Your success in solving them is the only way to patch the code, stabilize the world, and restore the fabric of existence!

What it does

"Binary Fallout" is a gamified study tool designed to help UCF students prepare for the Foundation Exam in a post-apocalyptic simulation setting. Players draw from the Knightmare Deck, where each card represents a Computer Science I-related challenge based on its suit (Data Structures, Algorithms, Bitwise Operators, etc.) and rank (difficulty).

Each draw presents a multiple-choice question generated dynamically using Google Gemini, tailored to the topic and difficulty. Players can receive code snippets and deep analytical feedback after each question to understand the concepts and improve their skills.

The app tracks user progress and login sessions using MongoDB, offering a personalized and persistent experience. Players are immersed in a glitchy, fractured world that reflects their journey through mastering CS1, patching corrupted code to save the simulation and humanity itself

It combines education, narrative, and interactivity, making exam prep feel like a mission to rewrite reality, one bug at a time.

How we built it

Frontend We used Vite to scaffold the project for a fast, modern development experience. The front end is built with React and styled using Tailwind CSS, which allowed us to rapidly prototype UI components with a clean, responsive design system. To add polish and bring the UI to life, we integrated Framer Motion for smooth animations and transitions.

Backend The backend is powered by Python with Flask for APIs. It handles routing, question logic, and backend validation for player answers. Flask was a great fit for quickly setting up lightweight endpoints and integrating with AI services.

AI Integration To add dynamic quiz generation, we integrated Google Gemini, which generates multiple-choice questions based on each card’s suit and rank. It also provides relevant code snippets and deep analytical feedback for each answer, helping players better understand core concepts. This made the educational component more personalized and scalable, ensuring each challenge aligned with UCF Foundation Exam topics while maintaining variety and accuracy.

Database We used MongoDB as our database solution to store player progress and login sessions. Its flexible structure allowed us to easily iterate features without being constrained by a strict schema, ensuring smooth updates and scalability.

Deployment The app is hosted on DigitalOcean, where we deployed both the front-end and back-end. Additionally, we implemented HTTPS to secure data transmission and enhance the app’s security.

Challenges we ran into

  • Server Setup: The biggest challenge was configuring the server on DigitalOcean. It took several hours to correctly set up the project files and connect the server with the back-end. Nginx was particularly difficult to configure, making this an agonizingly painful and time-consuming process.

  • Feature Scope: We initially planned to include an achievement system for players, but implementing it would have required significant code refactoring. Additionally, we aimed to integrate Google Gemini for generating hints for users struggling with questions, but this also proved more complex than anticipated and had to be deprioritized due to time constraints.

Accomplishments that we're proud of

  • We designed and implemented a cohesive user interface that not only aligned with our dystopian narrative but also enhanced the gameplay experience. From animated card transitions using Framer Motion to a dark, immersive theme styled with Tailwind, the front end successfully captured the tone we envisioned.

  • We were able to set up MongoDB quickly to handle player authentication and track session progress. Its flexible document structure allowed us to make rapid changes to data models without halting development.

  • We integrated Google Gemini to dynamically generate quiz questions based on the deck's logic, including deep explanations and code snippets for answer feedback. This created a smart, adaptive educational tool aligned with the Foundation Exam topics.

  • Despite working under time constraints, we successfully collaborated on API development, tested endpoints, and wired up the front end and back end. By combining Flask, React, and Docker, we launched a fully functional MVP hosted on DigitalOcean all before midnight.

What we learned

  • Framer Motion: We got hands-on experience with Framer Motion to build smooth, engaging UI animations that elevated the user experience and made our card-based gameplay feel fluid and dynamic.

Integrating Generative AI: We learned how to leverage Google Gemini to create dynamic, context-aware quiz questions and generate detailed explanations, giving us hands-on experience with large language model APIs.

  • Working with MongoDB: We deepened our understanding of MongoDB, especially in how to structure and query data efficiently for player sessions and progress tracking.

  • Flask + MongoDB Stack: Instead of using a traditional MERN stack, we explored how to build a backend using Flask with MongoDB, learning how to manage sessions, route APIs, and handle requests effectively in Python.

  • Full Deployment Pipeline: We set up and deployed both the front end and back end on DigitalOcean using Docker containers, configuring our server, setting up HTTPS with Nginx, and troubleshooting networking issues ourselves, making a huge leap in real-world deployment experience.

What's next for Binary Fallout

Achievement System & Player Progression We want to revisit our original idea of adding an achievement system, allowing players to unlock badges and track mastery over different Computer Science concepts.

Expanded Question Types: Beyond multiple-choice, it's possible to integrate coding challenges, drag-and-drop puzzles, and real-time debugging scenarios to increase engagement and test deeper understanding.

Multiplayer: Introducing competitive or cooperative gameplay where players can challenge each other on timed questions or team up to “patch” corrupted nodes together.

Leaderboard & Statistical Analysis: Implementing a leaderboard and analytics dashboard so players can see how they stack up against others and review their progress over time.

Mobile Responsiveness: Optimizing the app for mobile devices and eventually making it a fully responsive web app for easier usage on the go.

More Gemini Integration: Deeper use of Google Gemini to provide contextual hints, deeper feedback, and adaptive question difficulty based on a player’s performance.

Thank you for viewing : )

Built With

Share this project:

Updates