This is my first React.js project, built by myself for learning purposes. The main goal of this project was to track income and expenses, calculate the balance, and visualize data through simple charts..

• What I Learned from this Project While making this project i learned a lot like understanding the basic flow of React, using useState and useEffect hooks, reusing components, using props, handling forms in React, creating multiple pages with React Router, working with LocalStorage, using third-party libraries like Recharts and solving beginner level bugs. This project was my first strong step in my React learning journey i especially liked working with state and props in React..

• Add income
• Add expenses
• View balance
• Filter transactions by category and month
• See expenses in a pie chart

• Add income & expense transactionsions
• Edit and delete transactions
• Automatic balance calculation
• Category wise filtering
• Month wise filtering
• Expense Pie Chart (Recharts)
• Data saved using LocalStorage

In this project what i used:

• React.js (functional components)
• React Router DOM (for page navigation)
• Recharts (for expense pie chart)
• CSS (pure custom styling)
• LocalStorage (for saving data)
• JavaScript (ES6+)

The expense chart is made using Recharts PieChart.It shows expenses by category only expense transactions are shown, income is not included.

This project does not use a backend. All data is saved in the browser’s LocalStorage, so it stays safe even after refreshing the page..

I used AI in a few places. Ai was used for styling, mainly for the popup animation on the welcome page using CSS keyframes. The box shadow and transition lines in CSS were also taken from AI once and then reused in other places. Earlier, I used useLocation with AI help to pass data on the expense chart page, but now I have changed it and i am using local storage instead. I took only a little help from AI for the expense chartart

https://youtu.be/3LRZRSIh_KE?si=bjRZ9AG1TRgVoSEk