About
Interface Enthusiast (UI & API, Interoperable Architecture) / Turning dreams into reality and proving what's possible with code.
Contact
Projects
· Front-end deployment platform (Client-side rendering only)
· Build Cache-Control policies, leverage AWS CloudFront and Cloudflare simultaneously for fast, smooth serving
· JS/CSS asset preservation to avoid losing assets during dynamic imports
· Utilizing HTMLRewriter to inject runtime environment variables
· Developing Graph-based authorization framework for handling API authorizations (Inspired by Google Zanzibar and GraphQL Resolver)
· Designing domain logic with event sourcing pattern
· Track product metrics using event sourcing patterns (Activation, Retention, Churn Risk Users, etc.)
· Company-level planning suggestions to strengthen connections between different content within the Karrot
· Front-end(WebView) performance optimization work
· Achieved fastest initial loading speed in CSR environment with p75 LCP 1.07s, p75 FCP 0.34s
· Full-stack development of year-end content utilizing user data
· Proposed and implemented UX in the form of stories (like Instagram)
· Utilized Sanity and JSONata to combine static content with user data
· Performance benchmarks and optimization for a global environment
· Configured backend to serve approximately 30 million user data within p90 50ms (Korea, Canada, US, Japan)
· React, Vite, Sanity, JSONata, Fastify, SQLite
· Implementing routing core logic for a global website (Canada, US, Japan, UK)
· Tracking SEO metrics, creating strategies, and organizing sitemaps
· Fastify, Remix
· Landing page editing, development, and rendering tools for in-app campaigns
· Ability to build custom components (Component Registry and SDK)
· Atomic CSS libraries for building custom components utilizing Vanilla Extract Sprinkles
· Utilize Cloudflare CDN for caching of 10M-level instantaneous traffic
· Implement responsive images with Cloudflare Image Optimization
· Stack navigation library provides a combinatorial plugin interface
· Event-driven state machine design
· Automate company-wide PV metrics collection with plugin interface
· Zero-dependencies
· Mini-App Platform
· Developed a third-party integration Open API
· Developed a JavaScript SDK for third-party integration
· Developed the "My Favorites" section within the "Nearby" tab
· Full-stack development of profiles, review features, and more
· Node.js, GraphQL, Relay
· Launched affiliate services such as Washswat, Miso, Petner, Casting, CleaningLab, etc.
· Static web hosting services for affiliate service development
· Origin isolation (Custom Domain Integration)
· Utilize Cloudflare Workers, KV
· Utilize HTMLRewriter API to access execution context as a synchronous function
· Served as technical program manager for color system migration
· Convinced company-wide resources and assigned and managed team-specific schedules
· A shortcut service to help new services get into the marketplace
· Positioned at the top of the Home tab and designed other experiments
· Karrot's next-generation website
· Design and implementation of data layer (GraphQL) and page static generation (Next.js)
· Origin, Path standards with consideration for localization and universal linking
· SEO optimization
· Tool to automatically generate IPC interfaces between mobile native (iOS/Android) and webview
· JSON Schema-based
· TypeScript SDK, TypeScript SDK documentation auto-generation
· Automatic generation of Swift and Kotlin stubs
· Consider extensibility through plugin interfaces
· A library aimed at improving the overall UX of webviews
· Native transitional animation library based on react-router-dom
· Utilized by new businesses and services using WebView in Karrot
· (Now rebranded to "Stackflow")
· Job posting service in Karrot (New business)
· Application server development
· Node.js, GraphQL
· Optimizing GraphQL performance with the GraphQL JIT Executor and Persisted Queries
· Karrot's WebView deployment platform (former)
· Rollback and canary deployment features
· AB testing with canary deployment features
· <medium.com/daangn/d312b17…>
· Turning a Karrot search feature for used items from mobile native to a webview
· Native-level transition animation (shared element transition)
· A gRPC Service integration project with GraphQL
· Aggregate each microservice for easy use
· GraphQL representation of the relationships between domains within microservices, provided in SDL and GraphQL Voyager for easy understanding
· A server for sharing sessions between independent admin services within Karrot
· Node.js, GraphQL
· Revamping the WebView foundation within the overall Karrot iOS/Android client
· Establish communication conventions with iOS/Android clients and define workflows for native integration
· JavaScript SDK maintaining
· Developed the third tab of Karrot, the Nearby tab, as a WebView
· GraphQL Client Schema
· GraphQL Schema Stitching (@graphql-tools/stitch)
· Relay
· Transitioning an existing 1.0 MVP to React.js
· Leveraging Twilio Programmable Video
· Developing a plugin system and SDK with iframes
· Developing a real-time video lecture website with Vue.js
· Leveraging Twilio Programmable Video (WebRTC)
Work Experience
Leadership
· UX System Department (Front-End Core Team, Design Systems Team) Lead
· Frontend Core Team Lead
· Frontend Chapter Lead
Engineering
· Build deployment platforms to enhance applications at the company-wide level (Warp)
· Developed an company-wide WebView system with composable plugin interfaces (Stackflow)
· Developed an automated tool to generate interface documentation and code via schema (Metabridge)
· Developed a content platform for SEO (Jampot - Jamstack Data-layer as a Service)
· Develop a landing page CMS and SDK (Landkit)
· Developed and operated website contribution workflow
· Sustainable technical onboarding documentation via template code
Product
· Hashtag TF
· Shortcut TF
· Neighbors of the year (2023)
Engineering
· WebView Platform Development (Bridge Interface, Deployment System, etc.)
· Improving WebView UI/UX with Enhanced Transitions (Karrotframe)
· Website Platform
Product
· Developed and operated Nearby Tab
· Full-stack development of new services (Karrot 알바, Karrot Mini)
· Third-party integration SDK, OpenAPI development
· Migrate search feature from iOS/Android native to WebView
Engineering
· Real-time video lecture web application development
· Development of real-time data communication protocols and rendering engines
· Plug-in systems and scalable design
Product
· Developing a live broadcast platform MVP
· Rebuilding Kolon Industries' global branding website with React.js
· Leveraging Headless CMS (Directus)
Side Projects
· Utility library that reads `.env.example` to validate environment variables
· Replace the existing English interface with Korean and use color to highlight errors and things that need to be fixed
· Event-sourcing library built on MongoDB
· MongoDB persistent integration in Nact.js
Speaking
Writing
I've written down the things I'm always focused on to build a successful product
For an in-house product to be successful, it can't solve just one problem, it must solve multiple customers' problems at the same time
Here's the ultimate JavaScript monorepo setup I've settled on