Skip to content

Projects

Company 2 · Personal 8 · Open source 2

Services I work on at my company, plus things I've built on my own.

Company

Autowini · Frontend Developer · 2023.07 ~ Present

  • CompanyActive2023.07 ~

    Autowini Web · Mobile · Admin

    WebsiteMobile

    Frontend Developer

    An export platform that sells Korean used cars to overseas buyers.

    1. Legacy page migration to React (Web · Mobile)

      • Migrated legacy JSP pages to React and TypeScript step by step, leading the initial setup, folder structure, and shared architecture
      • Embedded React into JSP pages piece by piece to lower migration risk, then moved the whole layout to a React SPA, fixing collapsing layouts and duplicate resource loading
      • Carved out pages one by one: filter search, unified search, wishlist, shipping info, and PartWini unified search on Web, and wishlist, recently viewed listings, and shipping info on Mobile
      • Consolidated scattered React projects into web-www-front and web-mobile-front and modularized shared UI and logic, cutting duplicate code by about 20%
      • Reworked resource loading and added lazy loading on the filter search page, cutting load time for the same scenario 45s → 20s
      • Rebuilt the global header and footer in React with SmartLink routing between JSP and React pages, lifting average Lighthouse performance and accessibility scores from the 10s → 70s
      • Split React core into a vendor chunk with Vite manualChunks and fixed Akamai CDN cache policies to minimize static asset re-downloads
      • Loaded JSON for 15 languages dynamically by language and page, shrinking the initial bundle by about 100KB
      • Kept search filters in the URL with SearchParams-based state, and added skeleton UI, lazy-loaded images, and optimistic wishlist updates

    2. Design system · Testing · Deploy automation

      • Built a token-based design system with our designer and moved styling to Tailwind CSS
      • Migrated Styled-Components to Emotion to fix style flicker (FOUC) under SSR
      • Set up Vitest for key utilities and Playwright E2E tests for core user flows
      • Built CI/CD on Bitbucket Pipelines with SSH key auth, incremental rsync deploys, Akamai Fast Purge cache invalidation, and a deploy notification bot
      • Cut development time by over 50% with a Claude Code-centered workflow (first UI from screen images, auto-generated tests via Hooks, plans and progress tracked in Artifacts)

    3. Keycloak authentication (Web · Admin)

      • Customized 7 auth screens in React with Keycloakify, including login, sign-up, and password recovery
      • Unified Web and Admin auth screens under one theme and supported 15 languages with i18next and Google Sheets translations
      • Built a post-signup page for switching to a Buyer or Seller account, connecting authentication with service sign-up
      • Automated access token refresh and shared API auth handling with Axios interceptors and updateToken()

    4. Admin chat system

      • Built real-time messaging and chat list sync over WebSocket with stomp.js, refreshing the list with a TanStack Query refetch on each incoming message
      • Started as an iframe chat beside a JSP list, then moved to a unified React page with a draggable divider between list and chat
      • Added image paste and drag-and-drop upload, keeping the chat pinned to the bottom even after images finish loading
      • Alerted users to new messages through the browser tab title using visibilitychange and debouncing
      • Fixed AVIF images downloading as broken JPGs on some Windows PCs by converting them with Canvas
      • Fixed chat UI and Arabic text alignment broken by react-markdown's default styles, overriding only the styles that mattered

    5. Video player quality selection

      • Added manual 360p, 480p, and 720p quality selection to the Hls.js player
      • Made AUTO pick a quality by comparing measured bandwidth with the bandwidth each level requires

    6. Claim submission system (Web · Mobile · App)

      • Built a chat-style claim submission screen shared across web, mobile, and in-app webviews
      • Supported 7 languages with a script that pulls Google Sheets translations as JSON
      • Separated success and failure logic for each processing step with TanStack Query useMutation

    7. Car History · Repair records

      • Built Car History lookup pages for web and mobile (JSP)
      • Built screens to add and edit paint thickness data and repair history, plus lookup templates

    React · TypeScript · TanStack Query · Zustand · Tailwind CSS · Emotion · Keycloak · stomp.js · Vitest · Playwright · Vite · JSP

  • CompanyActive2023.07 ~

    WiniLogis Web · Mobile

    Website

    Solo Full-Stack Developer

    A logistics service for ocean freight quotes, bookings, and shipping schedules.

    1. Build · SEO · Performance

      • Migrated Webpack 5 to Vite, cutting dev server startup 39s → 148ms
      • Used Claude Code to switch 177 environment variable references across 50+ files from process.env to import.meta.env in one pass
      • Shrank the main bundle by about 77% with per-page lazy loading and code splitting, raising Lighthouse performance 34 → 70+
      • Migrated Styled-Components to Tailwind CSS, eliminating the runtime cost of generating styles
      • Improved LCP with WebP images, tuned video quality and a CDN, and preload plus fetchPriority on hero assets
      • Built SeoHelmet to prevent duplicate meta tags, then generalized it and published it on npm as react-head-safe
      • Set up canonical tags and a sitemap index (main · oceanfreight · shipping-schedule · blog · review)
      • Split translation JSON into namespaces for dynamic loading, and removed 30 unused dependencies (18 legacy, 12 flagged by depcheck) along with unused translation keys

    2. Global state: Redux Toolkit → Zustand

      • Stripped out Redux Toolkit boilerplate and set a rule for structuring state (3+ values go in an object)
      • Persisted only the state that needs it to localStorage with per-store persist
      • Removed Redux Toolkit, react-redux, and redux-persist, cutting code 2,169 → 1,179 lines (about 45% less)

    3. Country data DB migration · Dedicated API

      • Moved phone country codes out of a frontend constants file (2,230 lines) into the DB and added a dedicated country API
      • Replaced the old API that returned every code, cutting response size 229KB → 12.6KB, and dropped the constants file for another 11.3KB off the bundle
      • Reshaped the data with TanStack Query select so logic in the existing 24 files stayed unchanged

    4. Deploy migration (Jenkins → Bitbucket Pipelines)

      • Moved the Jenkins deploy pipeline to Bitbucket Pipelines, standardizing deployment with Autowini
      • Generated and deployed the sitemap automatically once a day with Pipelines Schedules

    5. PWA

      • Made the site installable on desktop and mobile home screens without a native app
      • Kept data viewable offline with a Service Worker

    6. Shipping Blog · Buyer Review

      • Built the blog list and detail pages (infinite scroll, mobile swipe) and redesigned them to be responsive
      • Built Admin post creation, editing, and visibility settings with a React-Quill editor and drag-to-reorder images
      • Sanitized admin-authored HTML with DOMPurify before rendering
      • Built the Buyer Review board with pop-up playback for review videos

    7. Freight rates · Guest booking · Quote emails

      • Autofilled member details after login, and for guests, checked for an existing account and booked automatically
      • Built freight rate lookup by destination country with ticket-style rate cards
      • Let Admin send quotation emails built from booking data to multiple recipients

    8. EUR · Invoices

      • Built invoice PDF downloads (Web), plus Admin invoice creation and editing with PDF and Excel export
      • Cached the EUR exchange rate for 24 hours to convert to euros with minimal API calls, and issued invoices in euros

    9. Booking requests · Admin screens

      • Built a responsive booking request screen with request and consultation chat
      • Built Admin screens for booking stages, request history, consultations, and email logs, plus member management CRUD
      • Built a 5-step How It Works guide page, redesigned the main page, and rebuilt the Admin design with Tailwind CSS
      • Refactored the header and mobile sidebar, fixing clipping issues and removing 1,249 lines of code

    React · TypeScript · Vite · TanStack Query · Zustand · Tailwind CSS · Styled-Components · React-Quill · React-pdf · i18next