Inspiration
Many people struggle to keep track of recurring subscriptions and recurring payments. We wanted to create a tool that makes it effortless to see exactly where your money is going, helping users make smarter financial decisions. SubClean is inspired by the need for transparency and simplicity in personal finance management.
What it does
SubClean allows users to upload or paste images of their transaction history. The app then extracts the transaction data, separates recurring subscriptions from one-time expenses, and displays it in a clear, categorised format. Users can quickly identify subscriptions without manually reviewing their statements.
How we built it
- Frontend: Built with React for a dynamic, responsive interface
- Backend: Node.js with Express to handle file uploads and future OCR processing
- OCR: Integrated Tesseract.js for text extraction from images
- Styling: CSS and modern gradients to create a clean, user-friendly design
We focused on creating a fancy but functional UI, with a gradient header and a compact, intuitive upload box.
Challenges we ran into
- Handling paste and upload simultaneously in the upload box
- Preventing runtime errors in React when files were missing or undefined
- Making the UI compact and centered while keeping it responsive
- Setting up a fullstack environment locally, ensuring backend and frontend communicate correctly
Accomplishments that we're proud of
Clear project structure separating frontend and backend for scalability Able to identify the subscriptions we are checking for
What we learned
- React hooks (
useState,useRef) and component communication with props - Handling clipboard events and file uploads in a web app
- CSS for responsive, modern UI design
- Structuring a fullstack app with separate frontend and backend environments
What's next for SubClean
-Making it work for any format of pictures, pdfs, etc. -Expand the subscriptions it can detect.
Log in or sign up for Devpost to join the conversation.