SaaS · React Flow · FastAPI · Visual PM

Milestone App

Visual project management + dynamic contract generation SaaS. Contractors define their work visually — milestone nodes on a canvas wire into a structured project graph. The system drafts contracts from that graph and automates client progress updates as milestones complete.

VisualNode Canvas
AutoContract Draft
0Manual Reports
React
Flow
Graph Engine
PDFGeneration
Emailon Milestone

The Problem

Root Cause

Contractors lose scope clarity and billing disputes arise because milestones live in email threads — no shared, auditable system. Clients don't know what's done. Contractors can't enforce milestone-based billing because there's no signed source of truth. Project scope drifts because there's no visual definition.

The solution is a canvas where contractors draw a project — create milestone nodes, connect dependencies, assign values — and the system generates a contract from that visual definition. As milestones are marked complete, the client gets an automated summary email. No manual paperwork. No dispute over what was agreed.

Architecture

apps/web

React Frontend

React Flow canvas for node-based milestone creation. Nodes include milestone name, description, deliverables, value, and dependency edges. State synced to FastAPI backend on each canvas save.

React 18React FlowTypeScriptZustandTailwind
services/api

FastAPI Backend

REST API managing projects, milestones, and clients. Triggers PDF generation on contract finalization. Handles milestone completion webhooks to kick outreach pipeline. SQLModel ORM over PostgreSQL.

FastAPISQLModelPostgreSQLAlembicPydantic v2
services/docs

Document + Outreach Engine

ReportLab-based PDF generation from project graph data. Contract templates structured around milestone nodes. SendGrid integration sends milestone completion emails to clients with PDF progress attachment.

ReportLabSendGridJinja2Docker

Contract Generation Pipeline

01
Canvas SaveNode graph persisted to DB on each edit
02
Graph ValidateDependency edges checked for cycles + orphan nodes
03
Contract DraftStructured template populated from milestone data
04
PDF RenderReportLab renders final signed contract PDF
05
Milestone DoneContractor marks complete — webhook fires
06
Client EmailProgress report + updated PDF delivered via SendGrid

Architectural Decisions

ADR-001

React Flow for Milestone Canvas

Drag-and-drop node graph over form-based input. Forces contractors to define structure, not just list tasks. Dependency edges become deliverable gates.

ADR-002

Contract from Graph — Not Template

Contract content is derived from the node structure, not a static template. Any canvas change invalidates the current draft — contract always reflects latest scope agreement.

ADR-003

SQLModel over raw SQLAlchemy

Pydantic v2 models serve as both API schema and ORM models — single source of truth for milestone shape. Eliminates mapper boilerplate and schema drift.

ADR-004

ReportLab over Headless Chrome PDF

Programmatic PDF generation avoids headless browser overhead. ReportLab gives pixel-level layout control for contract formatting without a Chromium dependency.

ADR-005

SendGrid for Client Outreach

Transactional email on milestone completion — not a notification system, but a structured audit trail. Every client email includes milestone ID, timestamp, and attached PDF.

ADR-006

FastAPI over Django

Lightweight API surface — no admin, no ORM batteries needed beyond SQLModel. Async handlers for document generation pipeline. Pydantic v2 validation is zero-overhead at I/O boundaries.

Full Stack

React 18React FlowTypeScriptZustandTailwind CSSFastAPISQLModelPostgreSQLAlembicPydantic v2ReportLabSendGridJinja2DockerDocker Compose