Inspiration

The idea was born out of a common pain point: most financial apps are too complex, overloaded with spreadsheets, and require too much time for data entry. We wanted to create a tool that turns the tedious task of expense tracking into an intuitive, almost game-like experience. Our main inspiration was the concept of "physical" interaction with money—allowing you to literally feel the amount through a slider rather than just typing numbers on a keyboard.

What it does

EasyCap is a mobile-first web application for personal finance management.

Rapid Entry: Set expense amounts via a buttery-smooth custom slider and select categories with a single tap.

AI Advisor: Integrated with AI (Gemini) to analyze spending patterns and provide personalized financial coaching.

Gamification: A "streak" system (days stayed under budget), earnable titles like "Frugal Ninja," and virtual coins rewarded for financial discipline.

Cloud Sync: Instant data persistence and cross-device availability powered by Firebase.

How we built it

We utilized a modern tech stack to ensure performance and style:

Frontend: React.js for state management and Tailwind CSS for a premium "dark mode" interface.

Backend: Firebase (Firestore) for real-time data storage and anonymous authentication.

AI: Google Gemini API for generating intelligent financial insights.

UX/UI: Pointer Events API to build a custom, highly responsive slider that works flawlessly across all touch and mouse devices.

Challenges we ran into

The biggest hurdle was achieving a "native-app" feel for the slider within a mobile browser. Standard input type="range" elements are visually restrictive and often feel laggy. We implemented custom touch logic using setPointerCapture to ensure the slider thumb never "detaches" from the user's finger, even during rapid movements or on high-latency displays.

Accomplishments that we're proud of

We are proud of packing a full-featured financial manager—complete with AI, a shop system, and a cloud database—into a single, lightweight architecture. The interface feels premium, and the slider-based entry mechanic is genuinely satisfying to use, encouraging better financial habits through better UX.

What we learned

We gained deep expertise in the Pointer Events API and React performance optimization, specifically preventing unnecessary re-renders during high-frequency animation states. We also learned how to seamlessly weave AI agents into a UI so they act as helpful companions rather than intrusive pop-ups.

What's next for EasyCap

Receipt OCR: Adding the ability to snap photos of receipts for automatic amount and category recognition.

Group Budgets: Shared accounts for families or roommates to manage collective expenses.

PWA Support: Turning the app into a Progressive Web App for a true "installable" home screen experience.

Built With

Share this project:

Updates

Submission history