Downtime Monitor

An SPA for monitoring production lines: uptime and downtime timelines with colour-coded reasons and a per-shift log.

01 / 03

About the project

Stack
ReactTypeScriptViteTanStack QueryReact RouterTailwind CSSAxiosLaravelMS SQL ServerPostgreSQLDockerNginx

An SPA for monitoring production lines and logging their downtime.

The main screen shows up to six timelines at once: uptime and downtime are split into 30-second slots, and every downtime reason comes from a reference table and gets its own colour - the strip makes it obvious where a line stopped and why.

A separate page is where downtime is entered by hand: a per-shift table, create, edit, and delete operations, sign-in and totals for both recorded and overall downtime, so it is clear whether the whole shift has been accounted for.

The backend reads from monthly MS SQL Server tables, so downtime history can be pulled up for any past period.

Frolov / 2026