Toshiki Matsukuma

State machine control for translation validation process

Designed a 9-state state machine to control the translation check to re-translation loop. By separating state transition logic from business logic, achieved a loosely coupled structure where changes to branching conditions do not affect other steps

Immutable schema design prioritizing observability

Adopted an approach of recording all step results as immutable data in the database. When translation accuracy issues occur, root causes can be analyzed via SQL, and the data can be directly leveraged for future AI model improvements. Processing status can be determined with a simple DB SELECT, reducing the burden on both developers for operational verification and business stakeholders for translation quality checks

Fault-tolerant design with idempotent Celery tasks

Implemented each state transition step as an idempotent Celery task. With exponential backoff + jitter retry configuration, API polling portions can also be safely retried. Even if a container crashes and the Redis queue is lost, processing can be resumed by restoring queue information from the database state

Testing strategy informed by generative AI (agent-browser) non-deterministic behavior

Rather than having AI perform unstructured manual testing, formulated a phased test automation approach: (1) systematize manual testing with test specifications first, (2) migrate to deterministic E2E and component tests, (3) leverage agent-browser solely for generating deterministic E2E test code rather than manual testing

Testing strategy for OnlyOffice editor (Canvas implementation) tightly-coupled UI

Determined that faking the OnlyOffice editor would reduce test effectiveness. Since E2E tests relying on Canvas DOM relative positioning tend to be unstable, honestly decided to limit OnlyOffice tightly-coupled sections to manual testing only

Adoption of 3-layer UseCase/Repository/Domain architecture

Separated translation validation logic into three layers: UseCase (business flow control), Repository (data access abstraction), and Domain (domain model/validation). By confining generative AI calls to the UseCase layer, limited the impact scope when changing AI models

Schema design for persisting generative AI decisions to database

Adopted a design that persists all decisions made by generative AI at each validation step (translation quality scores, re-translation necessity, terminology correction suggestions) as database records. Established a data accumulation foundation for future AI model accuracy comparisons and prompt improvements

Design of a 'near-exact match' approach — neither full-text search nor exact match

PostgreSQL full-text search (tsvector) produced excessive hits due to Japanese particle and punctuation differences, while exact match caused frequent search misses due to notation variations. Designed an intermediate approach that applies normalization (punctuation removal, whitespace standardization, particle pattern tolerance) before string comparison, balancing precision and recall

Adopting asyncio event loop integration pattern within Celery synchronous workers

Adopted a pattern of launching an event loop via asyncio.run() within tasks while maintaining Celery's synchronous worker (prefork) model. The alternative of converting Celery itself to async workers was rejected due to high ecosystem compatibility risks, and ThreadPoolExecutor was rejected because threads would be wastefully occupied during I/O waits

Reducing search space through a staged matching strategy

Adopted a strategy of sequentially executing matching between source text and document structure (paragraphs, cells, list items) in three stages: exact match, normalized match, and partial match. By excluding locations confirmed in earlier stages from the search space, reduced computational complexity while maintaining accuracy

Selecting Vite + Biome (migrating from webpack + ESLint/Prettier)

Migrated the existing webpack-based build environment to Vite and consolidated ESLint+Prettier into Biome. Significantly improved development iteration speed through Vite's hot reload performance and Biome's fast lint/format capabilities

Unifying Node.js version management with Volta

Resolved the issue of sporadic build errors caused by Node.js version mismatches across the team by introducing Volta. Pinned the version at the project root to eliminate environment discrepancies between members

Mock auto-generation pipeline using OpenAPI specification as Single Source of Truth

Designed a pipeline using the OpenAPI specification auto-generated by FastAPI as the sole source of truth, generating TypeScript type definitions and API clients via Orval and mock handlers via MSW. Since manual mock writing makes it difficult to keep up with API changes, auto-generation from the specification simultaneously ensures type safety and mock freshness

Adopting GHCR pull-based deployment (migrating from manual SSH+SCP approach)

Migrated from a deployment approach where developers SSH into the server and SCP upload files, to a pull-based deployment where images are pushed to GHCR and the production server pulls them via cron. Ensured deployment reproducibility with instant rollback capability through image tag switching

GHCR visibility, permissions, and image management design

Managed image visibility at the Organization level in GitHub Container Registry, set up required permissions for production server pulls (Personal Access Token + read:packages scope), and designed image tag naming conventions

Externalizing OnlyOffice configuration via script injection

Since directly mounting OnlyOffice configuration files causes compatibility issues during version upgrades, adopted an approach of dynamically generating configuration files from environment variables via an entrypoint script at Docker startup. Made TLS certificate paths and CORS origins switchable via environment variables

Standardizing environment setup procedures via Docker Compose integration

Consolidated Docker Compose network configuration, environment variable templates, and connection verification procedures for connecting local React+Python containers with remote server PHP+OnlyOffice into a single document. Aimed to enable new members to reproduce the E2E environment by following the documentation

Clear boundary between automatable and manual testing areas

Since stable E2E testing of operations dependent on OnlyOffice editor Canvas elements is difficult with Playwright, divided test targets into 'translation workflow operation flows and API integration' and 'document operations within OnlyOffice,' with only the former covered by E2E tests

Claude Code integration of distributed logs via MCP server

Built an MCP server enabling cross-container log search from Claude Code across React, Python, and Celery containers. Previously, logs had to be checked individually via docker logs + grep, but MCP tooling enabled log search and filtering from within Claude Code conversations

Storybook Story auto-generation via agent-browser

Built a sub-agent that auto-generates Storybook Stories from existing React components. agent-browser analyzes component implementations and auto-generates Story files covering comprehensive props and state patterns, accelerating UI catalog development

Low-effort RAG construction using NotebookLM + markitdown

Adopted an approach of leveraging Google's NotebookLM by converting internal documents (PDF/Word/Excel) to text with markitdown and ingesting them. Minimized costs by utilizing existing SaaS rather than building a custom RAG system

Quantifying legacy code quality with SonarQube

Used SonarQube for static analysis of the entire codebase, quantitatively measuring bugs, code smells, duplication rate, and test coverage. Prepared data enabling objective assessment of modification risks

Proposing modification priorities based on quantitative data

Organized static analysis results by module, mapping high-risk areas and their impact scopes. Proposed modification priorities based on quantitative evidence

Strategic selection support via 3-option comparison framework

Created a matrix comparing 3 options across 7 evaluation axes (development risk, cost, timeline, quality assurance, operational impact, extensibility, ROI), and visualized the decision flow in a decision tree format

Proposing a low-risk improvement approach via React browser extension

Proposed an approach of overlaying a React UI onto legacy screens as a Chrome extension. Designed a PoC implementing features such as hierarchical discount master dropdowns on the frontend without modifying the existing database or backend logic

MECE x Issue Tree approach for structuring 100 hypotheses

Combined MECE (Mutually Exclusive, Collectively Exhaustive) with Issue Tree methodology, comprehensively enumerating and evaluating 100 hypotheses using 5-axis quantitative scoring (release velocity contribution, bug rate contribution, execution feasibility, measurability, lead time)

Priority ordering of 8 major challenges with organizational structure mapping

Based on contribution to the top-priority issue 'declining delivery of existing applications,' deep-dived into 3 challenges directly tied to implementers and organized the remaining 5 by stakeholder. Reordered all 8 challenges by importance

Objectifying initiative priorities via 5-axis weighted scoring

Designed a scoring function with 5 weighted axes: Q contribution (0.1), C contribution (0.1), D contribution (0.4), monetary cost (0.1), and required effort (0.3). Configured weight distribution to emphasize D (Delivery) contribution and required effort

6-phase x 3-week phased rollout roadmap design

Auto-mapped score rankings to phase numbers using RANK.EQ formula, auto-generating a 6-phase x 3-week Gantt chart. Placed 4-5 initiatives in each phase, with prior phase outcomes serving as prerequisites for subsequent phases in a staged rollout

Two-part executive proposal design (talent optimization + ticket platform redesign)

Designed materials as a 2-part structure: 'Development Organization Talent Optimization Proposal for AI Translation Business' (23 slides, overall picture) and 'QCD Improvement Through Ticket Management Platform Redesign' (10 slides, deep-dive)

Jira unified platform proposal with tool comparison for decision support

Created a comparison table evaluating 4 options (Notion, Planio, Notion+Planio hybrid, Jira) across 5 axes: ticket structure flexibility, cross-department collaboration, UI/UX, workflow design, and tool integration. Recommended Jira + Jira Service Management

Adopting day-ahead batch materialization (EventBridge+SQS)

Adopted day-ahead batch materialization using EventBridge+SQS+NestJS SQS Consumer

Materialized/virtual instance merge approach using generate_series + UNION ALL

Expanded dates with PostgreSQL generate_series, restored 20+ columns from template JSON definitions, then deduplicated with DISTINCT ON after UNION ALL with materialized records

Integrating 3 time model types in a single model

Prioritizing compatibility with the existing system, adopted a design integrating 3 time model types (date-only, with time, duration-specified) in a single model. Documented an extension design incorporating the timeModel concept in the template for future separation

Adopting RBAC+ReBAC hybrid ACL model

Adopted RBAC+ReBAC hybrid (future ABAC-extensible) for the DB layer, with a 3-phase staged rollout design for the UI layer

Deny-by-default + template-based permission evaluation

Default deny; if any explicit deny exists, deny; otherwise if any allow exists, allow; if neither, deny — a 3-stage evaluation

Optional hierarchy inheritance via scopeType+inheritChildren

Added an inheritance flag to per-scope role assignments, making inheritance toggle selectable at role assignment time

Eliminating unnecessary re-renders with React.memo + useMemo

Visualized component tree re-renders using React DevTools Profiler, then eliminated unnecessary re-renders with React.memo, useMemo, and useCallback. Achieved over 70% render time reduction

Decision to build calendar UI from scratch

Built the calendar UI from zero using React+CSS without library dependencies. Designed to accept variable day counts (3-day/4-day/weekly, etc.) as external parameters, ensuring the layout does not break at any day-count width

Drag-and-drop date changes and incremental save integration using Apollo Client as SSoT

Designed Apollo Client cache as the Single Source of Truth (SSoT). Built a mechanism where the calendar reactively re-renders whenever the Apollo cache is updated — whether through D&D date changes or incremental saves from the edit modal

Responsive calendar UI with CSS scroll snap for mobile optimization

Adopted a design that switches to a significantly different UI on mobile compared to desktop, with a slide-in task list on date tap. Applied CSS scroll snap to ensure scrolling always snaps to date boundaries, preventing stops at intermediate positions

Adopting field-level onBlur incremental save (rejecting form-wide batch save)

Adopted an incremental save approach where each field has an independent react-hook-form instance, performing an isEqual diff check on onBlur events and immediately sending a GraphQL mutation

RPC-style approach encapsulating field changes as command data

Structured each field change as command data, assigned UUIDs, and sent to the backend in an RPC-style pattern. Type-defined the changeable field sets per resource type, treating change operations as serializable data

Intern mentoring and code review-driven team quality improvement

Actively conducted code reviews, mentoring intern members through feedback. Adopted an OJT approach of practically conveying coding conventions and design patterns through the review process

Single point of contact with backend team and orchestrator-style management

Personally discovered all B2C application specifications in a short period and conducted thorough 1-on-1 alignment sessions with the backend team lead. After consensus, held onboarding meetings for B2C team members to explain all specifications. Functioned as a one-stop window, consolidating team questions and resolving them with the backend team

Task decomposition, dependency mapping, and member-strengths-based assignment

Decomposed specifications into tasks, clarified dependencies, and created Jira tickets. Assigned tickets based on member strengths, weaknesses, skill levels, and preferences. Proactively took on items that were single points of failure (critical path) in task dependency chains

Implementing 4 B2C form flows on a shared DynamicForm foundation

Adopted a design centered on form specification definition classes, sharing common useForm hooks, input component libraries, and validation systems, while individually defining only page structure, submission targets, and parameter differences per flow

Multi-page form page-level validation and transition control

Managed page-level validation state with useFormState while converting between URL page indices (1-based) and array indices (0-based). Executed trigger() at page scope to block navigation to unvalidated pages

Dynamic form validation design using the Specification pattern

Adopted the Specification pattern (from Domain-Driven Design) to implement a composable design where conditions are treated as objects

Cross-field validation foundation with Specification pattern x Yup custom methods

Added 50+ custom methods to Yup schemas, applied uniformly across all schema types. Declaratively described dependent fields via metadata, automatically building the dependency graph

Separating validation into a shared package in pnpm monorepo

Adopted a 3-package structure with pnpm workspace: B2B, B2C, and shared. Placed the validation foundation in the shared package for re-export to B2B/B2C. Centrally managed GraphQL-derived enum definitions via an enum registry

Reload-free reactive option filtering via parent-child field linkage

Used useWatch() in parent-child linked components to reactively observe parent field value changes. Passed filter functions to child components and filtered options via useMemo. A selected value resetter automatically clears invalidated selections

Adopting independent widget data-fetching architecture

Adopted an architecture where each widget independently fetches its data. Used Apollo Client useReadQuery to complete Suspense-compatible data fetching within each widget component

Full-scratch implementation of custom Masonry grid layout

Implemented a custom grid placement algorithm. Tracked current row indices of left and right columns, placing widgets in the shorter column to achieve the Masonry effect

Widget drag-and-drop reordering with dnd-kit v6

Adopted @dnd-kit/core v6.1.0 + @dnd-kit/sortable v8.0.0. Managed lists with SortableContext and controlled D&D state per widget with the useSortable hook. Implemented DragOverlay for in-motion preview display

VRT pipeline design with Storybook v8 + storycap + reg-suit + S3

Built the Storybook environment with @storybook/react-vite v8.1.5, automated screenshot capture with storycap v5.0.0, pixel diff comparison with reg-suit (0.1% threshold), result publishing to AWS S3, and a diff review flow via GitHub PR notifications

Parallel B2B/B2C VRT execution via GitHub Actions matrix strategy

Designed a 2-stage pipeline where GitHub Actions matrix strategy captures B2B/B2C screenshots in parallel with storycap and uploads as artifacts, with a subsequent VRT job integrating and running reg-suit