ENGINEERING ARCHIVE / 04 CASES

From production reporting to telecom interfaces

Four projects from my earlier frontend work: what the systems did, the pages I worked on and the technical choices recorded in my CV.

Historical project experience · Organized 27 October 2026

01

Production feedback · Desktop

VueVuexVue RouterWebpackES6Element UIvw

Business context

A reporting interface for production-process feedback, including printing-sheet and post-processing feedback.

My contribution

Worked within a team on overall page layout, cross-browser consistency, selected interactions and project integration; refined page structure and functionality.

Implementation recorded in the CV

  • Overall page layout and interface integration
  • Browser consistency and interaction refinements
Looking back: design questions and checks

A shared layout is only part of consistency. When revisiting a reporting interface, check whether filters, table state and error feedback stay aligned during navigation.

  • Test long table values, empty results and failed requests separately.
  • Keep reusable layout components separate from business-specific state.

These are retrospective learning questions, not claims that the original system implemented or passed these checks.

Read: async interface races
02

Production feedback · Mobile

HTML5CSS3remtransform / animationLocalStorageSwiper

Business context

A mobile interface for workers to report progress, choose a machine and access scan-based queries in printing workflows.

My contribution

Implemented page layouts, page transitions and mobile presentation.

Implementation recorded in the CV

  • Adapted layouts with rem units
  • Page transitions, local caching and swipe interactions
Looking back: design questions and checks

Local caching and successful submission are different states. A cached form should not look like a confirmed production record; the old CV records LocalStorage use but does not establish an offline synchronization mechanism.

  • Check small screens, touch targets, keyboard obstruction and reduced-motion settings.
  • Define cache expiry and distinguish pending input from server-confirmed data.

These are retrospective learning questions, not claims that the original system implemented or passed these checks.

Read: accessible interactions
03

Siyue administration system

Vue CLIWebpackElement UIvue-resource

Business context

A web administration system for a printing factory, covering production feedback, shipment management, receipt statistics and quotation calculation.

My contribution

Primarily responsible for page layout and rendering. The business scope describes the system as a whole, not sole ownership of every module.

Implementation recorded in the CV

  • Modular frontend construction with Vue CLI and Webpack
  • Component-based views and request-driven rendering
Looking back: design questions and checks

A reusable admin page needs explicit field rules and request states, not just matching table styles. A schema-driven form is a useful separate exercise for examining that boundary.

  • List field types, defaults and validation rules before extracting shared forms.
  • Separate loading, empty, validation-error and request-error states.

These are retrospective learning questions, not claims that the original system implemented or passed these checks.

Try a separate form-design learning demo
04

Fixed-network service platform

Fish frameworkHandlebars templatesEvent listeners

Business context

A customized telecom administration platform for overseas customers, with account opening, service suspension, relocation, cashier and order-preview interfaces.

My contribution

Implemented frontend page logic for the Bundle module and account-opening, suspension and relocation pages.

Implementation recorded in the CV

  • Business-page logic and product-list rendering
  • Navigation and interactions through local event listeners
Looking back: design questions and checks

A visible action is not necessarily a valid business transition. State-based UI exercises help describe which actions are permitted and how stale responses should be handled; the historical CV does not document a specific state-machine implementation.

  • State each action’s preconditions, expected response and failure display.
  • Check listener cleanup when views are mounted and removed repeatedly.

These are retrospective learning questions, not claims that the original system implemented or passed these checks.

Try a separate React workflow demo

Source and reading guide

Project descriptions from a historical CV supplied by the author. No original source, screenshots or measured outcomes were supplied for these four projects.

Linked notes and interactive demos are separate public learning materials. They illustrate related engineering questions and are not screenshots, source code or reconstructions of the employer systems.

Original technology names are retained as historical context, not as a recommended stack for new projects. The CV gives no per-project dates or measured performance gains, so none are added here.