Nicholas Trigger

Web Planner

Full-Stack
PythonFastAPISQLAlchemyAlembicReactTypeScriptPostgreSQLDocker

A personal planning app with an interactive calendar, task management, and auto-saving daily notes. FastAPI + SQLAlchemy backend, React 19 + TypeScript frontend, and PostgreSQL running in Docker.

View on GitHub

Overview

Web Planner is a personal planning app built around a full calendar view. Month and year navigation opens any day into a detail view where tasks and notes for that date live side by side. It is a complete full-stack application: a typed REST API, a relational schema managed by migrations, and a modern React frontend.

Features

  • Calendar. Month/year navigation with a full calendar grid; click any day to open its detail view.
  • Tasks. Create tasks with a due date/time and priority (normal / medium / high), mark them done or delete them. Tasks appear on their calendar day.
  • Daily notes. Per-date freeform notes with auto-save.
  • US holidays. Fetched from the nager.at public API and displayed on the calendar.

Tech Stack

LayerTechnologies
BackendPython 3.12, FastAPI, SQLAlchemy 2.0, Alembic migrations, managed with uv
FrontendReact 19 + TypeScript (React Compiler), built with Vite
StylingTailwind CSS + daisyUI
DatabasePostgreSQL 16 running in Docker
Dev workflowdev.ps1 one-command startup: Postgres, backend, and frontend in Windows Terminal tabs

Architecture

The backend follows a clean layered structure: models.py holds the SQLAlchemy ORM models, schemas.py the Pydantic request/response shapes, and routers/ the API endpoints. Settings load from a .env file via pydantic-settings, and FastAPI auto-generates interactive Swagger and ReDoc documentation for the whole API.

A few deliberate decisions:

  • Migrations read the database URL from .env, not alembic.ini. alembic/env.py injects the URL at runtime, keeping credentials out of committed files.
  • Autogenerated migrations stay honest. alembic/env.py imports app.models so every model registers with Base.metadata — the thing Alembic's autogenerate actually scans.
  • React Compiler is enabled. Components are auto-memoized at build time, so the frontend is written as idiomatic React with no manual useMemo/useCallback noise.

Developer Experience

The whole stack boots with a single command. .\dev.ps1 starts Postgres (detached), then opens the FastAPI backend and the Vite frontend in separate Windows Terminal tabs. A -DbOnly flag brings up just the database for running backend tests, and -Stop tears everything down. Backend tests run under pytest via uv.

The project grew out of my FastAPI + React starter template, which packages this same stack and workflow as a reusable GitHub template.

© 2026 Nicholas Trigger