Manufacturing Execution System (MES) · Mobile/Tablet App
DongjinMES
A mobile/tablet-optimized MES (Manufacturing Execution System) frontend for shop-floor workers — a React-based hybrid app designed to handle the entire manufacturing flow on site, from inbound to production, quality, and outbound.
Overview
DongjinMES is an MES (Manufacturing Execution System) client built to digitize the production floor of a manufacturer.
It's designed so that workers move around the floor with tablets and phones — not a PC — to perform inbound inspection, production reporting, quality checks, and outbound processing in real time.
By packaging the web app into an Android native app with Capacitor, it adopts a hybrid strategy that runs web and native from a single React codebase.
On this project, Silmaril was responsible for the frontend development.
Role & Contributions
- Owned frontend development end to end — feature design, implementation, API integration, and native builds.
- Built roughly 31,000 lines of TypeScript/React across 38 pages and 24 API modules.
- Modularized the full manufacturing flow (inbound → production → quality → outbound) into seven domains.
- Packaged the web app into an Android native app with Capacitor.
- Applied a hybrid strategy running responsive web and the native app from a single React codebase.
Key Features
Inbound
Inbound registration, quantity entry, label-print settings, and inbound history.
Outbound
Barcode-scan-based outbound, quantity processing, and outbound history.
Production
Work-order lookup, input-item management, and production/inspection reporting, linked to BOM and LOT tracking.
Quality
A three-stage inspection workflow: incoming, in-process, and shipping inspection.
Maintenance & Equipment
Equipment checks and maintenance-history management.
Operation Log
Operation records and notes on anomalies.
Notifications
FCM push notifications and notification history.
Engineering Highlights
Dev/Publishing-Split Monorepo
We split apps/ (API-integrated development) and pages/ (pure publishing) into two workspaces, each with its own shared/. Publishers and developers work in parallel without stepping on each other, and identical path aliases (@components, @hooks, …) on both sides minimize the cost of moving code.
JWT Auto-Expiry API Client
On top of Axios interceptors, we built a layer that periodically detects token expiry (setInterval) and refreshes automatically. An isRefreshing flag prevents duplicate refreshes from simultaneous 401s, and a color-coded request/response debug logger speeds up on-site debugging.
Consistent API-Layer Abstraction
Across all 24 domains we applied a consistent two-tier pattern — endpoints (pure API functions) → hooks/api (React custom hooks). Components focus on business data while the hooks encapsulate loading, error, and refetch logic.
Shop-Floor-Friendly Mobile UX
We designed 20-plus reusable modals (numeric keypad, search-select, date picker, quantity input, …), handled iPhone notch/home-indicator safe areas, and applied three responsive breakpoints from mobile (375px) to landscape tablet (851px+) — with large touch targets and keypad-centric interaction usable even with gloves on.
Web → Native Hybrid Build Pipeline
We set up build scripts (cap:build, copy-static) that sync Vite build output into Capacitor, automating everything from web build to Android app packaging in a single command.
Tech Stack
Impact
- Unified the full manufacturing flow (inbound → production → quality → outbound) into a single mobile app, digitizing paper-based work on the floor.
- Runs web and the Android app from a single codebase, cutting maintenance cost.
- Established consistent per-domain API/component patterns, ensuring extensibility for new features.