Split-It!

Split-It Logo
Website View

Inspiration

Gathering with friends weekly for meals, groceries, or drinks often involves someone picking up the tab. But calculating everyone's share with tax and tip can be more than a hassle - have you ever had to split the grocery bill with roommates? Jeez! But with Split-It, you can say goodbye to those tedious calculations. Just snap a pic of the bill, and let the app do the rest -- You Snap It, We Split It!

What It Does

Split-It is a handy web app that automatically calculates the split cost per person, whether paying individually or family-style! Simply upload a picture of your receipt, select your desired options, and split it on the spot!

Family-style: For splitting the bill evenly, per person (like a family meal!)

Individual: For splitting the bill unevenly - perfect for grocery shopping, dinner nights with friends, and even gift shopping!

How We Built It

We built Split-It using React and Node.js. We used Express.js for the backend, and a combination of Javascript, HTTML, CSS, and the beautiful Material UI for the front end. Using these technologies, we deployed a full-stack application that quickly utilizes powerful Optical Character Recognition (OCR) models to scan and analyze receipts. Our receipt scanner utilizes Matplotlib, NumPy, OpenCV, PIL, and Pytesseract, all to combine and produce an effective and accurate image-scanner that picks out total costs, tax, and each order with their prices. For our Individual split option, we leverage ChatGPT hosted in llama.cpp to prompt engineer JSON encoded responses for displaying easy-to-select order cards on the frontend.

Challenges We Ran Into

Integrating python scripts with our backend server proved to be a struggle. We learned a lot about server-side storage without using databases, and lots and lots about paths! Another difficulty was dealing with low-quality user-submitted images. Developing our python model to deal with a wide range of light conditions, orientations, and cropping proved complex - hopefully we can continue to perfect its sensitivity. Additionally, we faced difficulties with version control using Git, encountering merge conflicts and the general chaos of beginner hackathon projects.

Accomplishments That We're Proud Of

We're proud of successfully overcoming challenges as a team, particularly in communication and problem-solving. Each challenge we surpassed provided valuable learning opportunities, enhancing our teamwork skills and deepening our understanding of programming languages and libraries. Finally nailing the backend server was a great feeling, and seeing our web app slow reach, and develop past our Minimum Viable Product was thrilling.

What We Learned

We learned so much about web development, application development, and image processing models. This was a great project that challenged us while maintaining a simple vision: split the bill! Aside from technical skills, we also learned valuable lessons in teamwork, communication, and problem-solving.

What's Next For Split-It

In the future, we plan to further enhance Split-It by adding additional features and functionalities, such as improved receipt reading capabilities, enhanced user interface elements, and integration with additional payment platforms. Simplicity and usability is what we aim for, the easier, the better. We chose to use technologies that are easily scalable, and our broader application has many potential uses by many potential users!

Built With

css
express.js
html
javascript
jupyter
llama.cpp
materialui
matplotlib
node.js
numpy
openai
opencv
pil
pytesseract
python
react

Submitted to

HackDavis 2024

Created by

I mainly worked the front-end, creating the UI design using React. Connecting the server to the backend was a learning experience as well. Throughout this application, a key part of programming I took out was coding with a group of people.

wesleykieu Kieu
I worked on the all the python files. One of it using openCV extract all texts, total from the receipt image. Another python file extract all the text from the receipt and sent it a local LLM (Llama 3) to extract information format it as "name": and "price":

I wrote them and make sure they run as expected.

Ziqiang (Joe) Zhu
I mostly worked on the frontend. I learned a lot about React and how to connect the server with the backend.

Truong Nguyen
I worked on the backend and frontend, getting the server to talk to separate python scripts and working with the UI. It was the first time I worked with Node.js, express.js, and Material-UI in depth. I learned a lot about React and fast development!

Ian Yoo