Construction planning and field management, in one place.
FieldFlow gives superintendents, project managers, and project engineers a single source of truth for the schedule, the field, and the paper trail — a spreadsheet-fast scheduler, an executive dashboard, and complete field records (daily logs, inspections, delays, change orders).
▶ Try FieldFlow now — no setup required.
- Click Explore the demo on the landing page (credentials are prefilled), then Create account.
- Choose Load Sample Project — FieldFlow seeds Riverside Medical Center — Phase 2 (a 15-activity schedule, crews, logs, inspections, and change orders) in about ten seconds, with live progress.
- You land on the executive dashboard: Today's Focus, a project-health gauge, schedule health, and an activity feed.
- Dashboard — scan Today's Focus ("4 items need your attention"), the health gauge, and KPI tiles.
- Schedule — click any cell to edit inline (Enter saves, Escape cancels), select a row, drag to reorder, indent/outdent to build a hierarchy.
- Toggle the Gantt view, then Export Schedule as PDF.
- Change Orders — filter by status, delete a record, and meet the accessible confirmation dialog.
- Shrink the window — the persistent rail and record tables adapt down to phone widths.
Superintendents run the job from the field, but the schedule lives in one tool, daily logs in another, and change orders in email. FieldFlow puts the CPM-style schedule and the field record set behind one login, so the 6:30 AM question — "what needs my attention today?" — has a one-screen answer.
- React 19 + Vite SPA with lazy-loaded routes and a hand-rolled, refresh-safe hash router.
- FastAPI backend with a layered domain/services architecture, SQLAlchemy ORM, and Alembic migrations on PostgreSQL.
- JWT authentication with expiry-aware session handling (stale API errors are suppressed and replaced by a single "session expired" notice).
- Interactive scheduler: spreadsheet-style inline editing, Finish-to-Start and Start-to-Start dependencies with lag, workday/holiday-aware date math, parent/child hierarchy, and keyboard-accessible drag-and-drop reordering (dnd-kit).
- Dynamic Gantt chart rendered from the same task data, plus one-click PDF export.
- Executive dashboard of derived insights — project-health gauge, timeline-elapsed schedule health, attention lists, and a merged activity feed — computed client-side from existing APIs (no bespoke endpoints).
- Accessible design system: tokens, reusable UI primitives (Button, Card,
Sidebar, PageHeader, Icon, ConfirmDialog, Skeleton), skip links, focus
management,
aria-currentnavigation, and screen-reader-labeled loading states. - Responsive UI from desktop rail navigation down to stacked mobile record cards.
- Client-side onboarding: first-run detection seeds a realistic demo project through the public API with visible progress — the app is never empty.
- Automated testing: 140 tests — 98 frontend (Vitest + React Testing Library, behavior- and accessibility-focused) and 42 backend (pytest, covering the scheduling engine, critical path, services, migrations, CORS, and TestClient API integration).
┌────────────────────┐ HTTPS / JSON ┌─────────────────────┐
│ React 19 SPA │ ───── REST + JWT ─────▶ │ FastAPI (Python) │
│ Vite · dnd-kit │ ◀──── JSON responses ── │ api → services → │
│ Recharts │ │ domain → models │
│ (Vercel) │ │ (Render) │
└────────────────────┘ └──────────┬──────────┘
│ │ SQLAlchemy
│ localStorage: JWT, onboarding flag │ + Alembic
▼ ▼
hash-based routes ┌─────────────────────┐
(refresh-safe, no │ PostgreSQL │
rewrite rules) └─────────────────────┘
How data flows: the SPA authenticates against /auth and stores a JWT;
every request carries it via a small fetch wrapper that also centralizes
401 handling. Page containers call REST endpoints (/projects/{id}/tasks,
/daily-logs, /inspections, /notes-delays, /change-orders, …); the
FastAPI service layer applies the scheduling rules (dependencies, lag,
workday/holiday calendars) and persists through SQLAlchemy models managed by
Alembic migrations. Responses return the full recalculated task set, so the
grid, Gantt, and dashboard always render from one consistent source. Dashboard
insights (health score, attention lists, activity feed) are derived
client-side in pure, unit-tested functions — no duplicate reporting API.
Scheduling
- Spreadsheet-style schedule editing with full keyboard support
- Finish-to-Start and Start-to-Start dependencies with lag (
12,12+3,12SS+4) - Workday scheduling that skips weekends and federal holidays
- Parent/child task hierarchy with indent/outdent and collapse
- Drag-and-drop ordering (pointer and keyboard)
- Gantt visualization and PDF schedule export
- Reusable schedule templates
Executive dashboard
- Today's Focus: activities starting today, inspections due, delays, pending COs
- Project-health gauge (green / amber / red) from a transparent heuristic
- Schedule health, attention list, upcoming tasks and inspections
- Unified project activity feed with "what changed since yesterday" markers
Field records
- Daily logs, inspections, notes & delays, and change orders
- Search, filtering, status badges, and responsive record cards
- Project-company management
Product quality
- Branded landing/login, first-run onboarding with demo seeding
- Icon system, confirmation dialogs, toast notifications, loading skeletons
- WCAG-minded semantics: skip links, focus traps,
aria-liveannouncements
| Executive dashboard — Today's Focus, health gauge, KPIs |
 Spreadsheet-style schedule with hierarchy and inline editing |
 Drag-and-drop task reordering |
 Split-panel landing and login |
 Gantt visualization |
 First-run onboarding seeds a full sample project |
 Change orders — filters, badges, confirm dialog |
 Responsive rail and record cards |
(Capture checklist: docs/screenshots/README.md)
| Layer | Technology |
|---|---|
| Frontend | React 19, Vite 8, dnd-kit, Recharts, Inter (self-hosted) |
| Backend | FastAPI, SQLAlchemy, Alembic, Pydantic |
| Database | PostgreSQL |
| Auth | JWT (OAuth2 password flow) |
| Testing | Vitest + React Testing Library (98), pytest (42) |
| Hosting | Vercel (frontend) · Render (API + migrations) |
140 automated tests.
- Frontend (98) — Vitest + React Testing Library. Tests target behavior and accessibility: roles and names, keyboard flows (Enter/Escape editing, grid cursor navigation, focus traps), derived dashboard metrics, demo-seeding orchestration, App-level integration wiring, the HTTP transport layer, and loading/empty/error states.
- Backend (42) — pytest. Covers the workday scheduling engine (dependencies, lag, federal holidays), critical path and total float, task services, relationship migrations, CORS configuration, and TestClient API integration (auth, ownership enforcement, task lifecycle, and field records over HTTP).
# frontend
cd frontend && npm test && npm run lint && npm run build
# backend
cd backend && pytestpython -m venv venv
venv\Scripts\activate # Windows
pip install -r requirements.txtCreate backend/.env:
DATABASE_URL=postgresql://postgres:YOUR_PASSWORD@localhost:5432/scheduler_db
SECRET_KEY=replace-with-a-long-random-secret
ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173Run migrations and start the API (docs at http://127.0.0.1:8000/docs):
alembic upgrade head
uvicorn app.main:app --reloadnpm install
npm run dev # http://localhost:5173Set VITE_API_URL when pointing at a deployed API.
- Frontend — Vercel. Hash-based routes keep every module refresh-safe with zero rewrite configuration. Live at construction-scheduler-eight.vercel.app.
- Backend — Render.
backend/render.yamldefines the web service, runs Alembic migrations on deploy, sets the health check, and pins the production CORS origin.
Shipped
- ✅ Design system, tokens, and reusable UI component layer
- ✅ Persistent project navigation shell with active-page state
- ✅ Executive dashboard with derived health/attention insights
- ✅ Branded landing page and first-run demo seeding
- ✅ Icon system, confirmation dialogs, notifications, loading skeletons
- ✅ Scheduler showcase: WBS numbering, inline validation, critical path + float, federal-holiday calendar, today marker, keyboard grid navigation
- ✅ Engineering hardening: dashboard bundle optimization (chart library removed for CSS bars), error boundaries, App decomposition into feature hooks + router, targeted memoization and shared date utilities, backend DRY cleanup with TestClient API integration coverage
Next
- RFIs and submittals, punch lists, document management
- Weather-delay integration and resource loading
- Milestone tasks, Gantt dependency arrows, and timeline zoom
Built by WarscherProgramming — construction-scheduler.