Inspiration

Managing a paycheck is harder than it looks. Most apps are either too simple (just calculators) or too overwhelming (lots of graphs, locked features). We wanted to create a tool that is dynamic, intuitive, and AI-powered so anyone can track their spending, set goals, and adjust budgets easily.

What We Learned

How to build a full-stack web app by connecting a Python Flask backend with a JavaScript, HTML and CSS frontend
How to structure data between client and server using REST APIs and JSON
How to integrate Google Gemini AI to provide personalized insights and recommendations
The importance of balancing UI/UX with functionality
How We Built It

We developed the project in three layers:

Frontend (HTML, CSS, JavaScript)

Clean, responsive UI built from scratch
Users can add, edit, and delete budget categories in real time
Smooth interactions with animations for a better user experience

Backend (Flask and Python)

Handles paycheck and category inputs
Supports both fixed amounts and percent-based allocations
Saves results in a history log for tracking past paychecks

AI Integration (Gemini)

Provides smart insights based on spending patterns
Helps users set financial goals and receive tailored recommendations

Communication flow: Frontend (JS/HTML/CSS) <-> Backend (Flask) <-> Gemini AI

Challenges We Faced

Debugging Flask reload and port conflicts
Keeping the frontend clean while adding dynamic features
Syncing the team’s work across frontend, backend, and AI integration under hackathon time pressure