黃忠誠 Johnson

資深前端工程師


在業界從事網頁開發已經有六年以上的經驗,從高中時就對程式語言有濃厚的興趣,擅長用清晰的邏輯以及簡潔的程式碼解決問題,在工作上擅長使用 React 開發功能與畫面,搭配 Typescript 減少 Debug 的時間,喜歡想新的點子,利用閒暇時間開發 Side Project 研究新技術,程式開發帶給我很大的成就感,成為我繼續精進學習的動力。


  https://vocus.cc/user/63fddb8dfd89780001fe5360

  https://github.com/JohnsonHuang555

  [email protected]

Tel: +886 981-218-706

  • 技能

HTML / CSS / Javascript


  • 使用 HTML 為網站建立骨架
  • 使用 CSS 為網站畫妝
  • 使用 Javascript 給予網站行為
  • 使用 Typescript 提升開發效率 

React


  • 使用 hooks 管理商業邏輯
  • 模組化元件增加重用性
  • 使用 DDD 概念設計程式架構
  • 調整網站效能
  • styled-component 撰寫樣式

Backend / Others


  • 串接後端 API
  • 使用 golang / node.js 實作 API
  • 使用 Clean architecture 設計專案架構
  • 使用 Flutter 開發遊戲 App
  • 串接 Firebase Firestore

工作經歷


資深前端工程師

Gogoro Taiwan Limited_睿能創意股份有限公司

六月 2022 - Present
Taipei, Taiwan

1. 開發門市銷售系統以及門市維修系統
2. 設計前端架構,開發新功能與維護舊系統
- 使用 react-query 管理 server state
- 使用 react-hook-form 管理表單狀態
- 實作 custom hooks 管理共用邏輯及元件並寫單元測試
- 使用 styled-component 或 css modules 開發樣式
3. 與後端合作串接 API
4. 協助團隊成員 Code Review
5. 與 PM、UIUX 設計師溝通合作討論規格及 wireframe
6. 協助參與面試

前端工程師

CYBERBIZ 順立智慧股份有限公司

四月 2019 - 六月 2022
Taipei, Taiwan

1. 開發電商網站前後台系統,依照 UI/UX 設計師實作畫面與功能
- 前台
. 使用 Vue 實作功能
. 使用 Scss 切版
- 後台
. 使用 React 開發管理者介面
. 使用 Redux 管理資料狀態與流向
. 重構,以 DDD 概念設計架構
2. 皆使用 Typescript 減少 Debug 的時間,明確定義資料型態
3. 皆使用 jest 測試功能有無正確,主要測試 API 規格 request & response,reducer 邏輯是否符合預期
4. 皆使用 ajax, axios 串接後端 API
5. 擔任 Scrum Master 管理專案進度
6. 協助團隊成員開發工項,給予意見與方向
7. 與 PM 、設計討論 Spec 功能的可行性
8. 協助成員 Code Review
9. 採 scrum 流程開發
10. 撰寫技術相關文件

軟體工程師

精英電腦

七月 2016 - 三月 2019
Taipei, Taiwan

- 負責公司官方網站架構規劃,功能開發,系統測試以及上線。
- 電視牆媒體輪播應用程式設計與開發。

前端開發
1. 擅長使用 Vue 開發 SPA 頁面
2. 熟悉 Html、Css、Javascript、ES6、Functional Programing
3. 熟悉 Bootstrap、Vuetify、Element UI 設計介面
4. 熟悉 SASS / SCSS,樣式架構更清楚乾淨
5. 了解 SEO 原理,增加網站評分,熟悉 Nuxt 框架開發
6. 熟悉 RWD,擅長用 Flexbox、Grid 設計介面架構

後端開發
1. ASP.Net、Node.js 設計 API 與前端串接

開發工具
1. 能夠操作 Webpack 打包模組
2. 能夠使用 Git 版控,增加團隊開發效率
3. 熟悉 Npm / Yarn 指令

學歷

2011 - 2015

中原大學

資訊管理學系

公司專案


拖拉版型

可以讓商家更彈性的設計自家網站的首頁,拖曳即可新增區塊,每一個區塊可以編輯相對應的內容。




新增/編輯商品頁

在後台商品頁顯示所有商品,可以新增/編輯/刪除/發佈/上下架時間/搜尋等細部設定。

搜尋頁

消費者可以透過關鍵字搜尋商品或文章,這頁面是用 Vue 實作。

訂單查詢頁

消費者可以看到訂單處理狀況,這頁面是用 liquid 搭配 jquery 實作。

P.S. 以上公司專案為公開資料,擷取自網路公開文件

Side project

maore 線上桌遊網站

專案特色

只要開啟瀏覽器就可以遊玩,目前已經上線,用 Docker 部屬在 Google cloud platform 的 Cloud Run。

開發工具

1. Next.js - 以 React 為基礎的 SSR 框架

2. Colyseus - 能夠做到建立房間、加入房間等事件,可                            以自訂事件帶不同的參數

3. Redux - 由於整個架構龐大需要 Redux 來管理資料                             狀態及流向

4. Typescript - 具有強行別的集合語言

5. MUI - 可以快速建立起 UI 的工具包

網站連結:
https://maore.io/
專案連結:
https://github.com/JohnsonHuang555/maore
部落格:
https://vocus.cc/article/64f9ec5cfd897800010c1465

首頁

列出所有桌遊,每個遊戲會顯示名稱及簡述。

遊戲頁

顯示該桌遊資訊,列出所有可以加入的房間,每個房間上會列出該房間資訊,例如:房名、模式、玩家人數等。

房間頁

列出所有玩家,建立房間的人會成為房主,只有房主能夠開始遊戲,其餘玩家只能準備遊戲,下方的聊天室窗可以同步與房內人聊天,右方則為該遊戲的設定。

遊玩畫面

遊戲畫面會同步到玩家上,透過 websocket 來執行每個事件的傳遞,有一個玩家中途離開時會結束遊戲回到等待玩家狀態。