Skip to main content

Resume

About me 🧑🏻‍💻

Eric 鄧國欽
ericdenggc@gmail.com

I am passionate about Frontend Development (JavaScript and React.js), constantly learning new technologies to tackle complex challenges. Building a user-friendly product that can help people and make a positive impact is my purpose.

In my spare time, I actively engage in activities that contribute to my professional growth. I enjoy working out to maintain focus and discipline. Listening to podcasts helps me stay up-to-date with the latest industry trends. Additionally, I regularly write technical blogs to enhance my communication skills and deepen my understanding of intricate concepts.

Objective of my next career

  • Have opportunity to develop backend and cloud services.
  • Become a professional team leader with strong technical and communication skills.

Technical Skills

  • HTML5, CSS3, JavaScript (ES6+)
  • React.js Tech stack: Hook, Context, Redux, React Router, CRA, Next.js, React Intl, next-i18next
  • React Native: Navigation, Notification, Webview, Deeplink, Code Push, Flipper
  • Vue.js 2 Tech Stack: Vuex, Vue Router, Vue CLI, Nuxt.js, Vue-i18n, vue-devtools
  • CSS: styled-components, SASS/SCSS, CSS Modules, Flexbox, Grid Layout
  • Component Library: Chakra UI, Element UI, Bootstrap
  • Cross browser compatible & responsive web design
  • Data Fetching: Axios, SWR, React Apollo GraphQL Client, Socket.io, React Query
  • Frontend Building Tools: Webpack, Storybook, bit.dev, ESLint, Babel, Prettier, Gulp, PostCSS, cssnano, Autoprefixer, UglifyJS, Loadable Components
  • SEO Optimization
    • robots.txt, sitemap.xml
    • Google Search Console
    • Semantic HTML
    • Metadata, Open Graph Tags, react-helmet
    • Pre-rendering: SSR, SSG, ISR, Prerender.io
    • JSON-LD schema
  • Performance Optimization
    • Web Vitals
    • Chrome Developer Tools (Performance profiling, Lighthouse, PageSpeed Insights)
    • React DevTools
    • Cache strategies
    • Dynamic import
    • Lazy loading
  • Frontend Logging: Sentry
  • Build CI with Docker, Azure Pipeline, AWS, Drone
  • Visualization: D3.js, ECharts, SVG, SVG.js, Canvas, Fabric.js, GSAP
  • CMS: Magento, Contentful
  • Backend Development: Node.js, Express.js, MongoDB
  • Blockchain: Solidity, Hardhat, Web3.js, Metamask, WalletConnect, Infura, Moralis

Learning recently

  • Use AI tools to boost work efficiency, e.g. ChatGPT Prompt Engineering

Soft Skills

  • Not just coding but work with ownership and self-motivated
  • From business requirements to live product. planning, analysis side effect, task prioritization, effort estimation, implement, testing, collaborate with team members
  • Provide design suggestions and technology solutions to PM & UI/UX Designer for building a better production together
  • Design and integrate API with backend engineer
  • Write engineering spec, wiki, problem solving journey

Employment History

Senior Frontend Engineer at AsiaYo

2022/09 - Present

Products

  1. AsiaYo Web (https://asiayo.com/) made with React.js, Lerna (Monorepo), styled-components, Apollo, and Internal UI component library
  2. AsiaYo iOS & Android App made with React Native, styled-components, Redux, React Query, React Navigation , Universal Link

Experience

  • Led a team of 3 members as Tech Lead, overseeing task assignment, scheduling, and conducting code reviews to maintain codebase quality.
  • Conducted system analysis and designed system architecture to facilitate efficient development and maintenance processes.
  • Assumed the role of Scrum Master, facilitating agile development processes and fostering collaboration among cross-functional teams.
  • Collaborated with RD, PM, QA, Designers, and Operation teams to troubleshoot and resolve a wide range of technical issues.
  • Collaborated with Backend Engineers to design APIs, ensuring efficient communication between frontend and backend systems.
  • Mid-level Frontend Engineer acquisition, responsible for resume checking, assignment code review and first round technical interview.
  • Successfully upgraded React from version 17 to 18, leveraging the latest features and enhancing overall performance.
  • Implemented Server-Side Rendering (SSR) using Node.js, React 18 Client & Server rendering API, Apollo React Client, Helmet, and Loadable Components.
  • Optimized web vitals, focusing on Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP) to enhance website performance and user experience.
  • Implemented SEO strategies including metadata optimization, JSON-LD integration, FAQ schema, breadcrumb navigation, and resolution of Google Search Console issues.
  • Leveraged Contentful CMS to develop customizable SEO content, enabling efficient management and customization of SEO elements.
  • Developed an App Notification Center, enhancing user engagement and providing timely updates and alerts.
  • Integrated various payment gateways, including Braintree, Tappay, and Atome, supporting both TWD and USD currencies.
  • Implemented GA tracking in both web and app environments, enabling comprehensive analytics and insights into user behavior.
  • Successfully integrated third-party services such as GTM, Facebook Pixel, Firebase, Sentry, Emarsys CRM, and AppsFlyer, enriching tracking capabilities and improving marketing strategies.
  • Maintained technical documentation to facilitate knowledge sharing and smooth onboarding of new team members.
  • Managed the maintenance and enhancement of the Channel Expansion Javascript SDK for Affiliate Marketing, enabling effective tracking and analysis of affiliate activities.
  • Successfully upgraded iOS SDK & Android SDK, leveraging the latest features and improvements for enhanced app performance and functionality.
  • Planned and implemented promotion page in web & app for package products with members, example: https://asiayo.com/zh-tw/package/cruise/. Also write a document for the operation team to teach them how to manage the promotion content.
  • Optimized image by sharp library: converted format from jpg to webp, responsive size, compression.

Senior Frontend Engineer at HTC VIVE

2021/01 - 2022/08

Products

  • VIVERSE Market - NFT marketplace focusing on Anime, Cartoon, and Games (ACG) themed NFTs.
  • VIVE Arts NFT - NFT marketplace focusing on Arts and Collectibles.
  • VIVEPORT - VR app store. Revamp web frontend and maintain issues of related legacy microservices.

Experience

  1. Buy NFT & Blind Box with credit card or cryptocurrency
    • Support Ethereum and Matic (Polygon)
    • Connect with MetaMask & WalletConnect protocol using Web3.js to interact with smart contract
    • Integrate dApp browser in crypto wallet mobile app
    • Support Pre-mint & Lazy mint NFT
    • NFT Private sales (Whitelist) using Merkle Tree
    • Timed auction & reserved auction
    • Redeem NFT with redemption code that purchased from 7-11 ibon
    • Withdraw NFT to a specific wallet address
  2. Implement all features common in E-commerce, including but not limited to:
    • checkout
    • payment
    • account setting
    • shareable profile & collectibles
    • multi-currency stores, include TWD, USD, JPY
    • multilingual, include English, Japanese & Traditional Chinese
    • Google 2FA
  3. API & GraphQL integration with Magento CMS backend service
  4. OAuth integration with HTC account, Google, Metamask
  5. Build internal React component library with storybook and Bit.dev
  6. Setup CI pipeline with Azure DevOps
  7. Optimize SEO
    • Setup robots.txt, sitemap.xml and Google Search Console
    • Integrate Prerender.io for web crawlers
    • Handle metadata and open graph tags
  8. Integrate 3rd-party services:
    • Sentry service for frontend logging, issue tracking
    • CookiePro for cookie consent
    • GTM
    • GA

Frontend Tech Stack

React.js, React Hook, React Context, React Router, Redux, Magento PWA Studio, Next.js, ChakraUI, Webpack, ESLint, Storybook, Bit.dev, Prerender.io, Sentry, GA, GTM, CookiePro

Backend Rest API & GraphQL Integration

Magento, Payment gateway service, Axios, SWR, React Apollo Client

Blockchain Smart Contract Integration

Web3.js, Metamask, WalletConnect, Infura, Moralis

Frontend Engineer at QNAP

2017/12 - 2021/01

QNAP 是一家總部位於台灣的 NAS 設備製造商，業務範圍涵蓋軟體研發、硬體設計及自有生產線，目前專注於提供儲存、網通及智慧視訊監控解決方案。

我所在的團隊負責開發影像分析應用，包含人臉辨識、人流偵測等，產品是執行於 NAS 上的容器化網站應用程式。我的主要工作是開發及維護網站前端功能，使用的技術是 Vue.js，需與 UI/UX 設計師、後端工程師、DevOps、QA、機器學習工程師及 PM 合作。

Rewarding jobs

  • 規劃網站架構，包含路由、頁面、元件、UI 狀態管理
  • 建構元件庫及基本模板提供多個產品共同使用
  • 研究新技術、評估開源套件並應用於產品中
  • 大資料量網頁的效能優化，成功提高頁面速度 50％
    • 降低 JS, CSS 檔案大小
    • lazy loading
    • 評估套件可否移除或更換
    • 使用 DevTool 分析渲染效能
  • 部署及開發環境建置
  • 動態切換多國語言
  • 串接即時的資料以及 UI 狀態更新(Long polling, Websocket)
  • 串接影像串流，同時於影像畫面上畫出特定圖形、文字、圖片
  • 開發繪圖工具，使用者可在影像縮圖上繪製線段、矩形、多邊形等圖形，並將座標透過 API 送給後端以設定分析區域。
  • 開發表單設定介面，各種表單元件、欄位驗證、照片上傳功能(從本地、NAS、Webcam、影像串流畫面截圖)
  • 開發精靈視窗元件，以分步驟的方式進行表單設定，每個步驟之間需做資料傳遞及驗證
  • 將統計資料或系統資訊透過資料視覺化套件 D3.js, ECharts 繪製成互動式圖表
  • 使用 Node.js/Express/MongoDB 開發 RESTful API Server
  • QNAP Seminar - Introduction to React Native
  • Web Frontend Framework Survey 2018 評估 Vue, React, Angular，決定產品要使用的框架

Products

  • QVR Human

    使用 Vue.js 開發的 SPA，此產品的前端開發主要負責人，從零開始建置一直到完成專案， 評估框架及套件的選用，討論 UI/UX 設計規格制定，規劃所有要開發的元件後評估工時，分配工作給其他前端工程師一起合作開發，撰寫 API 文件提供後端工程師參考與討論，串接後端 API 完成需求功能。

    產品主要功能包含辨識即時影像串流中經過特定區域的人流，提供統計資料圖表，應用場景如百貨零售賣場，分析顧客行走路線、櫃位人流量。

    Vue.js, Vuex, Vue Router, Vue CLI, Vue-i18n, SCSS, Element UI, ECharts, Canvas, Fabric.js, Socket.io, Axios, Webpack, Babel, ESLint, Prettier

  • QVR Smart Search

    使用 Vue.js 開發的 SPA，單獨負責所有前端功能，參與規劃、設計、開發、串接 API，使用 Vuex 管理複雜且需要即時更新的 UI 元件狀態。

    產品主要功能為串接多個監控產品，提供影像辨識功能。需顯示串接產品的狀態，包含安裝進度、產品資訊、認證授權、錯誤訊息等。

    Vue.js, Vuex, Vue Router, Vue CLI, Vue-i18n, SCSS, Element UI, Axios, Webpack, Babel, ESLint, Prettier

  • QVR Face

    初期使用 Ext.js 及原生的 JavaScript 為主，陸續導入 Vue.js, Gulp, Babel, ESLint, PostCSS 等構建工具，重構元件架構，改善頁面載入速度。

    產品主要功能包含分析即時影像串流中的人臉，辨識已註冊的個人檔案或陌生人以及人物特徵（性別、年齡、表情），自訂觸發條件發出事件通知，應用場景如門禁系統、會員識別系統、出勤管理等。

    Ext.js, jQuery, Vue.js, SVG, Canvas, D3.js, ECharts, Socket.io, i18n, Gulp, Babel, ESLint, PostCSS, autoprefixer, minifier

  • POC projects, include frontend (Vue.js) and backend (Node.js) development

    • QVR Face User Profile Management System
    • Smart office
    • Tagging tool

Certificates

AppWorks School Blockchain Program Batch #1

2022/08/08 - 2022/12/15

https://school.appworks.tw/blockchain-program/

Ethereum Blockchain Developer Bootcamp With Solidity

2022/02/06

https://www.udemy.com/certificate/UC-84d3335f-4f71-400e-854e-7328e1582446/

Personal Side Projects

ETH Price Prediction Dapp

A dapp for guessing the rise and fall of ETH prices. Players who guess correctly can win bonuses according to the betting ratio.

Crypto Trading Bot

A cryptocurrency trading bot to help you implement dollar-cost averaging (DCA) investment strategy automatically.

Node.js, Serverless Framework, AWS Lambda

Muxic

整合 KKbox、Spotify 及 Youtube 的音樂服務網站。因為喜歡音樂，為了發現更多好音樂而獨立開發的專案。設計風格復刻Spotify，專案名稱寓意電子學中的多工器(Multiplexer)，一個可從多個輸入訊號中選擇其中一個輸出的電子元件，以其縮寫 MUX 改寫 Music 而成。

功能包含:

  • 歌單列表
  • 歌單分類
  • 播放清單
  • 歌手頁面
  • 專輯頁面
  • 音樂播放控制
  • OAuth 登入
  • 收藏歌單
  • 搜尋歌曲、歌手、專輯

Vue.js, Nuxt.js, SSR, PWA, RWD, BootstrapVue, KKBOX Open API, Spotify Web API, Youtube API, OAuth

Random Eat

Demo | Github

從圓圈區域中隨機找出一家餐廳，可拖曳/縮放圓圈、篩選餐廳類型、星星評分。

React.js, create-react-app, Semantic UI, Google Maps JavaScript API, Google Places API

Traffic Accident Map

Demo | Github

在 Google 地圖中使用 Marker 及 Marker Cluster 標示出台灣每個地區的交通事故資料，包含發生時間、發生地址及事故狀況。

React.js, create-react-app, Semantic UI, Node.js, Koa, MongoDB, Mongoose, Nodemon, Google Maps JavaScript API

RGB Color Game

Demo | Github

辨識 RGB 色碼的小遊戲，練習配置 Webpack 並實作一個簡單的 JavaScript 元件框架。

JavaScript, Webpack, Babel, css-loader, style-loader, bootstrap

Tenkibot 天氣君

Github

A facebook chatbot for search and regular notice weather information, the data are crawled from CWB.

Education

  • 國立交通大學 National Chiao Tung University (NCTU)
    2015/09 - 2017/09
    Master of Computer Science and Engineering

  • 國立臺灣科技大學 National Taiwan University of Science and Technology (NTUST)
    2011/09 - 2015/07
    Bachelor of Electronic and Computer Engineering