Back Office, Loplat Manager

An internal back office for classifying and reviewing collected WiFi signals and store information, and managing inquiries and requests from users of the location data collection app.

This was the first project I worked on after joining. The existing Vue-based back office had issues including uncontrolled two-way bindings, high inter-component coupling, mixed style code and business logic, and insufficient documentation with no traceable history. I migrated it to React. I also proposed the first adoption of TypeScript to improve developer experience.

Internal Review

• Received positive feedback: "Features were well implemented despite the lack of documented company history, and documentation was thorough."
• "Did their best in a situation where there was no dedicated planner or manager."
• "Went from learning TypeScript to actual adoption in a short time, achieving significant improvements."

Period

Aug 2019 – Oct 2021

Tech Stack

React, Typescript, MobX, Redux, Redux-Saga, ESLint, Prettier, styled-components, storybook, Firebase hosting

Work

• Developed features for reviewing collected WiFi signals and store data, assigning store data collection tasks to staff, and managing rewards, announcements, and credits for CashPlace service users.

Flux Architecture

• Migrated Vue's two-way binding logic to a Flux architecture.

Presentational and Container Component Pattern

• Used Presentational and Container Component Pattern instead of Atomic Design.
  • Specifically, structured code into container (business logic) and foundation (UI based on props).
  • Decided against Atomic Design due to unclear boundaries between atom and molecule, which can cause confusion. The cost of reaching consensus on boundaries is itself a cost, and even with consensus, it's not meaningfully productive. Reference (opens in a new tab)
• Built reusable components that are not dependent on parent components.
  • The original table component handled data formatting internally with conditional logic for each page's different data formats. Refactored so that the parent passes the necessary format functions, rather than having the child component specify data formatting. Experienced improved maintainability and readability when breaking large logic into small pure functions.

TypeScript Adoption

• Proposed and adopted TypeScript for the first time to ensure API consistency. Also conducted a seminar to improve colleagues' TypeScript understanding and usage.
• Achieved improved developer experience by maintaining consistent and stable data types from API responses to UI rendering.