Sa2wzqidbztnqysd1rcy

Ming-Hao Tsai

Front-end Developer


擅長使用 React 開發網路應用程式,熟悉 API 整合與 UI/UX 設計實踐。具備專案實務經驗,善於與後端工程師與設計師合作,樂於接受不同的挑戰。最近在學習 Vue 和 Flutter。

關於


技能

  • 熟悉 JavaScript 的各種新特性 (溫馨提醒:ES6 已經 10 歲了)
  • 熟悉 CSS 的知識,float、flexbox 及 grid 排版
  • 熟悉 React 及相關生態系,如 react-router、formik


經驗

  • 擁有實作拖拉、介接 WebSocket、調配 i18n 的經驗
  • 擁有介接 Google Maps / HERE Maps API & SDK 的經驗
  • 擁有操作 Git 版本控制及 Git-Flow 版控流程的經驗
  • 擁有敏捷開發 (Scrum) 的經驗


知識

  • 瞭解 CSS 的 Media Query 知識
  • 瞭解跨瀏覽器相容性問題
  • 瞭解響應式程式設計方法 (Reactive Programming)


團隊

  • 具備整合 RESTful APIs 並與後端工程師合作開發的能力
  • 具備實踐 UI 排版及 UX 互動行為並與設計師互相配合的能力

工作經歷

美商美創資通股份有限公司 – 前端工程師 / 2020 年 10 月 – 目前

  • 根據需求與團隊成員討論並開發介面與功能皆客製化的後台系統
  • 串接 HERE 及 Google Maps API & SDK 以完成旅運規劃與地圖渲染等功能
  • 與團隊合作,為使用者提供旅遊交通規劃解決方案
  • 與設計師配合,開發並維護產品前後台、製作活動專用的網站
  • 建立可跨專案使用的共用元件庫 (component library)

Nfdubqccqneu5y2zunlg

樂購蝦皮股份有限公司 – 前端工程師 / 2020 年 1 月 – 2020 年 10 月

  • 使用 TypeScript 進行開發
  • 以 React with Next.js 在蝦皮大學上維護並開發新功能
  • 以專案性質承接其他部門的需求,開發內部專用後台,增加維運便利性
  • 建立每次改動程式碼時,更新 Change Log 的良好習慣
  • 協助團隊建立後台專案的共同模板
  • 串接 Firebase 的 Remote Config 動態調整專案設定

Nfdubqccqneu5y2zunlg

雲端互動股份有限公司 – 前端工程師 / 2017 年 5 月 – 2020 年 1 月

  • 從頭規劃並建立前端架構,以 React 及相關套件開發網路應用程式
  • 配置 Eslint 及 Prettier 維持程式品質,並改善前端開發體驗
  • 協助團隊初階成員解決問題
  • 與介面互動設計師及系統分析師合作,定義專案的介面互動及流程規劃
  • 和後端工程師討論資料結構,並執行 API 介接
  • 負責模組化並實作視覺設計師提供的客製化介面

Nfdubqccqneu5y2zunlg

左手設計有限公司 – 網頁工程師 / 2015 月 10 月 – 2017 年 5 月

  • 負責以 Photoshop 設計視覺稿
  • 利用 Bootstrap 及 CSS 進行 RWD 切版
  • 藉由 jQuery 實作互動
  • 使用 ASP.NET framework 及 C# 介接資料

Ma2wuw9r7jxjqhegmofp

執行專案

美創資通 – Construction Aware / 2024 年 10 月 – 2025 年 1 月

  • 使用 react-google-maps/api 提供在地圖上繪製圖形的工具
  • 透過 embla-carousel-react 的可組裝特性,輕量化幻燈片功能

美創資通 – Incentive Web View / 2024 年 2 月 – 2024 年 12 月

  • 與設計師合作客製化 UI,以 Soft RWD 的形式使網站在任何手機尺寸皆能輕易檢視內容
  • 為介面添加 skeleton screen,提高使用者體驗

美創資通 – MI Console / 2022 年 2 月 – 2025 年 3 月

  • 與 Software PM 配合,獨立開發完整後台系統
  • 以 HERE Maps SDK 實作 heatmap、boundary 等功能
  • 使用 recharts 套件客製化圖表

美創資通 – TSP/MSP 共享(乘)服務管理平台 / 2021 年 12 月 – 2022 年 2 月

  • 美創資通與交通部合作的專案
  • TSP - 運具提供者更新站點之後台系統;MSP - 司機與乘客媒合之後台系統
  • 兩者皆為實作 RWD 的後台管理系統

美創資通 – Trip Planner 旅運規劃平台 / 2021 年 7 月 – 2025 年 3 月

  • 使用 HERE Maps 為基底並以 Google Maps API 搜尋座標,再串接美創自有的旅運引擎完成交通規劃功能
  • 藉由改變前端路由提供多種版本的工具
  • 使用 react-i18next 並串接 Google spread sheet 實作管理多國語系

美創資通 – Campaign Manager 活動管理平台 / 2021 年 1 月 – 2022 年 2 月

  • 與設計師合作,建立內部專用的 component library,並在各專案中重複使用
  • 使用 react-beautiful-dnd 實作拖拉互動功能

樂購蝦皮 – Mart 蝦皮超市前台 / 2020 年 8 月 – 2020 年 10 月

  • 商品分類頁面資料渲染
  • 實作無限滾動瀏覽商品

樂購蝦皮 – Form UI and Admin 表單系統介面庫與後台 / 2020 年 6 月 – 2020 年 10 月

  • 建立僅能在公司內部安裝的表單共同介面庫 (private npm package),同時給蝦皮大學及表單後台兩個專案使用
  • 使用物件導向模式設計專案架構,減少資料操作與介面渲染之間的耦合
  • 使用 react-beautiful-dnd 實作拖拉互動功能

樂購蝦皮 – University Seller and Admin 蝦皮大學前後台 / 2020 年 1 月 – 2020 年 10 月

  • 維護以 Next.js 框架為基礎的前台
  • 獨立開發評價、問卷模組等新功能
  • 導入 SWR api fetcher 套件,提升使用者體驗
  • 協助 PM 埋 GA 追蹤碼並調整 Tag Manager 設定
  • 逐步重構部分程式碼,將功能重複的介面集成獨立元件、將多個 UI Library 整合至一個,藉此提升專案可維護性

外貿協會 – iService 行政服務平台 / 2019 年 3 月 – 2020 年 1 月

  • 導入 react hook api,並採用 functional component,改善開發體驗
  • 藉由 react-router-dom (v5) 規劃動態路由
  • 使用 react-dnd 實作拖拉互動功能
  • 利用 formik 及 yup 簡化冗長的表單驗證步驟

雲端互動 – Wave One 第一波點餐系統 / 2018 年 10 月 – 2019 年 3 月

  • 以 react-intl-universal 處理產品的語言國際化
  • 利用 big-number 克服 JavaScript 數字不精確的問題
  • 實作 date picker 元件,以符合介面互動設計師的需求

遊戲橘子 – Team Up 企業專案管理系統 / 2018 年 3 月 – 2018 年 10 月

  • 與後端工程師合作,以 MQTT 及 WebSocket 開發即時聊天室
  • 實作 masonry 元件,以符合介面互動設計師的需求

學歷

國立臺中科技大學 – 學士學位 / 多媒體設計系 / 2010 – 2014

Wbccaopp6hhf1t5cjnpz