Budget Tracker App

The Budget Tracker App empowers users to manage their finances effectively by tracking income and expenses.

This project has two versions:

1. Version 1: Built using HTML, TailwindCSS, and JavaScript. This is the Version 1.
2. Version 2: Upgraded to use Next.js, TailwindCSS, for a more scalable, modern framework and includes advanced features.

---

Version 1

Features

• User-Friendly Interface: Intuitive layout designed with TailwindCSS.
• Date Tracking: Includes transaction date for better record-keeping.
• Dynamic Totals: Automatically calculates total income, expenses, and balance.
• Persistent Data: Saves transactions in the browser using localStorage.
• Edit & Delete Functionality: Allows seamless editing and removal of transactions.
• Responsive Design: Accessible across devices of various screen sizes.

---

How It Works

Adding Transactions

• Fill in the date, description, and amount.
• Click the "Add Transaction" button to save it.

Editing Transactions

• Click the Edit button beside a transaction to modify its details.
• Update the fields and save changes.

Deleting Transactions

• Remove unwanted transactions with the Delete button.

Persistent Data

• Your data is automatically saved in the browser and reloaded on page refresh.

Toggling Transaction List

• Show or hide the transaction list using the toggle button.

---

Version 2 (In Development)

Version 2 introduces a modern stack and advanced features to make the app more efficient and user-friendly. 👉 Explore Version 2 Repository

Technologies Used

• Next.js: For server-side rendering and scalability.
• TypeScript: For type safety and robust development.
• TailwindCSS: For consistent and responsive styling.

Planned Features

• User Authentication: Allow users to create accounts and log in securely.
• Multi-User Support: Users can track individual budgets.
• Advanced State Management: Using Context API or Redux.
• Category Filters: Sort transactions by categories (e.g., groceries, rent).
• Charts & Graphs: Visualize data for better insights.
• AI Integration: Visualize data for better insights.
• Dark Mode: Enhance user experience with theme options.
• Firebase/Clerk: For real-time database and user authentication.

---

Learning Outcomes

Through this project, I applied and enhanced the following skills:

Version 1:

• Frontend Development Fundamentals: Leveraging HTML, CSS, and JavaScript to build dynamic applications.
• TailwindCSS: Implementing responsive and consistent designs.
• LocalStorage API: Persisting data for enhanced user experience.
• DOM Manipulation: Handling user interactions dynamically.

Version 2 (Ongoing):

Version 2 introduces a modern stack and advanced features to make the app more efficient and user-friendly.

• Next.js: Building modern web applications with server-side rendering.
• TypeScript: Writing scalable, type-safe code.
• Firebase/Clerk Integration: Real-time database management and authentication.

---

Roadmap for Future Improvements

• Upgrade Version 2 with:
  • Offline Mode: Allow users to track expenses without internet connectivity.
  • Custom Categories: Let users define their own categories.
  • Expense Predictions: Use historical data for forecasting.

---

Acknowledgments

The Budget Tracker App was developed as part of the Programmify Frontend React Training Internship to demonstrate proficiency in both foundational and modern frontend development tools.

---

License

This project is open source and available under the MIT License.

Feel free to fork and contribute to this project!

---

Feedback

If you have suggestions or issues, please raise an issue or contact me directly!