🤖 Explore AI Agent Playbook, a tool I built to manage project records and skills across AI coding tools.

Work

Business interfaces built with React and TypeScript. These projects cover UI state, data flow and performance, with API and mobile integrations where needed.

01New developmentWeb / AI2026.09 ~ 2026.10

AI Document and Data Analysis Platform

Built a full-stack platform that searches documents and answers questions using Gemma 4. Improved how it retrieves supporting evidence and evaluates the answers it produces.

Full-stack development

Search and answer quality, processing performance

  • React
  • TypeScript
  • Tailwind CSS
  • Vite
  • TanStack Query
  • Zustand
  • Python
  • Django
  • MariaDB
  • SQLGlot
  • Gemma 4
  • Ragas
  • tokenizers
  • Vitest

A document-grounded AI feature needed trustworthy evaluations as well as useful answers. Long answers exceeded the evaluation input limit, and the evaluator sometimes rewrote statements in ways that changed what was being assessed.

  1. Fix the evaluation targets and validate the verdicts
    Decision
    Fixed the target statements on the server for Ragas evaluation and matched the returned evaluation results by statement ID. Batched long inputs and checked quotations, supporting evidence, and answer coverage separately.
    Checks
    Completed evaluation of 25 claims extracted from an answer about a real document in five batches. Checks reject missing or duplicate IDs and invalid response types before malformed verdicts can be stored as valid results.
  2. Separate model latency from application overhead
    Decision
    Profiled internal processing with fixed model responses, then removed repeated token counting and reused document pages already processed within the request.
    Checks
    After warmup, 20 runs before and after the change showed median internal processing fall from 2,969ms to 672ms. Model call counts stayed unchanged.

Long-answer evaluations can finish, and repeated computation causes less internal delay. Answers appear first, followed by asynchronous Ragas evaluation, so users do not wait for evaluation to finish.

Median internal application processing time
2,969ms → 672ms
Compared application processing with fixed model responses: 20 runs per condition after warm-up, excluding model and network wait time.
Completed evaluation of a long answer within the input limit
25 items evaluated
Evaluated a Gemma 4 answer about a real document in 5 batches. The largest request used 8,164 tokens, below the 8,192-token input limit.
No need to wait for quality evaluation
Display the answer first, then evaluate it separately
Users can read the answer before Ragas finishes. The next evaluation request is deferred while a new user question is being processed.

Sending only the matched passage to the model left out conditions and exceptions in nearby paragraphs. Questions with several parts sometimes returned source text instead of explanations, even when some parts could be answered. Evaluating long answers exceeded the model input limit, while repeated text-length calculations also delayed document analysis.

  • A passage needed the surrounding paragraphs and referenced tables to be understood correctly. I included that context and kept track of which document supplied each piece of evidence.
  • An exact quotation, an answer supported by the document and a response covering every part of the question are different checks. I tested them separately instead of treating one score as proof of all three.
  • The evaluation model sometimes changed the statements it was asked to repeat. I assigned an ID to each fixed target statement and matched the returned evaluation results to the original items.
  • To locate application bottlenecks, I needed to separate local processing from model response time. I used fixed model responses and compared the time spent on repeated calculations.
  • Users did not need to wait for quality evaluation to read an answer that was already complete. I returned the answer first and evaluated it separately, deferring the next evaluation request while a new question was being processed.
  • Used SQLGlot to compare query and aggregation conditions before and after AI-generated SQL repairs. Stopped execution when conditions changed or could not be confirmed as preserved.
  • Expanded retrieval to include the paragraphs surrounding a match and the sections or tables it referenced. Reviewed missing evidence again and supplied original text and sources when generating the final answer.
  • Ragas checks whether an answer is supported by the document, but long answers exceeded the model input limit. I split the content into batches and matched the result IDs to the original items, checking for missing or duplicate verdicts before calculating the score.
  • Fixed requests for explanations being misclassified as requests for tables. Collected an answer and evidence IDs for each part of the question, then copied quotations directly from the corresponding source text. Kept supported answers and marked only the parts for which evidence was missing.
  • Removed repeated token counting when merging tables and reused page-analysis results within the same request. Saved and displayed the answer first, then ran Ragas evaluation as a separate task so users did not have to wait for it to finish.
  • Included surrounding dialogue when analyzing media to recover omitted subjects and reduce unnecessary abstention. Built navigation to the source document page or playback segment so users could inspect the evidence themselves.
  • Built React and TypeScript interfaces, Django APIs, MariaDB storage and queries, document processing and Gemma 4 integration. Checked generated SQL against the user-selected data scope and validated table values, units and the source of each row.
  • Connected the model tokenizer to count tokens in the actual request, including its output schema. Split long documents at sentence boundaries and tracked evidence omitted from final answer generation as unreviewed.
  • Used Ragas Faithfulness to extract statements from an answer and calculate the proportion supported by document evidence. Ran evaluation in a separate process and discarded previous results when the answer, evidence or settings changed.
  • Combined live-model checks with replay of saved failure responses. Separate tests with fixed responses checked for recurring failures, and I verified document and media processing independently.
  • Used fixed model responses and measured 20 runs before and after the change, following warm-up. Median application processing fell from 2,969ms → 672ms for document analysis and 485ms → 312ms for selected-document search. Normal-path model-call counts remained unchanged.
  • Extracted 25 items from a live long answer and evaluated them in 5 batches. The largest input was 8,164 tokens, with 6 calls including statement extraction. Automated tests also checked rejection of missing IDs, duplicate IDs and verdicts with invalid data types.
  • Confirmed that live answers appeared before evaluation completed. Checked that the next evaluation request was deferred during a new question and that completed evaluation stages could be reused.
  • Compared live answers with the source text and tested altered quotations, mismatched units and questions without supporting evidence. Browser checks covered source navigation, media playback and retention of input and selections.
02Build and feature integrationWeb / API / Android2026.07 ~ 2026.09

Settlement ERP and Mobile App

Built an ERP for vehicle, driver and settlement records and connected notifications, documents and inquiries to a mobile app.

Full-stack development

ERP web and server development, with mobile business features excluding the chat system

Web / API

  • React
  • TypeScript
  • Tailwind CSS
  • Vite
  • React Router
  • Zustand
  • Spring Boot
  • MyBatis
  • MariaDB
  • Vitest

Web / API / Android

  • React
  • TypeScript
  • TanStack Query
  • TanStack Router
  • Spring Boot
  • MariaDB
  • Flutter
  • Dart
  • Firebase Cloud Messaging

Web / API · 2026.07 ~ 2026.09

Settlement Operations Platform

A later save must not overwrite another operator’s changes to settlement data. Rejecting a stale save also should not discard what the user has just entered.

  1. Block stale saves and let users resolve the differences
    Decision
    The server rejects outdated versions while the screen retains the draft. Users compare the original, latest server, and edited values, then confirm their choices through a separate save.
    Checks
    In development, a separate API request updated the record first. Confirmed that a browser save returning 409 preserved both the draft and the latest database values, then checked the resolved save against the database and change history.
  2. Preserve Excel validation through the save step
    Decision
    Kept validated data on the server and rechecked permissions and references before persistence. An intermediate failure rolls back the whole transaction; a repeated save request returns its existing result.
    Checks
    Reproduced intermediate failures, retries, and concurrent requests in an isolated MariaDB environment to check for partial writes and duplicate application of the same request.

Separated current assignments from finalized settlement history and implemented recovery paths for edit conflicts and failed batch saves. Verification covered the user’s draft and change history as well as save success.

Web / API / Android · 2026.07 ~ 2026.09

ERP-connected Mobile Workflow App

The ERP-connected mobile app needed to retain the latest state despite delayed notifications and repeated requests. Its PDF download path also had to work beyond the browser environment.

  1. Separate notification content from read receipts
    Decision
    Version and deletion checks prevent a late creation event from reviving a deleted notification. Read receipts are stored separately; a single UPSERT replaces an update-then-insert sequence while preserving the first seen time.
    Checks
    Reproduced a receipt deadlock in isolated MariaDB, then reran concurrent requests. Reversed and repeated notification events to verify that the latest content and receipt state were retained.
  2. Carry file access safely into the mobile environment
    Decision
    Replaced browser-only blob URLs with short-lived signed URLs issued when the user requests a download. Access is checked at issuance and download, without putting login tokens in file URLs.
    Checks
    Compared a PDF downloaded in Chrome with the original by hash and inspected the values passed to the native bridge. On an Android emulator, checked notification tap → notice list → notice body navigation.

Connected inquiry handling, notifications and PDF downloads to the ERP, including current notification state and download access checks in the mobile app.

Web / API

Settlement Operations Platform
2026.07 ~ 2026.09ERP web application, key server APIs and data persistence

Table edits and Excel imports needed to avoid partial or duplicate writes. An outdated screen could overwrite another user's changes, yet rejecting the save should not discard the current user's input. Historical settlements also needed to remain intact after vehicle assignments or billing sources changed.

  • Stored the complete validated Excel data on the server and checked permissions and related records again before committing. Rolled back the entire batch on failure and returned the existing result when the same request was repeated.
  • Compared the version read by the user with the current version to reject outdated saves. Kept the user's edits on screen and let them compare the original, latest and edited values before choosing what to save.
  • Stored current assignments separately from transaction-time parties and amounts. Changes to loan and insurance records updated draft or rejected charges, while approved or settled amounts were preserved and adjusted in later records.
  • Built shared tables with keyboard cell navigation and selection dialogs, retaining edits in rows that failed to save.
  • Built Excel previews with invalid-row and cell correction followed by server revalidation. Saved the batch in one transaction to avoid partial writes and returned the existing result for repeated requests.
  • Added a comparison of current records and retained edits after a conflicting save. Kept choosing values separate from submitting them so comparison alone could not change stored data.
  • Separated current vehicle and driver assignments from historical transaction records, preventing source corrections from overwriting finalized settlement amounts.
  • Reworked administrator logs to show the affected records, changes and reasons a save failed.
  • Saved a change through a separate request, then reproduced rejection of a save from an older screen. Combined server version checks with draft retention, including another conflict check if data changed during comparison.
  • Tested batch failures and repeated requests in an isolated MariaDB database. For representative workflows, compared browser behavior with API responses, persisted values and activity logs.
  • Kept repayment schedules unchanged when editing fields such as loan classification that did not affect calculation terms. Removed unnecessary queries and recalculation, then compared behavior and processing time using the same initial data.
  • Verified full rollback after a failed write in isolated MariaDB, and checked that concurrent commits and repeated requests did not create duplicate records.
  • In the development environment, verified that a save from an outdated screen was rejected after another user updated the record. Compared browser, API and database results after retaining input, reviewing current values and saving again.
  • Verified that historical settlement amounts remained intact after assignment changes in the development database. Settlement persistence was delivered to the development environment, and administrators use the revised activity-log screen.

Web / API / Android

ERP-connected Mobile Workflow App
2026.07 ~ 2026.09Business screens, server APIs and Flutter Android integration, excluding the chat system

Old notifications could remain visible after ERP records were edited or deleted. Concurrent receipt-save requests could fail because of database lock conflicts, and browser-generated file URLs could not be passed directly to Android downloads. Late inquiry-completion requests also needed to preserve work already completed by another administrator.

  • Managed notification content separately from each user's read state. Checked source versions and deletion status before applying changes, preserving read receipts when content was updated.
  • Replaced the update-then-insert receipt flow with a single UPSERT. Preserved the first display and read timestamps when requests were repeated.
  • Used short-lived signed URLs dedicated to PDF downloads. Checked the current account and document permissions both when issuing a URL and when serving the file.
  • Checked the version and current status before completing an inquiry. Returned a specific reason when it had already been handled and retained unsaved input on screen.
  • Applied only current notification changes by checking versions and deletion status. Preserved read receipts and refreshed both the list and open details without allowing late requests to recreate deleted items.
  • Saved display and read receipts with a single UPSERT to resolve concurrent write conflicts. Kept receipts separate for each account and notification and preserved their first timestamps.
  • Connected PDF downloads through file-specific signed URLs, checking signatures, expiry and current access rights when serving each file. Kept images in a preview flow.
  • Checked inquiry versions and completion status to reject duplicate completion. Prevented repeated submission and completion events from creating duplicate ERP activity records.
  • Connected Flutter notification handling to WebView navigation so users could open the relevant business content from a system notification.
  • Tested notification changes arriving out of order or more than once. Checked that an old creation request could not restore a deleted notification and that an open detail view refreshed after a change.
  • Reproduced the receipt-save lock conflict in isolated MariaDB. After replacing the two-step write with one database operation, checked concurrent saves and preservation of the original timestamps.
  • Compared a PDF downloaded in the browser with its source file and inspected the URL and request data passed to Android downloads.
  • Verified inquiry submission, administrator completion and status updates in local browser sessions. Used an Android emulator to check system notification delivery and navigation after tapping a notification.
  • Reproduced the original receipt-save failure in isolated MariaDB, then verified concurrent display and read requests and preservation of first timestamps. Also tested out-of-order notification changes and repeated delivery.
  • Matched a PDF downloaded in Chrome to its source hash and inspected the URL and values passed to the Android download request.
  • Verified inquiry submission, administrator completion and mobile status updates in local browser sessions. Late completion requests preserved the existing result, and repeated events did not create duplicate ERP records.
  • Delivered the related features to the development environment. On an Android emulator, verified actual system notification delivery and navigation to the relevant list and content.
03BuildWeb / Android2026.04 ~ 2026.06

Logistics Operations Web and Printing App

I built a logistics web app and Android printing app spanning search, reservations, Excel imports and PC/Android label printing.

Logistics web and printing app development

Complete frontend and Android printing app development

Web

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • Zustand
  • XLSX
  • Vitest

Android

  • Expo
  • React Native
  • Expo Router
  • WebView
  • Android native module
  • TypeScript
  • Bluetooth

Web · 2026.04 ~ 2026.06

Logistics Operations Web

The operations web app loaded screens and Excel code that were unnecessary at startup. I separated code needed on entry from code needed when a user starts a feature to reduce the initial download size.

  1. Use bundle analysis to find and split unnecessary startup code
    Decision
    Used bundle analysis to identify code that was not needed on entry. Loaded page code when users entered each screen and Excel libraries when they started an upload or download.
    Checks
    In a standard production build, initial JavaScript fell from 2,405.50kB to 616.60kB, or 815.10kB to 204.38kB with gzip. Checked that navigation, data queries, Excel operations, and PC label printing still worked after the change.
  2. Check physical output separately from the preview
    Decision
    Did not treat the on-screen layout as proof of print quality. Wrapped long addresses to the available width and adjusted type size and spacing.
    Checks
    Printed physical labels to find and correct clipped addresses and overlapping fields.

Reduced the code required at entry and refined the path from selected operational data to physical labels.

Android · 2026.04 ~ 2026.06

Mobile Output Bridge App

Android could select a printer but still failed to connect. An SDK acknowledgment also could not establish that a physical label had finished printing.

  1. Trace the connection failure into the SDK
    Decision
    Device logs showed that the SDK stopped device discovery during connection. Because that operation also requires scan permission, the app now checks both scan and connection permissions.
    Checks
    Checked the permission prompt, printer connection, and physical label output on an Android 16 device.
  2. Show when a print request has been sent
    Decision
    Displayed “Print request sent” when the SDK accepted the request.
    Checks
    Checked SDK responses and printed labels separately to align the wording with what the app can actually observe.

Connected React Native screens to the Android printer SDK and handled permission and connection failures separately.

Initial JavaScript file size
2,405.50 → 616.60 kB
About 74% smaller in the May 2026 build outputs
Gzip-compressed size
815.10 → 204.38 kB
About 75% smaller for the compressed initial JavaScript file

Web

Logistics Operations Web
2026.04 ~ 2026.06Complete frontend development

Tables, forms and modals repeated across the business screens and needed a shared implementation. Loading every page and the Excel libraries at startup made the initial JavaScript file large. Addresses could also clip or overlap on printed labels even when the screen preview looked correct.

  • I separated fetched data, input state and print requests, using shared tables, forms and modals.
  • I used bundle analysis to identify code that was unnecessary for the first screen, then loaded it when users opened a page or used an Excel feature.
  • I used a common format for print data from the web, with separate integrations for the PC printer service and the Android Bluetooth printer.
  • I built reservation entry, batch processing, address selection and Excel previews using shared tables, forms and modals.
  • I split pages with React.lazy and loaded spreadsheet libraries when import or export actions started.
  • I converted reservation identifiers and multiple-label API responses into PC and Android print data, with checks for the selected items and printer connection.
  • I wrapped long PC-label addresses by measured text width and adjusted font sizes and line spacing. Changes to the displayed tracking-number format preserved the original barcode data.
  • I separated mock data from API integration to implement loading, empty and error states.
  • I displayed reservations with multiple label numbers in lists and modals, then converted the responses into data for previews and printing.
  • I inspected printed labels to locate clipped or overlapping addresses and adjusted wrapping, font sizes and line spacing.
  • I compared the initial JavaScript file and its gzip-compressed size in the May 2026 build outputs.
  • I checked navigation, data retrieval, Excel processing and PC label printing after introducing lazy loading.

Android

Mobile Output Bridge App
2026.04 ~ 2026.06Android app development

The app needed to pass web print requests to the Android printer SDK and guide users through device selection, permissions, connection and printing. On a physical device, the printer appeared in the list and could be selected, but the connection failed.

  • I kept the business screens on the web and put device communication in a native module.
  • I checked the web request, app permissions, SDK connection and physical output separately to locate failures.
  • I described completion as a print request being sent so that an SDK acknowledgement was not presented as confirmation of physical printing.
  • I implemented print requests and responses between the WebView bridge and the Android native module.
  • I let users review the print items and printer in the app, with messages for permission, connection and printing errors.
  • I built a diagnostic screen for checking permissions, paired devices, SDK initialization, connection status and test prints separately.
  • I converted label data from the web into the native print format and excluded items without tracking numbers.
  • Logs from an Android 16 device showed that the SDK called a discovery-cancellation API immediately before connecting. That call also required scan permission, so I updated the app to request both BLUETOOTH_SCAN and BLUETOOTH_CONNECT.
  • I checked the permissions and Bluetooth connection, then printed physical labels to verify the fix.
  • I verified permission requests, Bluetooth connection and physical label output on an Android 16 / API 36 device.

Additional Work

Further work in member services, AI tools, API integration, and existing web and mobile apps.

04

Solution feature development and improvementsWeb / Android2026.09

Member and Inquiry Management Web and App

  • Spring MVC
  • Java
  • MyBatis
  • Vue 2
  • MariaDB
  • Android
  • Kotlin

Built member search, editing, merging, inquiries and attachments. Checked member roles and authorship on the server to control access and connected file selection and image previews in the Android app.

Different member roles could share the same identifier, so member search and editing needed to distinguish roles. Web file inputs also needed a native picker connection before users could attach files to inquiries in the Android app.

  • Checked role and ownership on the server and reused access conditions across inquiries, answers, and attachments.
  • Handled loading, failures and closing within the member-editing popup so shared popup code could remain unchanged. Kept late responses from a closed popup from changing a newly opened one.
  • Allowed members to edit only permitted fields. Before merging duplicate members, rechecked the data to retain and the linked accounts and records on the server.
  • Checked access to the relevant records when previewing images attached to inquiries and answers.
  • Connected file-picker results to Android WebView and handled cancellation, reselection and return to the attachment list.
  • Separated saved data from parent refresh so quick alert dismissal and late responses did not leave stale values.
  • Connected Android picker cancellation and reselection with draft back-navigation handling.
  • Verified member-data preservation, rollback and concurrent requests in isolated MariaDB.
  • Checked inquiry and attachment behavior in browsers and on Android devices.

05

MaintenanceWeb / Android2026.08

Parcel Delivery App

  • React
  • TypeScript
  • React Native
  • Expo
  • Spring Boot
  • SQLite

Updated map-marker selection, current location and return-to-map behavior. Implemented offline delivery-completion saves, request recovery after app restarts and retries after reconnection.

A lost connection or app restart could discard entered data and pending requests. Requests belonging to a previous account also needed to stay unsent when another user logged in.

  • Saved the delivery-completion details confirmed by the user before sending the request.
  • Matched queued requests to the signed-in user and checked existing server results before retrying.
  • Handled map selection and return after task completion separately. Checked whether the installed app supported the new location feature before calling it.
  • Saved the lists needed for offline work in app storage. Stored delivery-completion requests and selected photos in sequence, then sent them after storage completed.
  • Compared pending requests with completed server records before retrying. Left requests with conflicting results, business errors or unrecoverable photos for manual review.
  • Returned users to their previous map position after task completion and checked support for native location. Aligned recipient and optional-attachment rules between the web interface and server.
  • Kept map group numbers stable across filters and returned users to their previous map position after processing selected work.
  • Distinguished permission denial, disabled location services and timeouts. Apps without the new location feature continued to use the existing web method.
  • Restored the signed-in user and pending requests before sending them after an app restart. Also restored user information for existing sessions so each request could be matched to its owner.
  • Verified saving while offline, restoring after restart and server updates after reconnection on an Android device.

06

MaintenanceWeb2026.08

Legacy Logistics Customer Support Web

  • Java
  • Spring MVC
  • JSP
  • MyBatis
  • jQuery
  • Apache POI

Added distinct messages for parsing, input and network errors in Excel imports. Investigated repeated database queries in bulk imports and proposed changes.

Every Ajax failure used the same message, obscuring input and network errors. Row-by-row queries and response sizes grew with bulk input, so small-file success did not establish safe scaling.

  • Checked parsing success, HTTP success, and business validation separately.
  • Exposed only useful diagnostic fields without internal HTML or raw exceptions.
  • Investigated how database calls and memory usage grew with the number of input rows.
  • Distinguished communication errors, validation failures, timeouts, cancellations and response-parsing errors during file analysis and registration. Displayed the failed stage and elapsed time.
  • Displayed only server messages suitable for users. Excluded internal error pages and exception details and escaped dynamic text so it would not be interpreted as HTML.
  • Identified repeated duplicate-check queries and full index scans, then proposed input limits and batched lookups.
  • The error-message changes were checked locally and built, but were not yet deployed.
  • Confirmed that duplicate-check queries increased with row count; batched lookup remained a proposed improvement.

07

Feature extensionAndroid2026.06 ~ 2026.07

Daily Information App

  • Spring MVC
  • JSP
  • jQuery
  • Java
  • Android

Extended weather, air quality and alerts with public-data APIs. Displayed core information first and cached responses by region and information type. Concurrent requests for the same information shared the lookup already in progress.

Weather information was spread across multiple public-data APIs. Requesting the same data on every screen visit could cause excessive API calls, while one slow API could delay the whole screen.

  • Cached public-data API responses on the server to avoid repeatedly requesting the same data.
  • Separated immediately visible core information from secondary information that could load later.
  • Split fresh and stale cache so limited fallback could be shown when external APIs failed.
  • After a failed refresh, changed an expired no-alert result to unavailable; marked retained active alerts as results from the last successful lookup.
  • Integrated air quality, medium-range forecast and weather alert APIs, with alerts available in a modal.
  • Cached reference data on the server. Held refreshed data temporarily and checked required fields before replacing the existing cache.
  • Used native location first in Android WebView, then stored location and browser fallback.
  • Also improved the diary editor, Android camera and gallery selection, and distance and marker displays on activity maps.
  • Loaded current weather and core forecasts first, then fetched air quality, alerts and daily forecasts separately.
  • Set cache lifetimes by each information type’s update cycle and shared one external lookup result across concurrent requests for the same data.
  • Replaced reference-data cache entries after temporary storage and required-field validation.
  • The cache was scoped to JVM memory in a single Tomcat instance.
  • Checked initial lookup, cache reuse and stale-value fallback on API failure, then deployed the changes to production.

08

Feature extensionAndroid2026.06

Privacy Check App

  • Android
  • Cordova
  • Spring MVC
  • jQuery
  • Java

Built email-breach lookup and deepfake image checks using external APIs. Connected email and image input to inspection requests and results, including image and file selection in the Android app.

The existing app needed email-breach lookup and deepfake image checks. User input had to reach external inspection APIs without exposing API credentials in the app or browser.

  • Kept external lookup responsibility inside a server-side proxy.
  • Returned only the minimum result and state needed by the client UI.
  • Integrated email-breach lookup and deepfake image inspection APIs, connecting user input to inspection requests and results.
  • Validated image format, file size and resolution before submitting the file to the server, then displayed the external API’s results and errors in the interface.
  • Passed Android image and file selections to the WebView so users could run checks within the app.
  • A previous file read could finish after the user selected another image. Checked completed reads against the current selection so an older image would not overwrite the new preview.
  • Separated client input, server proxy, external response, and displayed result in order.
  • Checked WebView file chooser behavior by input source across emulator and real device flows.
  • Checked that real credential values were not present in docs or sample settings.
  • Checked route, file chooser, tab sync, and bridge flows on emulator and real devices.

09

Internal toolTooling2026.04

AI-assisted Project Documentation Web App

  • Node.js
  • TypeScript
  • React
  • AI API
  • xlsx
  • Vitest

Built an internal web tool for drafting and reviewing documents from repositories and project kickoff material. Implemented requirement review, table editing, targeted AI revisions, result storage and document export.

Passing unstructured material directly to a model can mix checked source material with guesses, and small revisions can cause the whole artifact to drift.

  • Collected rule-based scanner output before AI generation.
  • Used workbook JSON as the central model and treated markdown/export as derived output.
  • Kept automation at draft generation while preserving human review through table-based editing.
  • Built screens and server APIs connecting repository and upload collection to generation previews, table editing and export.
  • Made requirements, functional specifications and screen specifications editable in separate sheets. Exported files reflected the edited content.
  • Sent the selected sheets or cells together with their surrounding content. Distinguished revision targets from content to preserve so users could change selected parts without regenerating the whole document.
  • Let users review source material and requirement candidates first. Gated feature and screen-document generation in the UI on the readiness of prerequisite documents.
  • Split generated output into workbook sheets instead of leaving it as one long text block.
  • Scoped revisions to the selected sheet/cell context instead of regenerating the whole artifact.
  • Separated fields AI could organize from decisions reserved for the user and suppressed unsupported placeholders.
  • Checked that revising selected sheets and cells preserved other content and that successful documents remained available after partial generation failures.

10

Feature developmentWeb2026.03 ~ 2026.04

Chart Preview Page

  • React
  • TypeScript
  • Vite
  • Chart.js
  • WebGL/GLSL (OpenGL-style)
  • OGL (WebGL library)
  • MSW
  • Vitest

Built a page for choosing chart data and display settings within a website under development. Showed settings appropriate to each chart type and reflected selected data and options in a Chart.js preview.

A single set of settings exposed invalid options for some chart types. Separate settings and preview state, or recreating charts on each change, made editing results harder to follow.

  • Showed settings appropriate to each chart type and let users choose which axes and values each data field represented.
  • Separated editing-state management from chart-update conditions so changing a setting did not unnecessarily recreate the entire chart.
  • Connected six settings areas to the Chart.js preview and let users drag data fields into chart-axis and value assignments.
  • Reduced unnecessary mixed-chart recreation to lessen preview flicker and scroll movement.
  • Organized data selection, field mapping, chart selection and settings into one editing screen.
  • Added chart direction and density controls, with scrolling or fit-to-view options for larger datasets.
  • Placed help and drag feedback in separate layers and distinguished loading, empty and error states.
  • Implemented editor background modes with WebGL/GLSL fragment shaders and OGL.
  • Checked chart and option changes, panel collapse, field dragging and help overlays.

11

Maintenance and feature additionsAndroid2026.03 ~ 2026.04

Logistics Receiving and Shipping PDA App

  • Android Java
  • Gradle/AGP
  • Scanner SDK

Updated an existing PDA app’s build, storage and update handling. Added receiving filters, quantity entry and QR/barcode scanning.

When operational signing or old build assumptions block local builds, developers cannot verify features. Emulator-passing flows can also fail on field devices because of input timing.

  • Separated deployment signing conditions from whether local development builds could run.
  • Avoided treating build-tool updates and runtime behavior changes as one issue.
  • Separated signing requirements so development builds could run without production signing credentials.
  • Moved update files to app-specific storage and organized version checks, downloads and installation.
  • Added receiving filters and a quantity-entry modal connected to QR and barcode scans. Separated code validation, duplicate handling and quantity rules for existing and new modes to preserve established scan behavior.
  • Displayed external validation failures immediately and guarded empty responses so they did not trigger further app errors.
  • Narrowed build failures by Gradle, JDK, SDK, and signing condition.
  • Checked login, initial data, and scan input as separate stages.
  • Checked development and production build paths with the main entry flow.
  • Checked scan input and logs on a physical PDA to distinguish external validation failures from errors inside the app. Verified unit tests and builds for the scan rules and error handling.

12

MaintenanceAndroid2026.03

Legacy Shipping and Inventory App

  • Android Java
  • Gradle/AGP
  • RxJava
  • FileProvider

Updated a legacy WebView-based Android app for build tools and OS-specific permissions, file access and back navigation. Fixed login and initial synchronization issues.

The legacy Gradle and AGP setup no longer matched current development tools, while applying current SDK policies directly could introduce separate regressions in file access, permissions, services, back APIs, older OS entry, and WebView flows.

  • Did not treat a successful build and runtime compatibility as the same completion criterion.
  • Kept modern API types and OS-specific permission or file behavior behind compatibility helpers instead of repeating checks in screens.
  • Separated login, initial synchronization, WebView navigation, and bridge errors into distinct failure channels.
  • Restored a compilable baseline without rewriting all remaining legacy support dependencies.
  • Isolated direct references to newer Android APIs that could prevent startup on older OS versions. Centralized file access and permission checks so screens did not repeat the same version-specific logic.
  • Aligned the response and asynchronous-error formats exchanged between the web interface and Android. Added fallbacks so device or external-feature failures would not terminate the whole app.
  • Aligned Gradle, AGP, JDK, compile SDK, and module namespaces in stages.
  • Checked content URI, FileProvider, Bluetooth permission, scanner, and service-start conditions against OS policy changes.
  • Separated bridge null/error responses, asynchronous cleanup, login failures, and initial synchronization failures when narrowing regressions.
  • Checked builds, permissions, file handling and bridge behavior, including tests on several physical devices running older OS versions.

13

New frontend buildWeb2026.02 ~ 2026.03

Stock Operations Admin Web

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • Zustand
  • MSW

Built screens for viewing, creating and editing account, stock and order records. Used MSW API responses and shared tables, filters and modals across screens, with column pinning, resizing, reordering and row selection.

List, search, detail and editing screens needed a new frontend. Without connecting to a real backend, I supplied responses with MSW and built tables and modals for use across screens.

  • Built shared column controls, filters and modals, defining screen-specific columns and actions separately.
  • Handled MSW mock responses with TanStack Query, keeping selected items and modal visibility separate.
  • Built the complete frontend with React and TypeScript. Shared tables provided consistent column pinning, resizing and reordering across account, stock and order screens.
  • Implemented queries and input interactions with MSW mock APIs. Kept draft filters separate from applied query conditions and updated TanStack Query when the user submitted a search.
  • Implemented column reordering, pinning, resizing and row selection in a shared table.
  • Used MSW list and detail responses to check loading, empty and other UI states.
  • Built stock-search modals and order lists that display subsequent result sets.
  • Kept draft filters separate from submitted conditions in order history. Repeated searches restarted from the first page, and load-more requests were guarded against overlap.
  • Checked column controls, scrolling, search modals and UI states locally with MSW mock responses.