💰 Expense Tracker – SyntecxHub Internship (Week 1 Project)

This is a responsive Expense Tracker App built using React.js as part of the SyntecxHub Web Development Internship – Week 1 Task.

The app allows users to:

✔ Add Expenses
✔ Delete Expenses
✔ Auto-focus using useRef
✔ Fetch initial mock data using useEffect
✔ Optimize performance using useCallback and useMemo
✔ Clean and modern UI

---

🚀 Features

📝 Add Expense

Enter a title and amount, then click Add to save it.

❌ Delete Expense

Remove any entry with a single click.

📌 Auto Input Focus

useRef keeps the input box ready for typing at all times.

🌐 Mock API Fetch

Initial data is loaded using JSONPlaceholder mock API (free & offline-friendly).

⚡ Optimized Performance

• useCallback → optimized add function
• useMemo → calculates total amount efficiently

📱 Responsive UI

Works smoothly on both mobile and desktop.

---

🛠️ Tech Stack

Technology	Purpose
React.js	UI Framework
useState	Manage form + expenses
useEffect	Fetch mock API data
useRef	Auto-focus input field
useMemo	Optimize total calculation
useCallback	Optimize add handler
CSS	UI styling

📌 Features Demonstrated for Internship This project satisfies all required React hooks:

✔ useState Manage input fields, expense list.

✔ useEffect Fetch initial mock API data.

✔ useRef Auto focus input field after adding expense.

✔ useMemo Calculate total amount efficiently.

✔ useCallback Optimized function for adding expenses.

✨ Author Priscilla Rachel Toby Web Development Intern – SyntecxHub GitHub: https://github.com/25Priscilla

🎉 Thank You! This project is developed as part of the SyntecxHub Internship Program – Week 1. Happy Coding! 🚀