Expense Tracker
Expense Tracker is a web application for personal financial management. It allows users to easily track income and expenses, view the overall balance, and flexibly filter records by day, month, or year.
Users can add, edit, and delete records, as well as export them to a CSV report for convenience. The application also includes authentication and personalized settings, such as language selection, currency, theme (light/dark), and password change.
Technologies:
React with hooks (useState, useEffect, useRef, useMemo) and Context API (useContext)
localStorage – storing records, settings, and login state
framer-motion – smooth UI animations
i18next + react-i18next – full localization support
styled-components – component-level styling
uuid – generating unique record IDs
prop-types – prop validation
recharts – data visualization in the form of charts
react-select – custom select
react-datepicker – flexible date picker
Vite – fast and modern project build
Users can add, edit, and delete records, as well as export them to a CSV report for convenience. The application also includes authentication and personalized settings, such as language selection, currency, theme (light/dark), and password change.
Technologies:
React with hooks (useState, useEffect, useRef, useMemo) and Context API (useContext)
localStorage – storing records, settings, and login state
framer-motion – smooth UI animations
i18next + react-i18next – full localization support
styled-components – component-level styling
uuid – generating unique record IDs
prop-types – prop validation
recharts – data visualization in the form of charts
react-select – custom select
react-datepicker – flexible date picker
Vite – fast and modern project build