Welcome to the Personal Budget Tracking Website! This project was created as a learning exercise while exploring multiple form handling with React Router DOM. The application helps you manage your finances by allowing you to create budgets, set specific amounts for each budget, and track your expenses under each budget category.
- Budget Creation: Easily create new budgets and assign them a custom name.
- Expense Tracking: Add expenses or spendings to each budget, which will automatically deduct from the budgeted amount.
- Color-Coded Budgets: Each budget is assigned a random color to help visually distinguish between different categories.
- Responsive Design: The website is fully responsive, ensuring a seamless experience on both desktop and mobile devices.
- Local Storage: All data entered by the user is stored locally in the browser's storage, so there's no need for a backend. This means your data stays on your device.
- Sign in: Start by entering your name and creating an account.
- Create a Budget: Create a budget and set an amount for it.
- Add Expenses: List your expenses or spendings under the respective budget. Each expense entry will subtract from the budget amount, helping you keep track of your remaining funds.
- Visual Indicators: Each budget category is color-coded for easy identification and quick reference.
- Local Data Storage: Your budgets and expenses are saved in the browser's local storage, ensuring your data persists even if you refresh the page or close the browser.
ViteReact.jsTailwindCSSReact Router Dom
https://budgetbudddy.netlify.app
To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory and run
npm installoryarnto install the required dependencies. - Start the project with
npm run devoryarn dev. - Open http://localhost:5173 (or the address displayed in your console) in your web browser to view the application.