TaskFlow — Full-Stack Demo (FastAPI + Angular + PostgreSQL)

A compact, production-style task manager showcasing JWT authentication, role-based access control (RBAC), and a clean Angular frontend. Built as a portfolio piece by Ricardo López.

---

✨ Features

• JWT authentication — OAuth2 password flow, bearer tokens, hashed passwords (bcrypt).
• Role-Based Access Control (RBAC) — admin vs member:
  • Members see and manage only their own tasks.
  • Admins see all tasks and can manage users.
• Task board — create tasks and move them across To do → In progress → Done.
• Typed end-to-end — Pydantic schemas on the backend, TypeScript models on the frontend.
• Tested — pytest suite covering auth, RBAC and ownership isolation.
• Dockerized — one command spins up PostgreSQL + the API.

---

🏗️ Architecture

┌─────────────┐      JWT (Bearer)      ┌──────────────┐      ┌──────────────┐
│   Angular   │ ────────────────────▶  │   FastAPI    │ ───▶ │  PostgreSQL  │
│  (frontend) │  ◀──── JSON / REST ──── │  (backend)   │      │              │
└─────────────┘                        └──────────────┘      └──────────────┘
  signals,                              SQLAlchemy 2.0,         users, tasks
  guard, interceptor                    Pydantic v2, RBAC

Backend (/backend)

• app/core/ — config (pydantic-settings) and security (JWT + password hashing).
• app/models.py — SQLAlchemy 2.0 ORM models (User, Task).
• app/schemas.py — Pydantic request/response schemas.
• app/api/deps.py — auth dependencies: get_current_user, require_admin.
• app/api/routes/ — auth, users, tasks routers.

Frontend (/frontend)

• core/auth.service.ts — signal-based auth state + token storage.
• core/auth.interceptor.ts — attaches the JWT to every request.
• core/auth.guard.ts — protects routes.
• features/login, features/tasks — standalone components.

---

🚀 Quick start

Option A — Docker (backend + database)

docker compose up --build
# API:  http://localhost:8000
# Docs: http://localhost:8000/docs

Then run the frontend (see below).

Option B — Local development

Backend

cd backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env          # adjust DATABASE_URL / SECRET_KEY
uvicorn app.main:app --reload # http://localhost:8000

Frontend

cd frontend
npm install
npm start                     # http://localhost:4200

On first start the backend seeds an admin user (configurable via env):

Email	Password	Role
admin@demo.com	admin1234	admin

---

🔌 API overview

Method	Endpoint	Auth	Description
POST	/api/auth/login	—	Login, returns a JWT
GET	/api/users/me	any user	Current user profile
GET	/api/users	admin	List users
POST	/api/users	admin	Create a user
GET	/api/tasks	any user	List tasks (own, or all if admin)
POST	/api/tasks	any user	Create a task
PATCH	/api/tasks/{id}	owner/admin	Update a task
DELETE	/api/tasks/{id}	owner/admin	Delete a task

Interactive docs at /docs (Swagger UI).

---

🧪 Tests

cd backend
source .venv/bin/activate
pytest

The suite runs against an in-memory SQLite database and covers: authentication, RBAC (member vs admin), task ownership isolation, and CRUD.

---

🛠️ Tech stack

Backend: Python · FastAPI · SQLAlchemy 2.0 · Pydantic v2 · python-jose · passlib/bcrypt · PostgreSQL Frontend: Angular 21 · TypeScript · RxJS · Angular Signals Tooling: Docker · Docker Compose · pytest

---

_{Demo project · MIT-style educational use · © Ricardo López}