💸 TrackWallet

📖 Description

TrackWallet is a user-friendly web application designed to help you take control of your personal finances.
With TrackWallet, you can define a monthly budget, register your daily expenses, monitor your spending habits, and stay within your financial limits.

---

🌐 Live Demo

You can visit it here: TrackWallet

---

🚀 Features

• 🧾 Set your budget
  Enter the amount you want to spend and start tracking. The app validates that the amount is greater than 0 and in the correct format.

• ➕ Add new expenses
  Easily add a new expense by clicking the "+" button, which opens a modal window with a form:

  • Name of the expense
  • Amount
  • Category (e.g., Food, Health, Home, etc.)

• ✏️ Edit or delete expenses
  Click the name of any expense in the list to open the modal and:

  • Modify the expense and save the changes
  • Or delete the expense permanently (with confirmation)

• 📊 Visual spending progress
  A dynamic progress chart shows how much of your budget you've already used in percentage. It updates in real-time.

• 🔎 Filter by category
  Use the category filter dropdown to display only specific types of expenses.
  To reset the filter and view all expenses, select the default --Select-- option.

• 🔄 Reset the app
  Start over at any time by clicking "Reset App". You’ll be asked to confirm to avoid accidental resets.

• 💾 Persistent data with LocalStorage
  All your data (budget and expenses) is stored in your browser using LocalStorage, so your progress is saved even after closing or refreshing the page.

---

🛠️ Tech Stack

• 🧱 HTML5
• 🎨 CSS3
• 💻 JavaScript (ES6+)
• 🧩 Vue.js

---

📋 How to Use

1. Enter your total budget to start using the app. The input is validated to prevent 0 or invalid values.
2. Click the "+" button to open the expense modal.
3. Fill out the form with the expense name, amount, and category.
4. Click "Add Expense" to save the entry.
5. Click on any expense name to:
   • Edit and save changes
   • Delete the expense (confirmation required)
6. Use the filter dropdown to display only expenses from a specific category.
7. Click "Reset App" if you want to restart the budgeting process. A confirmation will be shown before proceeding.

---

🔒 Validations and Constraints

• Budget must be a valid number greater than 0.
• All expense fields are required.
• Expenses cannot exceed the remaining budget.
• Confirmation dialogs are shown for critical actions (reset and delete).

---

👨‍💻 Author

Developed by Christian Diaz