A modern group expense tracking and bill splitting application built with React, TypeScript, and Tailwind CSS.
TripSplit helps groups manage shared expenses during trips, events, or everyday situations. Users can create trips, add members, track expenses, and settle up with optimized payment suggestions.
- Create and manage group trips
- Add/remove members from trips
- Edit trip details (name, description)
- Delete trips (creator only)
- Add expenses with description, amount, and category
- Select who paid and who benefits from each expense
- Edit and delete expenses
- View expense history per trip
- Real-time balance calculation per member
- Optimized settlement suggestions (minimize number of transactions)
- View who owes whom and how much
- Settle Up dialog with clear payment instructions
- Responsive design for mobile and desktop
- Dashboard with expense overview and recent activity
- Member avatars and intuitive UI
- Custom confirmation dialogs
- Frontend: React 19, TypeScript, Vite
- Styling: Tailwind CSS, shadcn/ui components
- State Management: React Query (TanStack Query)
- HTTP Client: Axios
- Authentication: JWT tokens
- Backend: Node.js, Express, MongoDB
- Node.js 18+
- npm or yarn
- Backend server running (see backend repository)
- Clone the repository
git clone https://github.com/TracyHT/tripsplit-frontend.git
cd tripsplit-frontend- Install dependencies
npm install- Set up environment variables
cp .env.example .envEdit .env and set your backend API URL:
VITE_API_URL=http://localhost:8000/api
- Start the development server
npm run devsrc/
├── components/ # Reusable UI components
│ ├── trips/ # Trip-related components
│ │ ├── AddExpenseDialog.tsx
│ │ ├── EditExpenseDialog.tsx
│ │ ├── ExpenseList.tsx
│ │ ├── MemberList.tsx
│ │ ├── SettleUpDialog.tsx
│ │ └── ...
│ └── ui/ # Base UI components (shadcn/ui)
├── contexts/ # React contexts (Auth)
├── hooks/ # Custom hooks (useApi)
├── lib/
│ └── api/ # API client and endpoints
├── pages/ # Page components
│ ├── Dashboard.tsx
│ ├── TripDetails.tsx
│ ├── Trips.tsx
│ └── ...
├── types/ # TypeScript type definitions
└── App.tsx # Main app component
| Route | Description |
|---|---|
/ |
Landing page |
/login |
User login |
/signup |
User registration |
/dashboard |
User dashboard with stats and recent activity |
/trips |
List of all user trips |
/trips/:id |
Trip details with members, expenses, and settle up |
All API calls are managed through React Query hooks in src/hooks/useApi.ts:
// Examples
const { data: trips } = useGroups();
const { data: balances } = useBalances(groupId);
const createExpense = useCreateExpense();
const settleUp = useSettleUp();npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint- Fork the repository
- Create a feature branch (
git checkout -b feature/new-feature) - Commit your changes (
git commit -m 'Add new feature') - Push to the branch (
git push origin feature/new-feature) - Open a Pull Request
This project is licensed under the MIT License.