https://github.com/vijay-kumavat/expense-tracker

I’ve built an Expense Tracker app using React Bootstrap and modern React 19 features. It includes CRUD operations for managing expenses (add, edit, delete), advanced filtering (search, category, date range), and data visualization (summary cards, pie charts)
https://github.com/vijay-kumavat/expense-tracker

bootstrap5 css html react reactjs reactjs19

Last synced: 2 months ago
JSON representation

I’ve built an Expense Tracker app using React Bootstrap and modern React 19 features. It includes CRUD operations for managing expenses (add, edit, delete), advanced filtering (search, category, date range), and data visualization (summary cards, pie charts)

• Host: GitHub
• URL: https://github.com/vijay-kumavat/expense-tracker
• Owner: Vijay-Kumavat
• Created: 2025-04-13T12:24:08.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-04-13T12:34:03.000Z (about 1 year ago)
• Last Synced: 2025-04-14T20:19:35.130Z (about 1 year ago)
• Topics: bootstrap5, css, html, react, reactjs, reactjs19
• Language: JavaScript
• Homepage:
• Size: 443 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Expense Tracker

 I’ve developed an Expense Tracker app using React Bootstrap and modern React 19 features. The app supports full CRUD operations for managing expenses, allowing users to add, edit, delete, and view their expenses. Each expense includes a description, amount, date, and category. Advanced filtering options allow users to search by text, filter by category and date range, and toggle between simple and advanced filters. The app uses `useTransition` for smooth UI updates and `useDeferredValue` for responsive filtering of large datasets. `memo` optimizes re-renders for the expense list, and `useMemo` helps prevent unnecessary recalculations for computed data like category options and charts. Data visualization includes summary cards for key metrics such as total expenses and the highest expense, as well as a category distribution pie chart. The form for adding and editing expenses includes validation and error messages. The responsive design ensures the app works well on all screen sizes, and visual feedback (like spinners) provides a smooth user experience. The app is fully accessible, with dynamic category management and unique IDs for form elements using `useId`.

# Preview look like:

![gif](https://github.com/Vijay-Kumavat/expense-tracker/blob/master/src/images/response.png)