I live with two of my roommates, we split all of our common bills which includes but are not limited to Electricity bill, Wifi bill, and Grocery bills. Using a traditional pen and paper is not the best approach in 2022, right? We thought so as well.

So we use an app called SplitWise to manage and split our bills. It doesn’t have a web platform, as far as I know, therefore I thought it would be great to build an open-source website.

🔗 Useful links

Not interested in reading the entire article? Explore the website or check out the code with the links given below.

Note before using the website

You can use the demo emails given at the end of the article if you don't want to log in. Also if you are the first user after the backend server is asleep, it will take couple of seconds to respond until it is fully awake. Sorry for that as it is deployed on the free version.

• Live Website
• Github Repo: Frontend / Backend

💥 Features

Here is the list of the core feature:

• 👥 Create Groups
• 👬 Invite a friend to the group with an email
• 📈 Visualize your expenses
• 🧾 Add Expenses to the group split equally among the members.

Many features need to be built, but I cannot do it alone. So contributions are welcomed. Just follow the guide provided in the Github repo’s ReadMe.

🎥 Walkthrough

Don’t want to spend too much time exploring the website, check out the screen recording without my beautiful voiceover.

👨‍💻 Technologies Used

Here is the list of all the tech and programming languages I used for this project.

Frontend

• React
• Tailwind CSS
• TypeScript

Backend

• NodeJs
• Express
• Typescript
• MongoDB (Deployed on Linode)

The Linode product I have used to build this project is their Single Node MongoDB database. The reason behind this is that it is really easy to set up (only took me around 10 min).

For deployment, I have used Vercel for the front end and Heroku for the backend.

Let's look into the DB collections and how the frontend and backend repositories are structured.

DB collections overview

Frontend Repo structure

Backend Repo structure

Ending Note

In the end, I would say that I had fun working on this project. I will try to add more features in the future, so again any contributions are most welcomed.

Demo Login Info

There are three demo users you can use.

• Email: demo1@splitbill.com / Password: demo123
• Email: demo2@splitbill.com / Password: demo123
• Email: demo3@splitbill.com / Password: demo123

Please keep the data clean if possible and don't write any inappropriate things (requesting due to past experience)

Thank you Linode and Hashnode once again.

Edit: 🤯 🎉 Already got a contribution.

Thanks to Sajith K for the first contribution.