https://github.com/aimarbustamante/expense-planner
Web application where you can manage your budget for either the month or the week. You can add your budget, expenses, edit and delete your expenses, and filter expenses by category.
https://github.com/aimarbustamante/expense-planner
budget-tracker budget-tracker-application contextapi headlessui react react-calendar react-circular-progressbar react-swipeable-list reactjs tailwind-css tailwindcss typescript vite vitejs
Last synced: about 1 month ago
JSON representation
Web application where you can manage your budget for either the month or the week. You can add your budget, expenses, edit and delete your expenses, and filter expenses by category.
- Host: GitHub
- URL: https://github.com/aimarbustamante/expense-planner
- Owner: AimarBustamante
- Created: 2024-07-09T09:11:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-09T22:49:19.000Z (almost 2 years ago)
- Last Synced: 2025-03-16T12:42:43.569Z (about 1 year ago)
- Topics: budget-tracker, budget-tracker-application, contextapi, headlessui, react, react-calendar, react-circular-progressbar, react-swipeable-list, reactjs, tailwind-css, tailwindcss, typescript, vite, vitejs
- Language: TypeScript
- Homepage: https://budget-planner-04.netlify.app/
- Size: 595 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Expense Planner
## 📖 Project Description
Expense Planner is a web application where you can manage your budget for either the month or the week. You can add your budget, expenses, edit and delete your expenses, and filter expenses by category.
## 🎨 Project Features
- **Add Budget:** Input your total budget for a specific period.
- **Add Expenses:** Easily add new expenses with details such as amount, category, and date.
- **Edit Expenses:** Modify existing expenses to keep your budget up to date.
- **Delete Expenses:** Remove expenses that are no longer needed.
- **Filter by Category:** View expenses by specific categories to see where your money is going.
## 🛠️ Technologies Used
## 🌐 Libraries Used
- [**react-calendar**](https://www.npmjs.com/package/react-calendar)
- [**react--date-picker**](https://www.npmjs.com/package/react-date-picker)
- [**react-swipeable-list**](https://www.npmjs.com/package/react-swipeable-list)
- [**react-circular-progressbar**](https://www.npmjs.com/package/react-circular-progressbar)
## 📚 What I Learned
I learned how to use Context API to have a global state without dependencies; Context API helped me avoid passing props through every component. Additionally, I learned to use various libraries for better styling in my application, along with the time-saving benefits they provide.
## 📬 Contact Information
[](https://aimarbusta.dev/)
[](https://www.linkedin.com/in/aimarbustamante/)
[](https://www.instagram.com/aimarbusta.dev/)
[](mailto:aimarbustamante379@hotmail.com)
[](https://wa.me/65167602)
[](https://www.frontendmentor.io/profile/AimarBustamante)