A collaborative expense tracking web application to manage personal and shared expenses. Built to demonstrate AI-assisted rapid web development.
- Track individual and shared expenses
- Manage contributions to shared pool
- View spending reports and budget responsibilities
- Split costs between members
- Google Maps integration for expense location tracking
- Receipt and meal photo uploads
- Google Sign-in with OAuth and MFA
| Technology | Version | Description |
|---|---|---|
 |
6.3.5 | Vite Fast build tool with HMR for rapid development |
 |
^18.3.1 | React with TypeScript for building interactive UIs |
 |
4.1.3 | Tailwind Utility-first CSS framework for rapid UI styling |
 |
* / 3.4.0 | Tailwind Merge utility for intelligently merging Tailwind CSS classes resolving conflicts |
Note
Tailwind v4.1.3 is not imported in package.json but is added directly in index.css.
- shadcn/ui-inspired component library with 40+ components
- Includes forms, layouts, navigation, data display, and feedback components
- TypeScript, ESLint, Vite HMR
src/
├── main.tsx, App.tsx, index.css # Entry point & root
├── components/
│ ├── Dashboard.tsx # Main view
│ ├── AddExpense.tsx # Expense form
│ ├── AddContribution.tsx # Contribution form
│ ├── BudgetResponsibilities.tsx # Budget tracking
│ ├── Members.tsx, Reports.tsx # Member & analytics views
│ ├── ui/ # 40+ reusable components
│ └── figma/ # Figma utilities
├── styles/globals.css
└── guidelines/Guidelines.md
Node.js (v14+) and npm
git clone https://github.com/shaizCodes/finance-tracker.git
cd finance-tracker
npm i
npm run devApp runs at http://localhost:3000
Tip
Configure port in vite.config.ts:
server: { port: 3000, open: true }- ChatGPT for system prompts for the initial design
- Figma for initial design and React code