Finance Leveler

Main Screen

💡 Inspiration

Saving money often feels like a chore — something we know we should do but rarely feel motivated to.
We wanted to make personal finance fun, rewarding, and gamified — like leveling up in your favorite RPG.
That idea inspired Finance Leveler, an app that transforms daily savings decisions into interactive “quests” where users can earn XP, track progress, and level up their financial skills.

💰 What it does

Finance Leveler challenges users with daily money-saving quests — such as skipping coffee runs, cooking at home, or canceling unused subscriptions.
Each completed challenge gives the user XP and virtual rewards while building better saving habits over time.

Users can:

Generate new challenges daily
Complete or skip tasks
Earn XP and level up from Bronze Saver to Diamond Saver
Track total money saved, XP earned, and challenge history
Switch between light and dark mode for an engaging user experience

🛠️ How we built it

Finance Leveler was built using:

React.js — for the frontend interface and dynamic component rendering
Tailwind CSS — for responsive and aesthetic styling
Lucide React — for icons and visuals
Local state management (useState, useEffect) — to track progress, XP, and user data

We used AI tools like Claude AI and ChatGPT to brainstorm ideas, refine code, and polish UI elements.
All AI-assisted suggestions were manually customized, tested, and integrated into the project.

⚔️ Challenges we ran into

Designing a leveling system that felt balanced and motivating
Managing dynamic state updates between XP, levels, and saved totals
Ensuring the dark/light mode transition worked seamlessly
Creating engaging UI feedback for each completed quest
Debugging issues with component re-rendering when completing or skipping challenges

🏆 Accomplishments that we're proud of

Building a fully functional prototype that gamifies real-world financial behavior
Creating a clean and intuitive UI that feels fun to use
Successfully integrating progress tracking, XP leveling, and mock banking verification
Turning a simple idea into a meaningful tool that could help people save money every day

🧠 What we learned

How to apply game mechanics to improve user motivation and engagement
The power of state management in React for real-time updates
How small UI details — like animations and progress bars — can dramatically enhance user satisfaction
The importance of balancing creativity, usability, and practicality in design