Split

Dashboard Page
Sign Up Page
Receipt Page
Details Page
Split Bill History Page
Friends Page

Inspiration

After a year or two of being active participating in university society events we realised that there would always be chaos in tracking down split payments. Especially after bills are split amongst large groups of students. The payer would always be in a state of disarray as they track down their money across Discord, Instagram or WhatsApp as students would pay through different methods such as PayID, Beem and cash.

Split's primary objective is to streamline the process of bill division and individual expense tracking while fostering a more inclusive platform that accommodates users of diverse nationalities.

What it does

Split is a web application service that enables its users to easily split bills within large groups of people and keep track of its details.

Simply scan your receipt with Split to generate a digital version of the receipt that you can further edit and add participants to. Once a participant has paid, the user is able to tick them off the group.

The dashboard of the application is able to display to the user how much they are owed and owe others. The user is also able to skim through past groups through the history page.

The main goal of Split is to save its users' time, instead of tracking down payments they are just able to enjoy the rest of their day after the event. Ultimately, avoiding awkward messages or conversations about the lunch three days ago.

How we built it

Split is built with the NextJS React framework, thus it utilises React, Tailwind and Typescript. PostgreSQL is being used for the database. The team also utilises a receipt scanner API called Verifi to convert the data from the receipt into JSON format. As for the initial design of the project, the team utilised Figma to use as a visual guide.

The team then split the tasks into UI/UX, frontend, backend and pitching the project. Each member had overlapping roles in these tasks.

Challenges we ran into

The first challenge that we ran into was how big of a scope the project should be. Each team member had different visions of how the final application would look like.

Finding and deciding on a receipt OCR scanner to utilise for the application took some time as most APIs tend to have a paywall in order to use it.

Not all members of the team were used to tailwind CSS. It was just a minor issue that was quickly resolved as they picked it up over the first day.

Setting up the project taking almost the first night of the hackathon. Getting the docker and setting up the client and server side of the repo for the project presented some challenges.

Setting up the PostgreSQL database and planning out the relationships took some time to flesh out properly.

Accomplishments that we're proud of

Being able to replicate the pages on the Figma design onto the frontend was very satisfying for the team. Also team members being able to code the endpoints for the applications within a couple hours. Finding a receipt reading API that we are able to utilise and implement on the project. Building a working full stack application within the time limit.

We are really proud of being able to overcome the challenges that we had to face in the past two days and to be able to build this project from nothing to what it is now under the time pressure.

What we learned

The team is now more exposed to the NextJS framework and PostgreSQL, and is now able to work with it more comfortably. We also learned how to utilise the Verifi receipt API. The team has also certainly learnt the benefits of sleeping and taking breaks!

What's next for Split

Improve some minor issues here and there. However, the main next step is to make the Split web app more mobile friendly and potentially a mobile application version of it so that users are able to instantly utilise it on the go!

We also would like to transform Split into a more comprehensive financial application that allows users to split bills based on the specific items a participant is involved in and integrate with popular payment platforms to streamline the payment process, allowing users to settle their shares directly in Split.