https://github.com/roycuadra/personal-finance-tracker

A personal finance tracker that monitors your spending habits and helps you manage your budget effectively.
https://github.com/roycuadra/personal-finance-tracker

authentication css html javascript localstorage

Last synced: 29 days ago
JSON representation

A personal finance tracker that monitors your spending habits and helps you manage your budget effectively.

• Host: GitHub
• URL: https://github.com/roycuadra/personal-finance-tracker
• Owner: roycuadra
• Created: 2025-03-20T04:20:56.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-29T15:54:47.000Z (about 1 year ago)
• Last Synced: 2025-08-20T23:41:04.711Z (11 months ago)
• Topics: authentication, css, html, javascript, localstorage
• Language: HTML
• Homepage: https://roycuadra.github.io/Personal-Finance-Tracker/
• Size: 129 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Personal Finance Tracker 💹

### Easily track your income and expenses, filter transactions by category, and visualize your spending with interactive charts. Stay organized, manage your budget effectively, and achieve your financial goals with a user-friendly dashboard.

## Live View

👉 [Click here to open the web application](https://roycuadra.github.io/Personal-Finance-Tracker/)

---

## GitHub Contributors:

- Roy Cuadra

- Lino Tesiorna

- Melanel Masudog

---

## Screenshot  



## All Features: 

-  User Authentication ✔

-  Dashboard Interface  ✔

-  Current Balance Display  ✔ 

-  Transaction Filtering  ✔

-  Expense Breakdown Chart  ✔

-  Recent Transactions List  ✔

-  Add New Transaction  ✔

-  Edit Transaction  ✔

-  Delete Transaction ✔

-  Data Persistence  ✔

-  Uses localStorage to store user session.  ✔

## User Steps-by-Step Instructions

1. **Register a New Account**  

   - Click on "Register" on the login page.

   - Enter your desired username and password.

   - Submit the registration form to create an account.

   - You will be redirected to the login page after successful registration.

2. **Login**  

   - Enter your credentials to access the dashboard

     

3. **View Current Balance**  

   - The homepage displays your total balance based on income and expenses.

4. **Add a New Transaction**  

   - Click on "Add Transaction."

   - Enter the transaction name, amount, and select a category.

   - Choose whether it is an income or expense.

   - Submit the transaction to update your records.

5. **View and Filter Transactions**  

   - The transaction list displays all recorded income and expenses.

   - Use the filter option to view specific categories.

6. **Analyze Expenses with Charts**  

   - A pie chart provides a visual breakdown of your spending habits.

7. **Logout**  

   - Click on "Logout" to clear your session and return to the login page.

 ---

## Technologies Used

- **HTML**

- **CSS**

- **JavaScript**

- **Chart.js** (for graphical representation)

- **AOS (Animate On Scroll)** (for animations)

- **Font Awesome** (for icons)

- **SweetAlert2** (for Pop ups & Alert)

- **localStorage** Store user data and transactions persistently in the browser.