Frontend client for OpsTrack, designed as a tactical operator console and intentionally built to serve the backend rather than overshadow it.
The OpsTrack web client provides the browser-facing interface for authentication, task visibility, operator management, and audit access. It uses an Operational Brutalism visual system: minimal decoration, dense information layout, and high-contrast tactical styling.
This frontend is deliberately positioned as a control surface for backend validation. The application exists to exercise the API, visualize protected workflows, and demonstrate role-aware data access in a deployed environment.
- Frontend:
https://opstrack-web.vercel.app - API Dependency:
https://opstrack.onrender.com
Use the seeded verified accounts to inspect both interface states:
- Email:
k.mills@opstrack.mil - Password:
password123 - Role:
ADMIN
- Email:
j.miller@opstrack.mil - Password:
password123 - Role:
MEMBER
The UI and interaction layer for OpsTrack was intentionally accelerated with AI-assisted development workflows and custom agent-guided generation. This was a deliberate architectural choice: automate much of the frontend scaffolding and repetitive interface construction so the primary engineering focus could remain on backend performance, relational database architecture, authentication, and API security.
In short, the frontend is not the centerpiece of the portfolio—the backend is. The client exists to expose and validate backend capability in a usable, testable form.
- Framework: React + Vite
- Language: TypeScript
- Styling: Tailwind CSS
- Forms/Validation: React Hook Form + Zod
- Data Fetching: React Query
- HTTP Client: Axios
- Routing: React Router
- Deployment: Vercel
- React Query-driven fetch lifecycle
- server-sourced pagination and sorting for the task dashboard
- API response normalization for resilient UI rendering
- login saves JWT to local storage
- Axios request interceptor automatically attaches
Authorization: Bearer <token> - protected routes redirect when token is missing or expired
- admin-only views remain hidden or inaccessible to non-admin operators
- route protection enforces role-aware navigation
- the interface mirrors backend authorization boundaries instead of bypassing them
- mission-themed dashboard layout
- dense, low-decoration information hierarchy
- responsive task table tuned to adapt across different viewport heights
npm installcp .env.example .envSet the API base URL:
VITE_API_BASE_URL=http://localhost:5000/apinpm run devLocal frontend URL:
http://localhost:5173
npm run dev- start Vite dev servernpm run typecheck- TypeScript validationnpm run build- production buildnpm run preview- preview built app locallynpm run lint- ESLint checksnpm run demo:check- typecheck + build
- Framework Preset: Vite
- Build Command:
npm run build - Output Directory:
dist
VITE_API_BASE_URL=https://<api-domain>/apiAfter deploying the frontend, update the API service to allow the frontend origin:
CORS_ORIGIN=https://<frontend-domain>Then redeploy the API.
After deployment:
- Open the Vercel URL
- Log in with the demo admin account
- Confirm the task dashboard loads from the deployed API
- Validate admin-only views such as user management and logs
- confirm
VITE_API_BASE_URLincludes/api - confirm API
CORS_ORIGINexactly matches the frontend deployment URL - hard refresh the browser after redeploys
- clear local storage
- re-authenticate to issue a fresh token
- confirm the latest frontend build is deployed
- hard refresh to invalidate old cached assets
This client is intentionally lean and operational. Its purpose is to:
- expose backend behavior clearly
- validate auth and RBAC flows end-to-end
- demonstrate production connectivity between Vercel and Render
- provide a polished but secondary UI layer for a backend-focused portfolio project