1.Project Banner

Expense Tracker Full Stack Application

A modern full-stack expense management application built using Angular, FastAPI and MySQL.

Live Features

✅ JWT Authentication
✅ Expense Management
✅ Dashboard Analytics
✅ Search & Filtering
✅ Server-side Pagination
✅ Responsive UI

2. Architecture Section

Architecture

Frontend (Angular)
        │
        ▼
REST API (FastAPI)
        │
        ▼
Database (MySQL)

3. Screenshots Section

Application Screenshots

Dashboard

Expense List

Login Page

4. Project Setup Section

Frontend:

Frontend Setup

git clone https://github.com/kalees-25/expense-tracker-frontend.git

cd expense-tracker-frontend

npm install

ng serve


Backend:
## Backend Setup

```bash
git clone https://github.com/kalees-25/expense-tracker-backend.git

cd expense-tracker-backend

pip install -r requirements.txt

alembic upgrade head

uvicorn main:app --reload

5. API Documentation Section

API Documentation

Swagger UI:

http://localhost:8000/docs

ReDoc:

http://localhost:8000/doc

7. Skills Demonstrated Section

Skills Demonstrated

• Angular Standalone Components

• RxJS State Management

• AG Grid Integration

• FastAPI Development

• SQLAlchemy ORM

• Alembic Migrations

• JWT Authentication

• REST API Design

• MySQL Database Design

Project start sequence

1. Clone Frontend Repo

2. Clone Backend Repo

3. Create MySQL Database

4. Configure .env

5. Run Alembic Migration

6. Start FastAPI Server

7. Start Angular Application

8. Open Application