About the Project: ECONQUEST
The Inspiration: Turning Homework into an Epic Quest We were inspired by a simple but pervasive problem: financial literacy is a life skill that is rarely taught effectively. For millions, managing money feels like a constant, stressful battle against abstract numbers, rising debt, and unpredictable emergencies. Traditional budgeting apps often feel like tedious "homework," failing to engage users or teach them the real-world consequences of their decisions in a safe environment.
Our goal with ECONQUEST was to transform this dry, anxious experience into an epic, tangible adventure. We asked: What if debt wasn't a number on a statement, but a monster to be slain? This led us to gamify the entire personal finance journey, creating a risk-free RPG where players can develop the muscle memory for sound financial decision-making.
How We Built It: A State-Driven Learning Engine
ECONQUEST is built as a highly performant, responsive Single-Page Application (SPA) using a focused tech stack:
Frontend & Styling: HTML5 and Tailwind CSS. Tailwind was crucial for rapidly developing the dynamic, pixel-art inspired UI and ensuring the application is responsive on both desktop and mobile browsers.
Core Logic: Vanilla JavaScript. We deliberately chose Vanilla JS to showcase a deep understanding of core programming principles and build a highly optimized, client-side experience for maximum performance.
The entire game logic revolves around a single, central gameState object. This object holds all persistent variables—from the player's level, savings, and debt to the list of active quests and enemies.
Core Loop: The runMonthlyCycle() function manages the core budgeting simulation: collecting salary, paying expenses, calculating surplus, and checking for random events.
Educational Feedback: The logMessage() function is a key piece of our architecture. It handles not only game events (combat, level-ups) but also provides categorized feedback with a dedicated 'lesson' type, ensuring every player action is immediately paired with the real-world financial principle behind the mechanic.
Key Technical Challenges & Lessons Learned
The development process presented two main challenges that led to significant learning:
- State Management without a Framework Managing a complex, inter-dependent state (savings affects debt payments, which affects XP, which unlocks quests, which unlocks achievements) in a purely Vanilla JavaScript application was a considerable challenge.
Solution: We enforced a strict pattern where all UI updates are explicitly managed by a single updateUI() function called after any change to the gameState. This ensured that the displayed values (like health bars, money, and text logs) never fell out of sync with the underlying simulation logic.
- Balancing Realism with Gamification The core difficulty was making the debt and interest mechanics accurate enough to be educational, yet abstracted enough to be fun.
Solution:
We created different "Economic Realities" (e.g., The Barista, The Teacher) with carefully calculated starting salaries, expense ratios, and debt loads. This grounds the simulation in reality. We then externalized the debt through the "Debt Monsters" (e.g., Impulse Purchase Goblin). This abstraction allows us to represent the abstract concept of paying off principal versus paying interest as a satisfying, concrete combat mechanic (fightEnemy), providing a clear psychological reward for a financially sound action.
Log in or sign up for Devpost to join the conversation.