Splitly is a web app for splitting bills with friends! 🥰
- App:
- Data persistence with
localStorage. - User-friendly UX for managing shared bills.
- Data persistence with
- Bill Management:
- Create and manage shared bills.
- View, select, and divide expenses among friends.
- Automatic calculation of each user's share based on the total bill amount.
- Transaction Handling:
- Manage users, bank accounts, and transactions.
- Error Handling:
- Input validation for user contributions.
- Display error messages for invalid inputs or failed payment requests.
- Create a
.envfile in both the frontend and backend directories using the.env.examplefile as a template.
- Navigate to the frontend directory and run:
pnpm installpnpm dev(App will be available at http://localhost:5173)
The backend requires Docker and Docker Compose to run the database.
- Navigate to the backend directory and:
- For first-time setup:
make initto install dependencies and load the database fixtures.make startto start the container, generate the schema, migrate & seed the database, and start the server.- Use
make db-stopto stop the container. - Refer to the Makefile for additional commands.
- For subsequent runs:
pnpm devto start the server.pnpm db:pushto push schema updates to the database.
- For first-time setup:
The app uses PostgresDB due to the relational nature of the entities involved, and Drizzle ORM for database interactions and migrations.
- Stores user data:
userId,email,fullName. - Relates to accounts, transactions, bill participants, friends, and bill splits.
- Stores bank account details:
accountId,accountNumber,userId,balance,accountType. - Relates to users (account owner) and transactions.
- Stores transaction data:
transactionId,accountId,amount,vendor,category,transactionDate. - Linked to accounts and bill splits.
- Tracks bill splits:
splitId,transactionId,payerId,totalAmount,splitDate. - Relates to transactions, payer (user), and bill participants.
- Represents participants in a split bill:
billParticipantId,splitId,userId,amountOwed,paymentStatus. - Linked to bill splits and users (participants).
paymentStatusEnum: Manages bill payment statuses (e.g.,pending,paid,rejected).categoryEnum: Categorizes transactions (e.g.,dining,groceries).accountTypeEnum: Categorizes accounts (e.g.,checking,savings).
- Helper function to generate
createdAtandupdatedAttimestamps for record management (in UTC).
The frontend is built with Vue 3 and Vite using the Composition API.
- Pinia for global state and async data management.
- Vue Router for navigation.
- App state is persisted to
localStorage. ofetchfor API calls.
To reduce scope and complexity:
- Most backend data is generated for faster development.
- No authentication or authorization (but includes a helpful user management button).
- Bill split functionality currently only supports dividing the total amount.
- No payment request/management features - bill payments are assumed to be paid immediately.
- For users with multiple accounts, deductions from friends are currently processed by selecting the first account found in the database. This could be improved by allowing friends to choose which account they’d like the bill subtracted from.
- No user account management/authentication.
- Add tests!
- Implement user authentication and authorization.
- Enhance error handling and user feedback.
- Improve UI for better user experience.
- Enable users to create and manage their own accounts.
- Implement payment request/management, custom split options.
- Bill reminders/notification system.
- Enhance database performance and scalability (e.g., prepared statements, query optimization, indexing).
- Use caching to reduce database load.
- Add shared tabs for groups
- Frontend:
- Vue for the UI.
- Tailwind CSS for styling.
- Pinia for state management and async actions.
- Vue Router for routing.
- Backend:
- Node.js for server-side logic.
- Express.js for the API.
- Drizzle ORM for database operations.
- PostgreSQL for the databas 6073 e.
- Docker for containerization.
- Pino for logging.
Thanks for checking out Splitly! The project took roughly 18 hours so far, and I really enjoyed working on it!
That said, it’s still a work in progress and far from finished, but it’s ready to ship! 🎉
Please let me know if you have any feedback or suggestions for improvement. If you encounter any issues or need more information, feel free to email me.