https://github.com/tonmoydeb404/tailexpense
A modern, feature-rich expense tracking Progressive Web App built with React, TypeScript, and Tailwind CSS. Keep your finances organized with beautiful charts, budget management, and detailed expense categorization.
https://github.com/tonmoydeb404/tailexpense
expense-tracker finance-application indexeddb personal-finance reactjs tailexpense
Last synced: 2 months ago
JSON representation
A modern, feature-rich expense tracking Progressive Web App built with React, TypeScript, and Tailwind CSS. Keep your finances organized with beautiful charts, budget management, and detailed expense categorization.
- Host: GitHub
- URL: https://github.com/tonmoydeb404/tailexpense
- Owner: tonmoydeb404
- Created: 2024-12-21T05:37:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-19T04:04:57.000Z (about 1 year ago)
- Last Synced: 2025-06-19T05:20:07.377Z (about 1 year ago)
- Topics: expense-tracker, finance-application, indexeddb, personal-finance, reactjs, tailexpense
- Language: TypeScript
- Homepage: https://tailexpense.tonmoydeb.com
- Size: 770 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TailExpense 💸
A modern, feature-rich expense tracking Progressive Web App built with React, TypeScript, and Tailwind CSS. Keep your finances organized with beautiful charts, budget management, and detailed expense categorization.
[🚀 Live Demo](https://tailexpense.tonmoydeb.com) • [🐛 Report Bug](https://github.com/tonmoydeb404/tailexpense/issues)
## ✨ Features
- **💰 Budget Management** - Create and track multiple budgets with spending limits
- **📊 Expense Tracking** - Log expenses with detailed categorization and notes
- **📈 Visual Analytics** - Get comprehensive overviews with yearly and monthly breakdowns
- **🏷️ Smart Categorization** - Organize expenses into customizable categories
- **📱 PWA Support** - Install on any device for native app experience
- **🌙 Modern UI** - Clean, responsive interface built with Radix UI components
- **💾 Offline First** - Works without internet using IndexedDB storage
## 🚀 Tech Stack
- **Frontend**: React 19 + TypeScript
- **Styling**: Tailwind CSS 4 with custom animations
- **UI Components**: Radix UI primitives
- **Charts**: Recharts for data visualization
- **Data Storage**: IndexedDB with IDB wrapper
- **Forms**: React Hook Form with Zod validation
- **Routing**: React Router 7
- **Build Tool**: Vite
- **PWA**: Vite PWA plugin
## 📦 Installation
### Prerequisites
- Node.js 18+
- pnpm (recommended package manager)
### Setup
1. Clone the repository:
```bash
git clone https://github.com/tonmoydeb404/tailexpense.git
cd tailexpense
```
2. Install dependencies:
```bash
pnpm install
```
3. Start the development server:
```bash
pnpm dev
```
4. Open [http://localhost:5173](http://localhost:5173) in your browser
## 🛠️ Available Scripts
- `pnpm dev` - Start development server
- `pnpm build` - Build for production
- `pnpm preview` - Preview production build
- `pnpm lint` - Run ESLint
## 📱 PWA Installation
TailExpense can be installed as a Progressive Web App on any device:
1. Visit the app in your browser
2. Look for the "Install" prompt or "Add to Home Screen" option
3. Follow the installation steps
4. Launch from your device's home screen for a native app experience
## 🎯 Usage
### Creating Budgets
Set up monthly or custom period budgets to track your spending limits across different categories.
### Tracking Expenses
- Add expenses with amount, category, date, and optional notes
- Choose from predefined categories or create custom ones
- Attach receipts or additional details
### Viewing Analytics
- Dashboard provides quick overview of current spending
- Monthly view shows detailed breakdowns by category
- Yearly view displays spending trends and patterns
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
## 👨💻 Developer
**Tonmoy Deb**
- Website: [tonmoydeb.com](https://tonmoydeb.com)
- GitHub: [@tonmoydeb404](https://github.com/tonmoydeb404)
## 🙏 Acknowledgments
- Built with modern React ecosystem
- UI components powered by Radix UI
- Icons by Lucide React
- Charts powered by Recharts
---
⭐ If you find TailExpense helpful, please consider giving it a star on GitHub!