FieldOps Command - Construction Operations Dashboard

A premium, full-stack construction operations dashboard built with FastAPI and React. FieldOps Command tracks multi-site progress, heavy equipment readiness, safety inspections, and incident response in a single command center.

Screenshots

Features

• Authentication - JWT-based auth with login/register
• Command Dashboard - Incident trend, equipment status mix, site momentum
• Site Management - Track budgets, safety scores, and crew coverage
• Equipment Readiness - Utilization + service cadence visibility
• Inspection Scheduling - Upcoming audits and compliance logging
• Incident Response - Severity-based incident tracking
• Bold Industrial UI - Distinctive, portfolio-ready design
• Docker Ready - Production and development compose files

Tech Stack

Backend

• FastAPI - Modern Python web framework
• SQLAlchemy - ORM & database layer
• SQLite - Default DB (easy to switch)
• JWT - Token-based auth
• Pydantic - Validation with type hints

Frontend

• React 18 - UI with hooks
• React Router v6 - Client-side routing
• Framer Motion - Animations
• Recharts - Charts
• Lucide React - Icon set
• Axios - HTTP client

Project Structure

field-ops/
├── backend/
│   ├── main.py
│   ├── models.py
│   ├── schemas.py
│   ├── auth.py
│   ├── database.py
│   ├── config.py
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── context/
│   │   ├── styles/
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── nginx.conf
│   ├── Dockerfile
│   └── Dockerfile.dev
├── docker-compose.yml
└── docker-compose.dev.yml

Quick Start with Docker

cd field-ops
cp .env.example .env

docker-compose up -d --build

Frontend: http://localhost Backend API: http://localhost:8000

Development Mode

docker-compose -f docker-compose.dev.yml up -d --build

Frontend: http://localhost:5173 Backend API: http://localhost:8000

Demo Credentials

Email: demo@fieldops.io
Password: demo123

API Endpoints

Auth

• POST /api/auth/register
• POST /api/auth/login
• GET /api/auth/me

Operations

• GET/POST /api/sites
• GET/POST /api/equipment
• GET/POST /api/inspections
• GET/POST /api/incidents
• GET /api/dashboard
• POST /api/seed

Design Highlights

• Industrial command center aesthetic with safety-stripe accents
• Staatliches display font + IBM Plex Sans body
• Warm ember accents with steel-blue and mint balance
• Chart-first dashboard with clear operational hierarchy
• Responsive layout from desktop to mobile

---

Built with FastAPI + React for portfolio-ready project presentation.