💰 React Expense Tracker

A modern, responsive expense tracking application built with React that helps you manage and visualize your personal finances with beautiful charts and intuitive filtering.

✨ Features

• 📊 Interactive Charts: Visualize your spending patterns with dynamic bar charts
• 🔍 Smart Filtering: Filter expenses by year with real-time updates
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• 🎨 Modern UI: Clean, dark-themed interface with smooth animations
• ⚡ Real-time Updates: Add new expenses and see changes instantly
• 📅 Date Management: Easy date selection with validation
• 💾 Local State Management: Efficient React state management with hooks

🚀 Live Demo

View Live Demo (Add your deployment link here)

📸 Screenshots

Main Dashboard

Add New Expense

Filtered View

🛠️ Tech Stack

• Frontend Framework: React 18.2.0
• Language: JavaScript (ES6+)
• Styling: CSS3 with custom components
• State Management: React Hooks (useState)
• Build Tool: Create React App
• Testing: Jest & React Testing Library

📁 Project Structure

src/
├── components/
│   ├── Charts/
│   │   ├── Chart.js          # Main chart component
│   │   └── ChartBar.js       # Individual chart bars
│   ├── Expenses/
│   │   ├── Expenses.js       # Main expenses container
│   │   ├── ExpenseItem.js    # Individual expense display
│   │   ├── ExpenseDate.js    # Date formatting component
│   │   ├── ExpenseFilter.js  # Year filtering component
│   │   ├── ExpensesList.js   # List rendering component
│   │   └── ExpensesChart.js  # Chart data processing
│   ├── NewExpense/
│   │   ├── NewExpense.js     # Add expense container
│   │   └── ExpenseForm.js    # Expense input form
│   └── UI/
│       └── Card.js           # Reusable card component
├── App.js                    # Main application component
└── index.js                  # Application entry point

🚀 Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/yourusername/react-expense-tracker.git
   cd react-expense-tracker

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3000

Available Scripts

• npm start - Runs the app in development mode
• npm test - Launches the test runner
• npm run build - Builds the app for production
• npm run eject - Ejects from Create React App (one-way operation)

💡 Usage

Adding Expenses

1. Click the "Add new Expense" button
2. Fill in the expense details:
   • Title: Description of the expense
   • Amount: Cost in dollars
   • Date: When the expense occurred
3. Click "Add Expense" to save

Filtering Expenses

• Use the year dropdown to filter expenses by specific years
• The chart and expense list update automatically
• View spending patterns across different time periods

Viewing Charts

• The bar chart shows monthly spending totals
• Hover over bars to see detailed amounts
• Chart automatically scales based on your data

🎯 Key Features Explained

Component Architecture

The application follows a modular component structure:

• Container Components: Manage state and data flow
• Presentational Components: Handle UI rendering
• Reusable Components: Card, Chart, and Form elements

State Management

• Uses React's useState hook for local state management
• Efficient state updates with functional updates
• Proper prop drilling for data flow

Responsive Design

• Mobile-first approach with CSS media queries
• Flexible layouts that adapt to different screen sizes
• Touch-friendly interface elements

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request.

How to Contribute

1. Fork the repository
2. Create a 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

Development Guidelines

• Follow the existing code style and conventions
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting

🐛 Known Issues

• Currently no persistent storage (data resets on page refresh)
• Limited to year-based filtering
• No export functionality

🔮 Roadmap

• Add local storage for data persistence
• Implement category-based filtering
• Add expense editing and deletion
• Export data to CSV/PDF
• Dark/Light theme toggle
• Multiple currency support
• Budget tracking features
• PWA capabilities

📝 License

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

🙏 Acknowledgments

• Built with Create React App
• Icons and styling inspiration from modern design systems
• Community feedback and suggestions

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the documentation for detailed guides
• Review existing discussions

---

Made with ❤️ using React