Real example 1
FlatSplit: “a shared expense splitter for my flatmates that shows who owes whom”
A simple shared expense tracker for flatmates to log bills and see who owes whom.
v1 includes
- Add a new expense with description, amount, and who paid
- Automatic calculation of who owes whom the simplest amount
- List of all past expenses
- Settle up button to clear balances
Skip for now
- User accounts and login · Not needed for a single shared screen in one flat.
- Split by percentages · Equal splits cover 90% of flat needs.
- Receipt photo uploads · Typing the total amount is much faster.
- Email notifications · Flatmates can just look at the screen together.
Stack: React with Tailwind CSS · Node.js with Express · Replit built-in database · Replit deployment
1Set up project and dashboardYou will have a running React and Node app with a dashboard showing who owes whom and a form to add expenses using sample data.
Create a full-stack web app called FlatSplit using React, Express, and Replit's database to help flatmates split expenses. Build the main dashboard screen that displays a summary of who owes whom based on logged expenses, and a form to add a new expense with a description, amount, and who paid. Keep the app runnable at all times and use Tailwind CSS for a clean, modern look. - Initialize a React frontend and a Node.js Express backend in a single Replit project. - Create a responsive dashboard layout with a clear summary card area at the top. - Implement a working form to add an expense that saves to the backend database. - Display a list of recent expenses right below the form. - Populate the app with 3 sample expenses on first load so the summary calculations are immediately visible. Do not add user login, multiple flats support, or complex receipt image uploads. Done when: I can open the preview, see sample expenses, and successfully add a new expense that updates the summary.
2Implement debt simplification logicYou will have a working calculation engine that automatically simplifies debts so flatmates know the exact fewest payments to make.
Update the backend logic and frontend display in our FlatSplit app to calculate and show the simplified debts between flatmates. Instead of just listing raw totals, compute who needs to pay whom to settle up all debts with the fewest possible transactions. - Write a helper function on the backend to calculate net balances for each flatmate. - Translate net balances into a clean list of settlement instructions like 'Alice owes Bob $15'. - Display these settlement instructions prominently at the top of the dashboard. - Ensure the calculations update instantly whenever a new expense is added or deleted. - Handle edge cases gracefully when all balances are zero and everyone is settled up. Do not add currency conversion or partial payment tracking for individual expenses. Done when: Adding a new expense immediately updates the 'who owes whom' list with correct simplified payment instructions.
3Add history and settle up actionYou will have a complete v1 app with a dedicated history view and a button to clear all debts when settling up.
Finish the FlatSplit app by adding a history screen and a 'Settle Up' action to clear the slate. Make sure the app looks polished, handles empty states nicely, and is fully ready to use. - Add a navigation toggle or tab to switch between the Dashboard and the full Expense History view. - Allow users to delete individual expenses from the history list, which should update the balances. - Add a 'Settle Up' button that clears all recorded expenses and resets all balances to zero after a confirmation prompt. - Ensure empty states look friendly when there are no expenses logged yet. - Polish the spacing, buttons, and mobile responsiveness across both screens. Do not add email alerts, export to CSV, or user profile customization. Done when: I can view full history, delete an item, use the settle up button to reset balances, and test the app end-to-end without errors.