Spense

Leave the stress to Spense. Split and track expenses with your friends.

Comment

Inspiration

The inspiration behind Spense was that being roommates and good friends, we tend to sometimes lose track of payments. When going out to eat or hang out, because there are only a handful of us, we tend to forget how much money we owe to each other since we’re just trying to enjoy ourselves. Although, James and Elvis felt tired of not being able to keep track of who pays who so we, along with William, decided to create this app to help manage our expenses with friends.

What it does

Spense allows for a quick and convenient way to split the bill. Instead of attempting to keep tabs and trying to remember who owes what, Spense will allow you to manage transactions, by joining an existing group or creating a new one, any user who is in the group will be able to see the calculated expenses, depending on whether the payment is to be split amongst all the users or only a select few.

How we built it

We began by using Figma to model how our site would look, by having all the pages we would end up creating, aiming for a finished product became simpler. Our plan was to finish Figma designs Day 1 alongside creating and sharing the repo to use. Day 2 was primarily coding, we stuck to using ReactJS, Google Firestore and SCSS.

Challenges we ran into

The initial setup to get Firestore to work was one of the most difficult parts, nobody in the team had experience with setting it up. With the help of Google, we were able to finish setting up Firestore. Towards the 2nd day of the hackathon, we were attempting to implement firestore localstorage and managed to get to working. Another big challenge was just dealing with databases and localstorage in general as they are a big concept to grasp. Also last minute bugs really took a toll on our time for the hackathon.

Accomplishments that we're proud of

We’re proud that we managed to step outside our comfort zone and work with google firestore. Working with databases is a huge feat and I’m glad we all struggled learning because now we know how to work with the firestore library. In addition, we managed to make a good app within the short time frame that we had. Also we are very proud of the amazing UI. Our website is responsive with any type of device and still has a sleek design.

What we learned

We learned a lot about LocalStorage as well as limitations of Google Firestore functions. It was quite frustrating trying to figure out how to use the Firestore functions as they don’t provide function signatures. We also learned how to collaborate as a team in terms of managing tasks and managing a github repository.

What's next for Spense

For Spense, we feel that there could be a lot more functionality such as displaying payment options that the receiver would like to get. Also, we would ideally like to provide users with a mobile interface but that’s going to be way later down the road. We may also improve our landing page as it’s bare bones but straight to the point.

Built With

Share this project:

Updates