Search resumes and take the initiative to contact job applicants for higher recruiting efficiency. The Choice of Hundreds of Companies.
工作資歷大約三年多的前端工程師,擅長以 React 框架打造系統介面,參與的專案類型有形象官網、研發內部數據監控系統、社群互動線上平台、國際企業跨部門業務整合大型專案系統等。
與設計師常常進行良好溝通,能夠理解設計師的UI需求,甚至更近一步提出UX討論,以期雙方都能更找到更良效的介面表達。因有實作CRUD和ERP設計等經驗,故也擅於與後端討論API服務,根據雙方對資料和業務邏輯的認知,尋求最適合的前後端資料傳送規格。
在技術方面以 JS, React 見長,也同時參與過以 C# framwork, Php Laravel 為主要框架開發的不同後端專案,但擅長領域還是以前端為主。
過去經歷較著重於溝通和團隊合作,故注重團隊合作模式,但希望能夠更加認識開發測試,並且建立撰寫測試的專案。
如果專案有需求,願意學習 React Native 建置跨平台專案。
Apr 2023 - Feb 2024 | Taipei, Taiwan
共同開發客戶公司的業務流程引擎,權限使用者可以登入平台填寫近千種業務表單, 並且隨時查看表單狀態、修改已填寫表單。
團隊成員有3名SA、2名PM、1名UIUX、各2名前後端工程師。
在團隊中是前端工程師,負責以 react-hook-form 實作表單資料驗證與測試、MUI元件分頁列表操作、Apollo GraphQL收發資料、TailwindCSS config 和元件外觀、i18next 多語系設定、參與後端業務邏輯規劃與討論。
原有專案已建置 Apollo server, Next.js, TypeScript, MobX,加入團隊後引入 TailwindCSS,並和另一名前端以及 mentor 共同確立 coding style。
透過 Apollo server 以GraphQL傳送和接收後端資料,需頻繁密切與後端溝通 ERP,以避免資料結構難以採用。
因客戶業務擴及跨洲,專案有多語系需求,所以負責引入 i18next 並與後端共同實作資料庫內的語系資料儲存。
與另一名前端共同實作登入系統,整合客戶 Okta 登入和系統之間的JWT驗證。同時實作登入者身份權限管理,配合後端依據客戶公司內部職等進行前台權限設定。
與另一名前端共同開發以 Material UI 元件庫為主的表單輸入和按鈕等 components,以符合UI一致性。另外也負責製作跳窗警告、文字輸入驗證等全站可引用的 widgets。
時間格式使用 date-fns 套件,時間資料皆轉換為 ISO 8601 UTC+8 給後端,方便後端管理。
每1.5週進行一次 SCRUM開發,週一確立任務,週二和四 code review,週五發布版本,隔週為檢驗週,若功能確定發布,將提前與PM一起準備下一輪開發任務。
前端技術:Next.js 14, react-hook-form, Tailwind CSS, TypeScript, GraphQL, MUI, i18next, MobX, react-dnd, date-fns
後端技術:Node.js, TypeScript, TypeORM, PostgreSQL, Mermaid
Jun 2022 - Jan 2023 | Taipei, Taiwan
團隊共同開發一大型社群互動平台,使用者可以自設類似臉書粉絲專頁的個人專屬頁面,個人頁面可連結至線上雜誌 https://www.champimom.com。
另外參考 substack 和方格子的文章付費模式,讓註冊會員可以透過平台進行粉絲追蹤管理與廣告分享,另有首頁和瀏覽頁等。
加入團隊前期因專案的業務邏輯待優先討論,以junior後端工程師身份實作CRUD,待團隊開發任務和流程穩定後,便轉為前端工程師繼續前台開發。
與設計師、後端工程團隊共同跑敏捷開發,每週一開會討論任務分配和權重,每兩週發布一次更新。
每天 standup meeting 進行10分鐘簡潔報告。
參與後端以 php laravel8 建立的專案,撰寫前後端溝通的API文件。
負責一般會員和付費會員的登入與使用權限驗證,前台有 JWT 和 OATH2.0 兩種驗證方式。
開發文章編輯模組:
新增和編輯文章
上架狀態修改、下架、發佈排程
編輯時同步顯示字數上限並予以敏感字警告
語系設定
加入 hashtag 標籤
圖片上傳與修改裁切,除了文章封面以外,也隨時可插入文章內容
隨時透過權限連結進入編輯文章模式
開發短文模板和前台文章、短文、短影音的共用留言模板,類似 instagram 留言功能:
點讚、收藏、加入書單、訂閱
點入頭像進入個人主頁、可隨時對使用者按下訂閱
進行一級留言和二級留言回覆
留言內容可以文字和自動裁切圖片
開發群組頻道模板,類似 discord 頻道,有大群組和小頻道:
大群組可以編輯簡介、隱私公開設定、顯示群組人數、黑名單設定
隱私公開設定可以決定自動或手動申請加入
小頻道經過頻道擁有者授權後即可加入,內部留言介面與短文模板相同
開發個人主頁模板:
非平台登入者顯示公開介面只能看到自訂公開資訊
登入者可直接在個人主頁編輯頭像、封面、簡介
可被其他登入者訂閱、追蹤,顯示追蹤人數和公開名單
顯示已建立文章、短文、擁有群組等
共同協作平台以MUI為底的UI元件庫。
注重使用者體驗,與UIUX設計師經常性討論介面設計。
與團隊共同建立AWS EC2雲端部署。
參與討論金流ERP。
技術:Next.js 11, react, SCSS, react-hook-form, yup, axios(RESTful), MUI, i18next, moment.js, CK-Editor, php, laravel8, postgreSQL, DBeaver
Oct 2021 - Apr 2022 | Taipei, Taiwan
接洽設計與醫療領域的案源,與合作設計師共同討論 site map,並將各網站從網域申請開始一路開發到上線運作。
線上產品目錄網站:
與客戶產品設計工作室合作,將近千件產品目錄線上DM化,並提供線上客服服務。
網站:moumoustudiocom
網站規劃:
全站為響應式網頁設計,首頁為一屏幕式動態滾動帶出三個主題,分別連結到關於我們、客製禮品、產品目錄。
全站皆可進行線上聯絡服務。
導覽列:關於我們、客製禮品、服務介紹、最新消息、聯絡我們、產品目錄。
產品目錄可以更進一步連結到產品細節和設計理念的介紹頁。
技術:react, react-router, styled component, react-hook-form
全部開發時程:從2021年10月起討論設計與規劃網站架構,於2022年3月正式上線,站台由客戶自行維護。(客戶於 2023 年改用 wordpress)
美國心理與行為治療診所官網:
將原有的 wordpress 網頁與跨國客戶溝通,將診所介紹和預約服務線上化。
網站:https://www.sfcompassion.com
網站規劃:
全站響應式設計,多為一屏幕設計,與設計師專注於網站畫面細節表現。
導覽列:
Our team 以及各成員客製化介紹頁
Psychotherapy 共三頁診所理念介紹
workshops
hoarding & cluttering 共三頁診所療程介紹
clinician training 預約服務
research
resources
透過第三方API進行收發信件。
技術:Next.js 13, react-hook-form, yup, SCSS
全部開發時程:
從2021年12月起討論設計與規劃網站架構,於2022年2月初步上線第一版,該版只顯示主頁、系度活動頁和診所理念介紹,站台架設於客戶既有的 wordpress admin。
接著依據站台流量與行銷需求,陸續規劃完整 site map,全站於 2022年5月上線第二版,增設年度活動和診所醫療成員介紹。
2022年12月客戶聯繫進行網站架構翻修,於2023年1月開始與設計師討論,並於2023年4月更新第三版,站台改架設於 Vercel。
目前伺服器與站台皆交由客戶自行維護。
Aug 2019 - Oct 2021 | Taipei, Taiwan
主要工作內容為內部系統獨立開發、建設與維護對外官方網站。
獨立開發系統:公司內部行政專案管理系統、研發部門內部各項API專案管理與測試系統、對外官方英文網站(於任職期間停止維護)、對外電商網站(於任職期間停止開發)
協作開發系統:資訊防護與管理系統之部分子系統、對外官方中文網站https://ansonnet.com.tw/
其中獨立開發系統包含主要UI/UX簡易需求、前後台架設與功能驅動開發、API流程撰寫、資料庫申請架設與資料維護、系統測試等等;而協作開發限於前端技術提供,並未直接參與後端業務流程。
部門主要採取敏捷式開發、測試驅動開發(TDD),主要使用技術為ReactJS函式庫、Microsoft's C# 整合 Visual Studio 環境,以及 SQLServer 。
- 參與系統架構ERP規劃與討論,從零開始負責此專案的技術和迭代更新。
- 負責前台專案所有架構,包括頁面分層設計、UI元件化、套件打包成元件、RWD規劃等。
- 主頁面為系統的列表分頁和進階條件搜尋。
- 一級按鈕可以進行任務表單元件的新增、修改、刪除,包含時間格式轉換、字串驗證等。
- 實施JWT登入驗證。
- 將任務數據做成類似甘特圖的列表式報表,並可將部門數據轉換為圓餅圖。
- 將公司產品數據做成動態線性圖,可透過喜好設定選擇全儀表板數據計時自動更新。
- 前台防患XSS攻擊、CSRF攻擊、身份驗證等。
- 後端專案負責任務CRUD以及各項條件搜尋,同時防範網站攻擊,包含跨網域請求、SQLinjection、驗證、Session連線等資安防護。
- 與網管人員共同維護前後台專案測試機與正式環境。
前端網站設計開發班 • Feb 2019 - Aug 2019
於課程培訓期間學會 HTML5 , CSS3 , JavaScript , PHP , SQL 等語言,使用資料庫為MySQL,接觸前端框架有 JQuery , VueJS,作品有獨立完成之靜態商業推廣網站、以及與分組團隊合作之電商網站。
培訓結束後投入的第一份前端工作為建置與維護內部系統,除了前端開發以外,亦參與部分系統的後端業務流程開發與撰寫,並長期負責相關資料庫日常維護。工作期間學會 ReactJS , C# ,並逐漸熟悉 SQLServer 作為慣用資料庫。
森林暨自然資源學系學士 • Sep 2012 - Jun 2017
在學期間活躍於社團和系上實習與活動,培養出樂觀積極溝通的處事態度。
工作資歷大約三年多的前端工程師,擅長以 React 框架打造系統介面,參與的專案類型有形象官網、研發內部數據監控系統、社群互動線上平台、國際企業跨部門業務整合大型專案系統等。
與設計師常常進行良好溝通,能夠理解設計師的UI需求,甚至更近一步提出UX討論,以期雙方都能更找到更良效的介面表達。因有實作CRUD和ERP設計等經驗,故也擅於與後端討論API服務,根據雙方對資料和業務邏輯的認知,尋求最適合的前後端資料傳送規格。
在技術方面以 JS, React 見長,也同時參與過以 C# framwork, Php Laravel 為主要框架開發的不同後端專案,但擅長領域還是以前端為主。
過去經歷較著重於溝通和團隊合作,故注重團隊合作模式,但希望能夠更加認識開發測試,並且建立撰寫測試的專案。
如果專案有需求,願意學習 React Native 建置跨平台專案。
Apr 2023 - Feb 2024 | Taipei, Taiwan
共同開發客戶公司的業務流程引擎,權限使用者可以登入平台填寫近千種業務表單, 並且隨時查看表單狀態、修改已填寫表單。
團隊成員有3名SA、2名PM、1名UIUX、各2名前後端工程師。
在團隊中是前端工程師,負責以 react-hook-form 實作表單資料驗證與測試、MUI元件分頁列表操作、Apollo GraphQL收發資料、TailwindCSS config 和元件外觀、i18next 多語系設定、參與後端業務邏輯規劃與討論。
原有專案已建置 Apollo server, Next.js, TypeScript, MobX,加入團隊後引入 TailwindCSS,並和另一名前端以及 mentor 共同確立 coding style。
透過 Apollo server 以GraphQL傳送和接收後端資料,需頻繁密切與後端溝通 ERP,以避免資料結構難以採用。
因客戶業務擴及跨洲,專案有多語系需求,所以負責引入 i18next 並與後端共同實作資料庫內的語系資料儲存。
與另一名前端共同實作登入系統,整合客戶 Okta 登入和系統之間的JWT驗證。同時實作登入者身份權限管理,配合後端依據客戶公司內部職等進行前台權限設定。
與另一名前端共同開發以 Material UI 元件庫為主的表單輸入和按鈕等 components,以符合UI一致性。另外也負責製作跳窗警告、文字輸入驗證等全站可引用的 widgets。
時間格式使用 date-fns 套件,時間資料皆轉換為 ISO 8601 UTC+8 給後端,方便後端管理。
每1.5週進行一次 SCRUM開發,週一確立任務,週二和四 code review,週五發布版本,隔週為檢驗週,若功能確定發布,將提前與PM一起準備下一輪開發任務。
前端技術:Next.js 14, react-hook-form, Tailwind CSS, TypeScript, GraphQL, MUI, i18next, MobX, react-dnd, date-fns
後端技術:Node.js, TypeScript, TypeORM, PostgreSQL, Mermaid
Jun 2022 - Jan 2023 | Taipei, Taiwan
團隊共同開發一大型社群互動平台,使用者可以自設類似臉書粉絲專頁的個人專屬頁面,個人頁面可連結至線上雜誌 https://www.champimom.com。
另外參考 substack 和方格子的文章付費模式,讓註冊會員可以透過平台進行粉絲追蹤管理與廣告分享,另有首頁和瀏覽頁等。
加入團隊前期因專案的業務邏輯待優先討論,以junior後端工程師身份實作CRUD,待團隊開發任務和流程穩定後,便轉為前端工程師繼續前台開發。
與設計師、後端工程團隊共同跑敏捷開發,每週一開會討論任務分配和權重,每兩週發布一次更新。
每天 standup meeting 進行10分鐘簡潔報告。
參與後端以 php laravel8 建立的專案,撰寫前後端溝通的API文件。
負責一般會員和付費會員的登入與使用權限驗證,前台有 JWT 和 OATH2.0 兩種驗證方式。
開發文章編輯模組:
新增和編輯文章
上架狀態修改、下架、發佈排程
編輯時同步顯示字數上限並予以敏感字警告
語系設定
加入 hashtag 標籤
圖片上傳與修改裁切,除了文章封面以外,也隨時可插入文章內容
隨時透過權限連結進入編輯文章模式
開發短文模板和前台文章、短文、短影音的共用留言模板,類似 instagram 留言功能:
點讚、收藏、加入書單、訂閱
點入頭像進入個人主頁、可隨時對使用者按下訂閱
進行一級留言和二級留言回覆
留言內容可以文字和自動裁切圖片
開發群組頻道模板,類似 discord 頻道,有大群組和小頻道:
大群組可以編輯簡介、隱私公開設定、顯示群組人數、黑名單設定
隱私公開設定可以決定自動或手動申請加入
小頻道經過頻道擁有者授權後即可加入,內部留言介面與短文模板相同
開發個人主頁模板:
非平台登入者顯示公開介面只能看到自訂公開資訊
登入者可直接在個人主頁編輯頭像、封面、簡介
可被其他登入者訂閱、追蹤,顯示追蹤人數和公開名單
顯示已建立文章、短文、擁有群組等
共同協作平台以MUI為底的UI元件庫。
注重使用者體驗,與UIUX設計師經常性討論介面設計。
與團隊共同建立AWS EC2雲端部署。
參與討論金流ERP。
技術:Next.js 11, react, SCSS, react-hook-form, yup, axios(RESTful), MUI, i18next, moment.js, CK-Editor, php, laravel8, postgreSQL, DBeaver
Oct 2021 - Apr 2022 | Taipei, Taiwan
接洽設計與醫療領域的案源,與合作設計師共同討論 site map,並將各網站從網域申請開始一路開發到上線運作。
線上產品目錄網站:
與客戶產品設計工作室合作,將近千件產品目錄線上DM化,並提供線上客服服務。
網站:moumoustudiocom
網站規劃:
全站為響應式網頁設計,首頁為一屏幕式動態滾動帶出三個主題,分別連結到關於我們、客製禮品、產品目錄。
全站皆可進行線上聯絡服務。
導覽列:關於我們、客製禮品、服務介紹、最新消息、聯絡我們、產品目錄。
產品目錄可以更進一步連結到產品細節和設計理念的介紹頁。
技術:react, react-router, styled component, react-hook-form
全部開發時程:從2021年10月起討論設計與規劃網站架構,於2022年3月正式上線,站台由客戶自行維護。(客戶於 2023 年改用 wordpress)
美國心理與行為治療診所官網:
將原有的 wordpress 網頁與跨國客戶溝通,將診所介紹和預約服務線上化。
網站:https://www.sfcompassion.com
網站規劃:
全站響應式設計,多為一屏幕設計,與設計師專注於網站畫面細節表現。
導覽列:
Our team 以及各成員客製化介紹頁
Psychotherapy 共三頁診所理念介紹
workshops
hoarding & cluttering 共三頁診所療程介紹
clinician training 預約服務
research
resources
透過第三方API進行收發信件。
技術:Next.js 13, react-hook-form, yup, SCSS
全部開發時程:
從2021年12月起討論設計與規劃網站架構,於2022年2月初步上線第一版,該版只顯示主頁、系度活動頁和診所理念介紹,站台架設於客戶既有的 wordpress admin。
接著依據站台流量與行銷需求,陸續規劃完整 site map,全站於 2022年5月上線第二版,增設年度活動和診所醫療成員介紹。
2022年12月客戶聯繫進行網站架構翻修,於2023年1月開始與設計師討論,並於2023年4月更新第三版,站台改架設於 Vercel。
目前伺服器與站台皆交由客戶自行維護。
Aug 2019 - Oct 2021 | Taipei, Taiwan
主要工作內容為內部系統獨立開發、建設與維護對外官方網站。
獨立開發系統:公司內部行政專案管理系統、研發部門內部各項API專案管理與測試系統、對外官方英文網站(於任職期間停止維護)、對外電商網站(於任職期間停止開發)
協作開發系統:資訊防護與管理系統之部分子系統、對外官方中文網站https://ansonnet.com.tw/
其中獨立開發系統包含主要UI/UX簡易需求、前後台架設與功能驅動開發、API流程撰寫、資料庫申請架設與資料維護、系統測試等等;而協作開發限於前端技術提供,並未直接參與後端業務流程。
部門主要採取敏捷式開發、測試驅動開發(TDD),主要使用技術為ReactJS函式庫、Microsoft's C# 整合 Visual Studio 環境,以及 SQLServer 。
- 參與系統架構ERP規劃與討論,從零開始負責此專案的技術和迭代更新。
- 負責前台專案所有架構,包括頁面分層設計、UI元件化、套件打包成元件、RWD規劃等。
- 主頁面為系統的列表分頁和進階條件搜尋。
- 一級按鈕可以進行任務表單元件的新增、修改、刪除,包含時間格式轉換、字串驗證等。
- 實施JWT登入驗證。
- 將任務數據做成類似甘特圖的列表式報表,並可將部門數據轉換為圓餅圖。
- 將公司產品數據做成動態線性圖,可透過喜好設定選擇全儀表板數據計時自動更新。
- 前台防患XSS攻擊、CSRF攻擊、身份驗證等。
- 後端專案負責任務CRUD以及各項條件搜尋,同時防範網站攻擊,包含跨網域請求、SQLinjection、驗證、Session連線等資安防護。
- 與網管人員共同維護前後台專案測試機與正式環境。
前端網站設計開發班 • Feb 2019 - Aug 2019
於課程培訓期間學會 HTML5 , CSS3 , JavaScript , PHP , SQL 等語言,使用資料庫為MySQL,接觸前端框架有 JQuery , VueJS,作品有獨立完成之靜態商業推廣網站、以及與分組團隊合作之電商網站。
培訓結束後投入的第一份前端工作為建置與維護內部系統,除了前端開發以外,亦參與部分系統的後端業務流程開發與撰寫,並長期負責相關資料庫日常維護。工作期間學會 ReactJS , C# ,並逐漸熟悉 SQLServer 作為慣用資料庫。
森林暨自然資源學系學士 • Sep 2012 - Jun 2017
在學期間活躍於社團和系上實習與活動,培養出樂觀積極溝通的處事態度。