A modern, responsive web application for tracking personal expenses, managing bills, splitting costs, and analyzing financial data. Built with React on the frontend and Node.js/Express on the backend, featuring Google OAuth authentication and real-time data visualization.
A modern, end-to-end look at tracking your financial journey.
- 📊 Dashboard: Overview of your financial health with key metrics and recent activity.
- 💳 Accounts Management: Track multiple accounts and their balances.
- 💰 Transaction Tracking: Record and categorize income and expenses.
- 📄 Bills Management: Keep track of recurring and one-time bills.
- 🤝 Expense Splitting: Split expenses with friends and family.
- 📈 Analytics: Visualize spending patterns with interactive charts.
- 🔐 Secure Authentication: Google OAuth integration for secure login.
- 📱 Responsive Design: Works seamlessly across desktop and mobile devices.
- 🌙 Dark Mode: Toggle between light and dark themes.
- ⚡ Real-time Updates: Live data synchronization and polling.
- 🧮 Calculator: Calculate your expenses.
- 📝 Notes: Add notes to your transactions and other things.
| Dashboard Overview | Mobile Responsive |
|---|---|
 |
 |
| Comprehensive financial overview | Native-feel mobile UI |
Interactive charts and spending analysis powered by Recharts.
Effortlessly split group expenses and track settlements with friends in real-time.
Experience Accrue live: https://accrue-expense-web.vercel.app/
Splitting expenses with friends
- React 18 - Modern UI library
- Vite - Fast build tool and dev server
- React Router - Client-side routing
- Styled Components - CSS-in-JS styling
- Framer Motion - Smooth animations
- Recharts - Data visualization
- Axios - HTTP client
- Lucide React - Beautiful icons
- Node.js - Runtime environment
- Express.js - Web framework
- MongoDB - NoSQL database
- Mongoose - ODM for MongoDB
- JWT - Authentication tokens
- Google Auth Library - OAuth integration
- CORS - Cross-origin resource sharing
- Morgan - HTTP request logger
- Node.js (v16 or higher)
- MongoDB (local or cloud instance)
- Google OAuth credentials
Open your browser
Navigate to https://accrue-expense-web.vercel.app/ to access the application...
App will be available soon
- Sign Up/Login: Use Google OAuth to create an account or sign in
- Set up Accounts: Add your bank accounts or cash accounts
- Track Transactions: Record your income and expenses
- Manage Bills: Add recurring bills and track due dates
- Split Expenses: Share costs with others and track settlements
- View Analytics: Analyze your spending patterns with charts
- Customize Settings: Adjust themes and preferences
- Add Notes: Add notes to your transactions and other things
- Add Calculator: Add calculator to calculate your expenses
accrue-expense-tracker/
├── client/ # React frontend
│ ├── public/
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── api/ # API service functions
│ │ ├── context/ # React context providers
│ │ ├── hooks/ # Custom React hooks
│ │ └── ...
│ ├── package.json
│ └── vite.config.js
├── server/ # Node.js backend
│ ├── config/ # Database configuration
│ ├── controllers/ # Route controllers
│ ├── middleware/ # Express middleware
│ ├── models/ # MongoDB models
│ ├── routes/ # API routes
│ ├── package.json
│ └── index.js
└── README.md
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
⭐ If you found this project helpful, please give it a star on GitHub!