SpendWise is a modern, feature-rich personal expense tracker built with React, TypeScript, and Vite. Track your expenses, manage budgets, set savings goals, and gain insights into your spending habits with beautiful charts and intelligent categorization.
- Real-time expense tracking with interactive charts
- Visual spending trends using Chart.js
- Category-based expense breakdown
- Monthly and yearly analytics
- Create and manage multiple budgets
- Track budget utilization with visual indicators
- Set budget limits per category
- Receive alerts when approaching limits
- Set and track multiple savings goals
- Visual progress indicators
- Goal deadline tracking
- Contribution history
- ML-powered transaction categorization
- Automatic category suggestions based on transaction descriptions
- Learn from your categorization patterns
- Manual category override when needed
- Import transactions from CSV/Excel files
- Export data to CSV, Excel, or PDF formats
- Bulk transaction management
- Data portability and backup
- Customizable expense categories
- Color-coded categories for easy identification
- Add, edit, and delete categories
- Category-based filtering and search
- Quick-add widget for fast entry
- Detailed transaction form with metadata
- Search and filter transactions
- Edit and delete capabilities
- Recurring transaction support
- Dark/Light theme toggle
- Currency selection
- Data backup and restore
- Privacy-focused: all data stored locally
- Frontend Framework: React 19
- Language: TypeScript
- Build Tool: Vite 7
- Routing: React Router DOM 7
- Database: Dexie.js (IndexedDB wrapper)
- Charts: Chart.js + react-chartjs-2
- Icons: Lucide React
- PDF Export: jsPDF
- Excel Support: xlsx
- Date Utilities: date-fns
- PWA Support: vite-plugin-pwa
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/sickn33/spendwise.git cd spendwise -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run buildThe built files will be in the dist/ directory.
npm run previewspendwise/
├── src/
│ ├── components/ # React components
│ │ ├── Dashboard.tsx
│ │ ├── TransactionForm.tsx
│ │ ├── TransactionList.tsx
│ │ ├── BudgetManager.tsx
│ │ ├── CategoryManager.tsx
│ │ ├── SavingsGoals.tsx
│ │ ├── Reports.tsx
│ │ ├── Settings.tsx
│ │ └── QuickAddWidget.tsx
│ ├── services/ # Business logic
│ │ ├── analytics.ts
│ │ ├── classifier.ts # ML categorization
│ │ └── importer.ts # Data import/export
│ ├── db/ # Database layer
│ │ └── database.ts # Dexie configuration
│ ├── types/ # TypeScript definitions
│ │ └── index.ts
│ ├── App.tsx # Main app component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── public/ # Static assets
└── package.json
- Add Your First Transaction: Click the "+" button or use the quick-add widget
- Create Categories: Go to Settings > Categories to customize your expense categories
- Set Budgets: Navigate to Budget Manager to set monthly spending limits
- Create Savings Goals: Use the Savings Goals section to track your financial targets
- View Reports: Check the Dashboard and Reports for spending insights
- Import Data: Use Settings > Import to bulk-upload transactions from CSV/Excel
SpendWise stores all data locally in your browser using IndexedDB. No data is sent to external servers, ensuring complete privacy and control over your financial information.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Built with modern web technologies and a focus on user experience and data privacy.
Made with ❤️ by the SpendWise team