Expense Tracker

A straightforward React app that helps users manage their expenses efficiently. The app enables users to add, search, filter, and delete expenses. The project illustrates key React concepts such as state management, controlled components, form handling, and conditional rendering.

Live Demo

Check out the live version of the app here:
https://expensesestarckker.netlify.app/

Features

• Add expenses with details like name, amount, and category
• Filter expenses by category
• Search for specific expenses by name
• Remove expenses from the list
• Responsive design optimized for both desktop and mobile screens

Getting Started

To run this project locally, follow the steps below:

Prerequisites

Ensure you have the following installed:

• Node.js
• npm (comes bundled with Node.js)

Installation

1. Clone the repository:

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


2. Install dependencies:

```bash
npm install

3. Start the development server:

npm run dev

Project Structure

src/
├── components/
│   ├── ExpenseForm.jsx
│   ├── ExpenseSearch.jsx
│   └── ExpenseTable.jsx
├── App.jsx
└── main.jsx

• ExpenseForm: A component for adding new expenses.
• ExpenseSearch:A component for searching and filtering expenses.
• ExpenseTable: Displays a table of filtered expenses.
• App.jsx: The main app component that connects everything.
• main.jsx: EThe entry point that renders the App component.

Usage

To interact with the app::

• Add an expense by filling out the form and submitting it.
• Use the category filter to view expenses of a specific type.
• Use the search bar to find expenses by name.
• Click the delete button to remove an expense from the list.

Author

Kipchumba Brian
GitHub: @DevBrianKE
Portfolio: https://devbrianke.github.io/My-Portfolio