SpendStar — Expense Tracker

A sleek, dark-themed expense tracker web app with animated starfield background, cursor smoke effect, and pie chart analytics.

---

🛠️ Built With

• Python + Flask (backend server)
• HTML / CSS / JavaScript (frontend)
• Chart.js (pie chart)
• localStorage (saves your data in the browser)

---

📁 Project Structure

expense_tracker/
├── app.py               ← Python Flask server
├── requirements.txt     ← Python packages needed
├── README.md            ← This file
└── templates/
    └── index.html       ← The full web app

---

Step-by-Step Setup in VS Code (Windows)

STEP 1 — Install Python

1. Go to https://python.org/downloads
2. Download the latest version (e.g. Python 3.12)
3. During install, ✅ CHECK "Add Python to PATH"
4. Click Install

STEP 2 — Install VS Code

1. Go to https://code.visualstudio.com
2. Download and install

STEP 3 — Open the Project in VS Code

1. Open VS Code
2. Click File → Open Folder
3. Select your expense_tracker folder
4. Click Select Folder

STEP 4 — Open the Terminal in VS Code

• Press Ctrl + ` (backtick key, top-left of keyboard)
• A terminal opens at the bottom

STEP 5 — Install Flask

Type this in the terminal and press Enter:

pip install flask

Wait for it to finish installing.

STEP 6 — Run the App

Type this and press Enter:

python app.py

You should see:

 * Running on http://127.0.0.1:5000

STEP 7 — Open in Browser

Open your browser and go to:

http://127.0.0.1:5000

🎉 Your expense tracker is running!

---

📌 How to Use the App

• Add Transaction — Fill in description, amount, category, date, and type (Income/Expense)
• Pie Chart — Automatically updates to show your spending breakdown by category
• Filter — Click All / Expenses / Income tabs to filter transactions
• Delete — Click the ✕ button on any transaction to remove it
• Data persists — Your transactions are saved in browser localStorage

---

🐙 How to Upload to GitHub

STEP 1 — Install Git

1. Go to https://git-scm.com/download/win
2. Download and install (use default settings)

STEP 2 — Create a GitHub Account

Go to https://github.com and sign up (free)

STEP 3 — Create a New Repository

1. Click the + button → New repository
2. Name it: expense-tracker
3. Set to Public
4. Click Create repository

STEP 4 — Push Your Code

In VS Code terminal, type these one by one:

git init
git add .
git commit -m "Initial commit: SpendStar expense tracker"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/expense-tracker.git
git push -u origin main

Replace YOUR_USERNAME with your GitHub username.

STEP 5 — Enable GitHub Pages (optional, to show live demo)

1. Go to your repo on GitHub
2. Click Settings → Pages
3. Source: Deploy from a branch → main → /root
4. Save — your app will be live at https://YOUR_USERNAME.github.io/expense-tracker

---

✨ Features

• 🌟 Animated starfield background with glowing stars
• 🌫️ Smoky cursor trail effect
• 📊 Live pie chart showing spending by category
• 💚 Income vs 🔴 Expense color coding
• 💾 Data saved automatically (localStorage)
• 📱 Responsive design (works on mobile too)