ExpenseTrace - Personal Finance Management Application

ExpenseTrace is a comprehensive personal finance management application built with React, TypeScript, and modern web technologies. It helps users track expenses, manage budgets, analyze spending patterns, and maintain financial health through intuitive interfaces and powerful analytics.

🌟 Features

💰 Expense & Income Tracking

Multi-category transactions: Organize expenses and income with customizable categories
Multiple account types: Support for bank accounts, wallets, credit cards, and cash
Payment modes: Track different payment methods (UPI, debit cards, cheque, internet banking)
Transfer tracking: Monitor money transfers between accounts
Tag system: Add custom tags to transactions for better organization

📊 Analytics & Insights

Visual analytics: Beautiful charts and graphs showing spending patterns
Category-wise breakdown: Detailed analysis of spending by categories
Account-wise analysis: Track spending and income across different accounts
Time-based analysis: Weekly, monthly, yearly, and custom date range analysis
Statistical insights: Average spending, transaction counts, and trends

🎯 Budget Management

Monthly & yearly budgets: Set and track budgets for different time periods
Category-wise limits: Set spending limits for individual categories
Budget progress tracking: Visual progress indicators and alerts
Budget analysis: Detailed breakdown of budget vs actual spending

💳 Account Management

Multiple account types: Bank accounts, digital wallets, credit cards, cash
Payment mode linking: Associate payment methods with accounts
Balance tracking: Monitor account balances and credit limits
Account summaries: Overview of available funds and outstanding amounts

📅 Debt Management

Lending & borrowing: Track money lent to others and borrowed from others
Payment records: Detailed history of debt payments and receipts
Due date tracking: Monitor payment due dates
Debt summaries: Overview of total payable and receivable amounts

⚙️ Customization & Settings

Currency support: Multiple international currencies
Number formatting: Different number display formats (millions, lakhs, compact)
Time format: 12-hour or 24-hour time display
Decimal precision: Customizable decimal places
Daily reminders: Optional daily expense tracking reminders

📱 User Experience

Responsive design: Optimized for desktop, tablet, and mobile devices
Dark/light themes: Comfortable viewing in any lighting condition
Intuitive navigation: Easy-to-use sidebar navigation with organized sections
Real-time updates: Instant data synchronization across all views
Custom date/time pickers: User-friendly date and time selection components

🛠️ Technology Stack

Frontend

React 18 - Modern React with hooks and functional components
TypeScript - Type-safe development with excellent IDE support
Tailwind CSS - Utility-first CSS framework for rapid UI development
React Router DOM - Client-side routing and navigation
React Hook Form - Performant forms with easy validation
React Query (TanStack Query) - Powerful data fetching and caching
Recharts - Beautiful and responsive charts for data visualization
Lucide React - Modern icon library with consistent design

Development Tools

Vite - Fast build tool and development server
ESLint - Code linting and quality enforcement
TypeScript ESLint - TypeScript-specific linting rules
PostCSS - CSS processing and optimization
Autoprefixer - Automatic CSS vendor prefixing

State Management & Data Flow

React Query - Server state management and caching
React Context - Global state for authentication and notifications
Custom hooks - Reusable business logic and API interactions

🚀 Getting Started

Prerequisites

Node.js 18+
npm or yarn package manager

Installation

Clone the repository

git clone https://github.com/your-username/expensetrace-reactjs.git
cd expensetrace-reactjs

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:5173 to view the application

Build for Production

npm run build

The built files will be in the dist directory, ready for deployment.

📁 Project Structure

src/
├── components/           # Reusable UI components
│   ├── Layout/          # Layout components (Sidebar, PrivateLayout)
│   ├── Toast/           # Toast notification system
│   ├── DatePicker.tsx   # Custom date picker component
│   ├── TimePicker.tsx   # Custom time picker component
│   ├── MonthYearPicker.tsx # Custom month/year picker
│   └── ...              # Other UI components
├── contexts/            # React contexts for global state
│   ├── ToastContext.tsx # Toast notifications
│   └── PasswordResetContext.tsx # Password reset flow
├── hooks/               # Custom React hooks
│   ├── useAuth.ts       # Authentication hooks
│   ├── useTransactions.ts # Transaction management
│   ├── useAccounts.ts   # Account management
│   ├── useBudgets.ts    # Budget management
│   ├── useCategories.ts # Category management
│   ├── useDebts.ts      # Debt management
│   ├── useSettings.ts   # User settings
│   └── useFormatters.ts # Formatting utilities
├── pages/               # Page components
│   ├── Dashboard.tsx    # Main dashboard
│   ├── Transactions.tsx # Transaction listing
│   ├── TransactionForm.tsx # Add/edit transactions
│   ├── Accounts.tsx     # Account management
│   ├── Budgets.tsx      # Budget overview
│   ├── Analysis.tsx     # Financial analytics
│   ├── Categories.tsx   # Category management
│   ├── Debts.tsx        # Debt management
│   ├── Settings.tsx     # User preferences
│   └── views/           # Specialized view pages
├── types/               # TypeScript type definitions
│   ├── account.ts       # Account-related types
│   ├── transaction.ts   # Transaction types
│   ├── budget.ts        # Budget types
│   ├── category.ts      # Category types
│   ├── debt.ts          # Debt types
│   ├── auth.ts          # Authentication types
│   └── settings.ts      # Settings types
├── utils/               # Utility functions
│   ├── formatters.ts    # Number, currency, date formatting
│   └── passwordValidation.ts # Password strength validation
├── lib/                 # External library configurations
│   └── axios.ts         # API client configuration
└── App.tsx              # Main application component

🔧 Key Components

Custom Pickers

DatePicker: Interactive calendar-based date selection
TimePicker: Time selection with 12/24-hour format support based on user settings
MonthYearPicker: Specialized picker for budget period selection

Data Management

React Query: Efficient data fetching, caching, and synchronization
Custom Hooks: Encapsulated business logic for different domains
Type Safety: Comprehensive TypeScript types for all data structures

UI/UX Features

Responsive Design: Mobile-first approach with breakpoint-specific layouts
Loading States: Skeleton screens and loading indicators
Error Handling: User-friendly error messages and recovery options
Toast Notifications: Non-intrusive success/error notifications

🎨 Design System

Color Palette

Primary: Indigo (branding and primary actions)
Success: Green (positive actions, income)
Warning: Yellow (alerts and warnings)
Error: Red (errors, expenses)
Neutral: Gray scale (text, backgrounds, borders)

Typography

Headings: Bold, clear hierarchy
Body Text: Readable font sizes with proper line spacing
Interactive Elements: Consistent button and link styling

Spacing & Layout

8px Grid System: Consistent spacing throughout the application
Card-based Layout: Clean separation of content areas
Responsive Breakpoints: Mobile, tablet, and desktop optimized

🔐 Security Features

Authentication

Secure Login/Signup: Email and password authentication
Password Strength Validation: Real-time password strength checking
Password Reset Flow: Secure OTP-based password recovery

Data Protection

Input Validation: Client-side and server-side validation
Error Boundaries: Graceful error handling and recovery
Secure API Communication: HTTPS and proper error handling

📱 Responsive Design

The application is fully responsive and optimized for:

Mobile Devices (320px - 768px)
Tablets (768px - 1024px)
Desktop (1024px+)

Key responsive features:

Collapsible sidebar navigation
Adaptive grid layouts
Touch-friendly interactive elements
Optimized typography scaling

🌐 Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

📊 Performance Optimizations

Code Splitting: Lazy loading of route components
Bundle Optimization: Vendor chunk separation
Image Optimization: Efficient image loading and caching
Query Optimization: Smart data fetching and caching strategies

🧪 Development

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run lint - Run ESLint

Code Quality

ESLint Configuration: Comprehensive linting rules
TypeScript: Strict type checking
Prettier Integration: Consistent code formatting
Git Hooks: Pre-commit quality checks

🚀 Deployment

The application can be deployed to various platforms:

Netlify (Recommended)

Connect your GitHub repository
Set build command: npm run build
Set publish directory: dist
Deploy automatically on push

Vercel

Import project from GitHub
Vercel auto-detects Vite configuration
Deploy with zero configuration

Traditional Hosting

Run npm run build
Upload dist folder contents to your web server
Configure server for SPA routing

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Write meaningful commit messages
Add proper error handling
Ensure responsive design
Test on multiple devices

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Ezhil Selvan P

LinkedIn: Ezhil Selvan P
Email: support@expensetrace.com

🙏 Acknowledgments

React team for the amazing framework
Tailwind CSS for the utility-first CSS framework
Lucide for the beautiful icon library
All open-source contributors who made this project possible

📞 Support

For support, email support@expensetrace.com or create an issue in the GitHub repository.

ExpenseTrace - Take control of your finances with smart expense tracking and budgeting tools.

Name		Name	Last commit message	Last commit date
Latest commit History 114 Commits
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

License

ezhilselvan1109/expensetrace-reactjs

Folders and files

Latest commit

History

Repository files navigation