A modern, professional expense tracking web application built with Next.js 14, TypeScript, and Tailwind CSS.
- Add Expenses: Create new expenses with date, amount, category, and description
- View Expenses: Clean, organized list of all expenses with visual category badges
- Delete Expenses: Remove expenses with confirmation dialog
- Data Persistence: All data is stored in localStorage for persistent storage
- Category Filter: Filter expenses by category (Food, Transportation, Entertainment, Shopping, Bills, Other)
- Date Range Filter: Filter expenses by start and end date
- Search: Search expenses by description
- Sort: Sort expenses by date (ascending or descending)
- Summary Cards: View total expenses count, total amount spent, and average expense
- Category Breakdown: Visual breakdown of spending by category with percentage bars
- Recent Expenses: Quick view of the 5 most recent expenses
- Modern UI: Clean, professional design with smooth transitions
- Responsive: Works seamlessly on desktop and mobile devices
- Color-Coded Categories: Each category has a unique color scheme
- Interactive Elements: Hover effects, animations, and visual feedback
- Framework: Next.js 14 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Storage: localStorage (browser-based)
- Node.js 18+ installed
- npm or yarn package manager
- Clone the repository:
git clone <repository-url>
cd expense-tracker-ai- Install dependencies:
npm install- Run the development server:
npm run dev- Open your browser and navigate to:
http://localhost:3000
- Navigate to the "Expenses" tab
- Fill out the expense form with:
- Date: When the expense occurred
- Amount: How much was spent
- Category: Select from predefined categories
- Description: Brief description of the expense
- Click "Add Expense"
- Click the "Dashboard" tab
- View:
- Total number of expenses
- Total amount spent
- Average expense amount
- Spending breakdown by category
- Recent expenses
- Go to the "Expenses" tab
- Use the filter bar to:
- Select a specific category
- Set a date range
- Search by description
- Click "Clear All" to reset filters
- Find the expense in the list
- Click the trash icon
- Confirm deletion in the dialog
expense-tracker-ai/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Main application page
│ └── globals.css # Global styles
├── components/
│ ├── Dashboard.tsx # Dashboard with analytics
│ ├── ExpenseForm.tsx # Form to add expenses
│ ├── ExpenseItem.tsx # Individual expense display
│ ├── ExpenseList.tsx # List of expenses with filters
│ └── FilterBar.tsx # Filtering controls
├── types/
│ └── expense.ts # TypeScript type definitions
├── utils/
│ ├── storage.ts # localStorage utility functions
│ └── expense-helpers.ts # Helper functions for expenses
└── public/ # Static assets
The application supports the following expense categories:
- 🍔 Food: Restaurant meals, groceries, snacks
- 🚗 Transportation: Gas, public transit, ride-sharing
- 🎬 Entertainment: Movies, concerts, subscriptions
- 🛍️ Shopping: Clothing, electronics, general shopping
- 💳 Bills: Utilities, rent, subscriptions
- 📦 Other: Miscellaneous expenses
All expense data is stored in the browser's localStorage. This means:
- ✅ Data persists across sessions
- ✅ No server or database required
- ✅ Fast and responsive
⚠️ Data is local to your browser⚠️ Clearing browser data will delete expenses
The application works on all modern browsers that support:
- ES6+ JavaScript
- localStorage API
- CSS Grid and Flexbox
Potential features for future versions:
- Export data to CSV/PDF
- Multiple currency support
- Budget tracking and alerts
- Recurring expenses
- Charts and graphs
- Cloud sync with database
- Multi-user support
This project is open source and available under the MIT License.
For issues, questions, or contributions, please open an issue on the repository.