TrackMyBudgets is a responsive and progressive web application designed to help users manage and track their personal budgets and expenses. It allows users to create multiple budgets, categorize their expenses, and visually track their spending progress.
- Create Multiple Budgets: Users can set up multiple budgets for different financial goals.
- Expense Categorization: Categorize expenses into custom or predefined categories.
- Progress Tracking: View detailed budget progress with dynamic visual charts and summaries.
- Responsive Design: Fully functional on both desktop and mobile devices.
- Real-time Feedback: Interactive notifications with Toastify for a smooth user experience.
Check out the live demo of the app here.
- React: Core library for building the user interface.
- React Router: For dynamic, multi-page navigation without full page reloads.
- JSX: Syntax extension to write HTML in JavaScript.
- CSS: For layout, styling, and responsive design.
- LocalStorage: For storing data locally on the browser to make it secure.
- Toastify: For notifications and alerts throughout the app.
- Login: Login to the app by simply typing your name.
- Create a Budget: Navigate to the "Create Budget" section, enter a budget name, amount, and start tracking expenses.
- Add Expenses: For each budget, you can add expenses by categorizing them (e.g., groceries, rent, entertainment) and specifying the amount.
- Monitor Progress: Each budget has a detailed page showing your total spending, remaining budget, and dynamic visuals such as progress bars and charts.
- Responsive Design: Use the app on any device—desktop, tablet, or smartphone—with a fully responsive interface.
If you have any questions, feel free to reach out:
- Email: pborade90@gmail.com
track-my-budgets/
├── public/
├── src/
│ ├── components/ # Reusable React components
│ ├── pages/ # Page-level components
│ ├── assets/ # images, icons, etc.
│ └── App.js # Main application file
├── package.json
└── README.md