Smart Factory Monitoring for a Serbian Production Plant

Context

The client's name and internal system names are omitted. The structure and the figures are as they are.

I built a monitoring system for reviewing and visualizing AOI (Automated Optical Inspection) process data at a production plant in Serbia. I owned the frontend end to end — Figma-based UI/UX design through React screen implementation — and adapted an existing Spring Boot API with similar functionality to fit the dashboard's needs, writing its MyBatis query mappings against MariaDB. I also worked in English with the on-site team to incorporate their process formulas and feedback.

Problem

Checking first-pass yield for the AOI process, broken down by product and by machine, required staff to manually aggregate data. That meant a lag before anyone could spot a process going wrong.

What I did

1. Figma-based UI/UX design

I designed the dashboard layout around the metrics on-site staff actually watched: first-pass yield by product and by machine, and trends over time.

2. ApexCharts + Plotly visualization

I built time-series charts for first-pass yield by product/machine with ApexCharts, and used Plotly for the screens that needed richer, multivariate comparisons. Splitting the two libraries by screen type kept simple trend views lightweight while giving the multi-dimensional comparisons full interactivity.

3. Adapting an existing Spring Boot API + MariaDB

I took an existing Java Spring Boot API with similar functionality and modified it to fit what this dashboard needed, writing its MyBatis query mappings against MariaDB.

4. Working with the on-site team

I communicated in English with the Serbian on-site team to refine the metric definitions against their actual process calculations and field feedback.

Results

Replacing manual aggregation with a dashboard wasn't the goal in itself — the resulting visibility into which processes were drifting is what actually drove the drop in the AOI defect rate.