A simple and dynamic React app that helps you track your daily expenses. Users can add new expenses, filter them by description or category, and remove individual items—all in real time.
- Add new expenses with description, category, amount, and date
- Filter expenses using the search bar (by description or category)
- Delete individual expense entries
- Responsive and clean UI built with React
App ├── ExpenseForm // Form to add new expenses ├── ExpenseTable // Displays list of expenses ├── SearchBar // Filters expenses
- Clone the repo:
git clone https://github.com/your-username/expense-tracker.git
Navigate into the project: cd expense-tracker
-
Navigate into the project: Navigate into the project:
-
Install dependencies: npm install
Run the App npm run dev 4. VERCEL
expense-tracker-sepia-omega-14.vercel.app
✍️ How to Use
-
Fill in the form with a description, category, amount, and date.
-
Click Add Expense to save the entry.
-
Use the search bar to filter expenses.
-
Click the Delete button next to an expense to remove it.
🧪 Testing To run tests (if included in your project):
bash Copy Edit npm test
📁 File Overview App.js: Main component managing state and layout
-
ExpenseForm.js: Form component to input new expenses
-
ExpenseTable.js: Table to display filtered expense list
-
SearchBar.js: Input to search/filter expenses
-
App.css: Styling for the app
📄 License This project is open-source and available under the MIT License.
🙌 Acknowledgments Inspired by personal finance tools and simple UX patterns for ease of use.