Bhuwan Garbuja
Plutus is a mobile web app to track all the expenses between your friends to provide a simple view and summary of the amount that is lent or owned, inspired from the app 'Splitwise'. The idea of the name "Plutus" is a reference to the mythological greek god of wealth.
This project was done in 3 people group with Vikram and Chawit, with the aim to build a complete website with the frontend along with our own backend API and database.
We chose to build a bill splitting app, inspired by Splitwise, which records and shows bill splitting between friends. It is designed to be mobile first, so if viewing on desktop please try to narrow the width to about 380px.
The project is currently deployed at https://plutus-cbv.herokuapp.com/.
1 week and 3 people
- React
- SCSS
- Node.js
- Python
- Django
- PostgreSQL
- Webpack
- Pusher's Channel - Managed websocket connections and allows for real-time notifications
After you sign up and then sign in, you can start creating your expense and split your bills with friends.
The image above shows the create expense form. You can specify who paid the bill, and what type of split do you want. For splits, there are unequal, equal, and percentage based splitting.
The image above shows the home page after you signed in, assuming you had made some expenses before. This page shows your total balance between your friends a the top. And below it shows if you owe your friends or they owe you. Clicking on your friend will lead to a detailed page showing all the bills between you and your friend.
The image above shows the detailed bill listings between you and your friends. The greyed out listing represents expense that was deleted, it is not included in calculating the total owed amount, but can be recovered at any time. You can also click on the expense itself to see all friends involved in that specific expense.
The image above shows an expense show page. With an equal splitting between 3 people, where Rakesh paid £18 in total, but owes £6 to the group, and the other 2 each owes £6 to the group.
You can also add comments to the expense
There is also a real-time notification system. If someone add or settle an expense, you will be notified in this page.
We wanted to build a project that has real world usage, while we wanted to do something original, we went with Splitwise as the inspiration. We used it frequently and so were familiar with it, we were curious on how it works and so it was an obvious choice for us.
We all had a hand in all parts, frontend, backend, and styling. My major contributions however was leading, designing and developing the backend on Python/Django and hooking up the push notications as activities and rendering on real-time on frontend like notifications.
- The biggest challenge was to model the data for expenses and splits which affects the "owe amount" calculations and also the fact that users could delete and undelete any previous expenses.
- The next one was activities and pushing them only to the users that are applicable. ☝️ But because user can update the expense splits with new ones or remove existing users, modeling this and testing was tricky but I got there in the end. It was very satisfying when things worked as expected.
- Designing for mobile while working on desktop has some complications. The hover effects on desktop don't work properly on mobile.
- Designing SCSS to be reuseable is complicated given then short time we had.
- And ☝️ the final CSS was a bit bloated.
- We worked together really well as a team. The feeling of being a part of a project that resulted in something better than what I could have done alone is very satisfying.
- We get to work on a project that works well and has real world implication.
- Learnt much more about React and Python/Django
- Styled-components
- I would like to learn React Native and make a proper mobile app for this
- Implement PayPal and fully
- Implement OAuth from Facebook and Google
- There are some bugs would be nice to fix them. :)