Nombre de proyecto : Splitty
- Recordatorios: "Faltan 2 días para pagar el alquiler".
The application allows groups of people (friends, roommates, travelers) to track shared expenses. The system automatically calculates "who owes whom" and how much, always seeking the "minimum payment path" to settle debts efficiently.
Frontend (React/Angular/Vue): The user fills out a form: "Pizza Night - $60 - Paid by: You - Split among: Ana and Luis."
Backend (Node/Python/Java): Receives the data, calculates that Ana owes 20 and Luis owes 20, and updates the group's general balances.
Reminders: "Rent is due in 2 days."
Users: ID, name, email, avatar.
Groups: ID, name, description.
Expenses: ID, amount, description, paid_by (User_ID), Group_ID.
Debt_Splits: The junction table connecting who owes what for each specific expense.
The most difficult and valuable part of this project is the Debt Simplification Algorithm.
If Ana owes Beto $10, and Beto owes Carlos $10, the system should be able to say: "Ana pays Carlos $10 directly" to avoid unnecessary transactions.
Implementing this logic in your Backend demonstrates high-level complex algorithm resolution skills.
Group name
Category
Invitation link
Add members
Amount, description, "who paid"
Automatic equal split
Editable date
JPG/PNG/PDF upload
Full-size viewing
Cloud storage integration
Total balance visible
Color coding (Red/Green)
Breakdown by person
Split by percentage, exact amount, or shares
Total sum validation
Select recipient
Push notification
Real-time balance update
Cross-settlement algorithm
Toggle on/off per group
Currency selector
Exchange rate API
Automatic conversion
Chronological record
User, action, and timestamp
"Undo" option
Start → [US01] → [US02] → [US03] → [US04] → [US05] → [US06] → [US07] → [US08] → [US09] → End
Cloudinary (Recommended): The "gold standard" for student projects. It has an easy-to-use Python SDK and can handle resizing automatically.
Firebase Storage: A solid alternative if you are already using Firebase for Authentication.
ExchangeRate-API: Very stable with a generous free plan (1,500 requests/month).
Fixer.io: Professional grade, though the free plan is sometimes restricted to EUR as the base currency.
Pusher (Recommended): Perfect for final projects as it eliminates the complexity of manual WebSockets.
Brevo (Email): Great for invitation emails; the free tier allows 300 emails per day.
PayPal Sandbox: Universal for demonstrating international payment flows.
Stripe (Test Mode): Best documentation in the world. Even if restricted for live accounts in some regions, Test Mode works perfectly for a project defense.
Where to start? My advice is to divide the work immediately:
Backend: Someone should start defining the SQLAlchemy models and Auth routes (JWT).
Frontend: Someone should mockup the "Add Expense" form, which is the most complex part of the UI due to the unequal split logic.
Build web applications using React.js for the front end and python/flask for your backend API.
- Documentation can be found here: https://4geeks.com/docs/start/react-flask-template
- Here is a video on how to use this template
- Integrated with Pipenv for package managing.
- Fast deployment to Render in just a few steps here.
- Use of .env file.
- SQLAlchemy integration for database abstraction.
If you use Github Codespaces (recommended) or Gitpod this template will already come with Python, Node and the Posgres Database installed. If you are working locally make sure to install Python 3.10, Node
It is recomended to install the backend first, make sure you have Python 3.10, Pipenv and a database engine (Posgress recomended)
- Install the python packages:
$ pipenv install - Create a .env file based on the .env.example:
$ cp .env.example .env - Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure you replace the valudes with your database information:
| Engine | DATABASE_URL |
|---|---|
| SQLite | sqlite:////test.db |
| MySQL | mysql://username:password@localhost:port/example |
| Postgress | postgres://username:password@localhost:5432/example |
- Migrate the migrations:
$ pipenv run migrate(skip if you have not made changes to the models on the./src/api/models.py) - Run the migrations:
$ pipenv run upgrade - Run the application:
$ pipenv run start
Note: Codespaces users can connect to psql by typing:
psql -h localhost -U gitpod example
You are also able to undo a migration by running
$ pipenv run downgradeTo insert test users in the database execute the following command:
$ flask insert-test-users 5And you will see the following message:
Creating test users
test_user1@test.com created.
test_user2@test.com created.
test_user3@test.com created.
test_user4@test.com created.
test_user5@test.com created.
Users created successfully!
Every Github codespace environment will have its own database, so if you're working with more people eveyone will have a different database and different records inside it. This data will be lost, so don't spend too much time manually creating records for testing, instead, you can automate adding records to your database by editing commands.py file inside /src/api folder. Edit line 32 function insert_test_data to insert the data according to your model (use the function insert_test_users above as an example). Then, all you need to do is run pipenv run insert-test-data.
- Make sure you are using node version 20 and that you have already successfully installed and runned the backend.
- Install the packages:
$ npm install - Start coding! start the webpack dev server
$ npm run start
This boilerplate it's 100% read to deploy with Render.com and Heroku in a matter of minutes. Please read the official documentation about it.
This template was built as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.
You can find other templates and resources like this at the school github page.