Expense Tracker

A simple Expense Tracker application built with FastAPI for the backend and HTML, CSS, and JavaScript for the frontend.

This project demonstrates how a frontend communicates with a backend using REST APIs.

---

Features

• Add an expense
• View all expenses
• Delete an expense
• FastAPI REST API
• Data saved to SQLite database (data persists after restart)

---

Tech Stack

Frontend

• HTML
• CSS
• JavaScript

Backend

• FastAPI
• SQLModel + SQLite

---

Project Structure

expense-tracker/
│
├── backend/
│   ├── main.py          ← API routes
│   ├── models.py        ← Expense table model
│   ├── database.py      ← SQLite connection 
│   ├── expenses.db      ← SQLite database file (auto-created)
│   ├── requirements.txt
│
│
├── frontend/
│   ├── index.html
│   ├── script.js
│   ├── style.css
│   └── ...
│
└── README.md

---

Getting Started

1. Clone the Repository

git clone https://github.com/shresthaAlex/software_fellowship_day4_database.git

---

2. Navigate to the Backend

cd backend

---

3. Create a Virtual Environment

Windows

python -m venv venv

macOS / Linux

python3 -m venv venv

---

4. Activate the Virtual Environment

Windows

venv\Scripts\activate

macOS / Linux

source venv/bin/activate

After activation, your terminal should display something similar to:

(venv)

---

5. Install Dependencies

pip install -r requirements.txt

Note: requirements.txt includes fastapi[standard], so you do not need to install Uvicorn separately.

---

6. Run the Backend

Start the FastAPI development server with:

fastapi dev main.py

The backend will start at:

http://127.0.0.1:8000

Interactive API documentation is available at:

http://127.0.0.1:8000/docs

---

Running the Frontend

Open the frontend folder in VS Code.

Right-click on index.html and select:

Open with Live Server

The frontend will communicate with the FastAPI backend running on port 8000.

---

API Endpoints

Get All Expenses

GET /expenses

Returns all stored expenses.

---

Add an Expense

POST /expenses

Example Request Body

{
  "category": "Food",
  "description": "Pizza",
  "amount": 20
}

---

Delete an Expense

DELETE /expenses/{expense_id}

Deletes an expense using its unique ID.

---

Validation

• category is required.
• description is optional.
• amount must be greater than 0.

---

Notes

• Data is stored in SQLite (expenses.db).
• Data persists even after restarting the server — try it!
• Delete expenses.db to reset all data.
• The frontend stays the same — only the backend changed.

---

What Changed (Day 3 → Day 4)

Section	Day 3 (Before)	Day 4 (After)
Features	In-memory storage (data resets after restart)	SQLite database (data persists after restart)
Tech Stack	Pydantic	SQLModel + SQLite
Project Structure	main.py	main.py, models.py, database.py, expenses.db
Storage	Python list	SQLite database
Data Persistence	❌ Lost on restart	✅ Saved permanently
Notes	"Data stored in memory, resets on restart."	"Data stored in SQLite, persists after restart."

---

Summary

File	Purpose
database.py 🆕	Connects to SQLite, creates the database, and provides database sessions
models.py 🆕	Defines the Expense table using SQLModel
main.py 🔄	Uses the database for CRUD operations instead of an in-memory list
expenses.db 🆕	SQLite database file that stores all expense records

---

Learning Objectives

This project demonstrates:

• FastAPI
• REST APIs
• HTTP Methods (GET, POST, DELETE)
• Pydantic Validation
• JSON Requests & Responses
• Fetch API
• Frontend ↔ Backend Communication
• SQLModel + SQLite