💰 Expense Tracker App – React Project

A fully functional Expense Tracker built with React. This project covers React fundamentals and walks through building, managing, and deploying a real-world application.

---

📌 Project Overview

This app allows users to:

• Add income and expense transactions
• Edit and delete transactions
• Reset all data
• View balance updates in real time
• Store data in Local Storage
• Fetch data from an API
• Visualize data using charts
• Navigate between multiple pages
• Deploy the project live on Vercel

---

🚀 Features

✅ Core Functionality

• Add transactions (income/expense)
• Edit existing transactions
• Delete transactions
• Reset all data
• Automatic balance calculation

📊 Dashboard

• Total income
• Total expenses
• Current balance
• Recent transactions list
• Data visualization with charts

🌐 Routing & Navigation

• Multiple pages using React Router
• Active navigation highlight
• Custom 404 page
• useNavigate for programmatic navigation

💾 Data Management

• Local Storage integration
• API data fetching
• Form validation
• Null safety checks
• Dynamic UI updates

🎨 UI Enhancements

• Styled with CSS
• React Icons integration
• Modal implementation
• Clean and responsive layout

🚀 Deployment

• Deployed on Vercel

---

🛠️ Technologies Used

• React
• React Router
• React Hooks (useState, useEffect)
• React Charts
• Local Storage
• JavaScript (ES6+)
• CSS
• Vercel (Deployment)

---

📚 Concepts Covered

React Fundamentals

• React prerequisites
• JSX
• Virtual DOM
• Components
• Props & data flow
• State management with useState
• Lifecycle methods
• useEffect hook

Advanced Topics

• API fetching
• Form handling & validation
• Conditional rendering
• Mapping arrays
• Programmatic navigation
• Charts integration
• Error handling
• App testing
• Deployment process

---

📂 Project Structure

src/
│
├── components/
├── pages/
├── assets/
├── App.js
├── main.js
└── index.css

---

🧪 How to Run the Project

1. Clone the repository:

git clone <your-repo-link>

2. Navigate to the project folder:

cd expense-tracker

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

5. Open in browser:

http://localhost:5173

---

📦 Build for Production

npm run build

---

🌍 Deployment

The app is deployed using Vercel.

Steps:

1. Push project to GitHub
2. Import repository into Netlify
3. Deploy
4. Get live URL

---