Introducing SplitBill: Split bills easily with friends
Split bill is an open-source bill-sharing website.
3 min read
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
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.
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.
- Tailwind CSS
- 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
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: email@example.com / Password: demo123
- Email: firstname.lastname@example.org / Password: demo123
- Email: email@example.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.
Did you find this article valuable?
Support Rushil Patel by becoming a sponsor. Any amount is appreciated!