Frontend Engineer

Bolas Lien

我喜歡跟團隊一起做產品。

avatar
About Me

Hi, I'm Bolas 👋

🔧 Frontend Engineer

我擅長用 React 與 Vue 打造可維護、具擴展性的 UI。 無論是 Monorepo、CI/CD、自動化測試還是團隊開發流程,我都有實戰經驗。 寫程式對我來說不只是完成任務,更是讓團隊好好合作的設計練習。

🤝 Teamworker

我相信好的團隊比個人強太多,協作力才是長期產出的核心。 我習慣用 code review、pair programming、文件與 daily 協助隊友對齊、共創節奏。 能看到大家一起解決難題、一起成長,就是我選擇寫程式的原因之一。

🍳 Cooker

料理讓我重新連結身體,也練習跟情緒好好相處。 我享受從備料、起鍋、調味到收拾的完整流程,就像開發一個功能一樣有層次。 也許無法天天做菜,但我記得每一次美味都是一次驚喜!

Portfolio

My Projects

這些是我近年做過的專案,從前端架構到後端學習,從獨立開發到多人協作,記錄了我在每個階段的選擇與嘗試。

usphere
USphere 社群平台網站
主導 USphere 專案後端開發,負責 API 設計與部署,並協助前端進行技術討論與 code review。
Node.js
Express
Vercel
Supabase
PostgreSQL

USphere 是與一名前端工程師協作開發 side project,我負責後端開發與技術規劃。從 API 文件撰寫、Express API 開發到部署至 Vercel,皆由我負責完成。資料儲存使用 Supabase(PostgreSQL),並協助進行 PR review,確保專案品質與進度。

使用者可以隨心發表觀點、提出問題,並與他人互動。透過熱門和最新話題的瀏覽,以及按讚、留言等功能,使用者可以參與各種討論。

PChome 24h 購物

PChome 內部系統
使用 React、MUI 從零建置全新電商 CMS/SCM 系統前端架構,並帶領前端開發團隊完成多項專案。
Typescript
React
MUI
React Router
TanStack Query
React Hook Form
Zustand
Zod
Vite
Cypress
Vitest
Turborepo

從零開始開發全新的電商後台系統,初期以 React 建立前端頁面架構與模組,並在系統穩定後,陸續導入 monorepo、CI/CD、自動化測試(Cypress、Vitest),安排重構與效能優化任務,使打包與部署流程顯著提速,讓團隊能以更少的時間交付專案。

參與開發的系統及模組:

  • 內容管理系統:提供內部人員用來佈置前台 Banner、網站設定等
  • 行銷受眾管理系統:提供行銷人員撈取客戶資訊
  • 商品管理系統:提供內部人員及廠商上下架商品、價格調整、活動設定等功能

酒店訂房網

酒店訂房網
參加六角學院 Typescript 30 進行的團隊專案
Typescript
React
MUI

與六角學院課程中的另外兩位同學組隊練習協作開發,我主要負責專案的建置跟定義開發風格,並且協助 Code Review,並且每週約定會議時間來討論專案進度與程式碼,一起學習提升 Coding 能力。前端使用 Typescript + React + MUI 進行開發。

露天市集

露天市集網站
負責前端頁面開發與維護
Vue2
Vuex
LESS
Webpack
  • 賣場折扣碼:開發購買流程折扣碼功能,讓不同賣場自行推出的折扣碼可以在購物車套用並自動選用最佳折扣
  • 購物車喚回:負責 Email 信件前端開發以及數據收集,促進已加車的商品被客戶下單的機會。
  • 推薦好友:串接複製邀請連結與分享至 FB,Line 功能,並將任務內容顯示在頁面上,促進客戶邀請新會員加入,並透過贈送的露幣來促進第一次消費。
  • 天天簽到:串接簽到的任務進度及功能開發,促進客戶每日上站次數及展示商品的機會。
  • 導入前端測試:在購物車、結帳頁導入 E2E 測試工具 Cypress,節省開發測試時間。
  • 重構購物車:導入 Vue Composition API 並且拆分 vue mixin 及 component,以及優化 vuex 程式。
  • 提升前端開發效率:優化 webpack 提升前端程式編譯速度,將 babel-loader 改為 esbuild-loader,從 2 分半變成 1 分半,縮小 js 檔案大小約 30%,頁面載入速度也會提升。
blog
技術部落格
使用 Hexo 架設的部落格網站,主要分享自己學習的技術及開發上的心得,每月超過 500 人次造訪。
miniAttic frontend
小閣樓甜點電商網站
一個以購物車功能為主的全端電商練習專案
JavaScript
Vue
Quasar Cli
SCSS/SASS
Bootstrap
Node.js
Express
MongoDB
Render.io

小閣樓甜點電商網站是我參加泰山職訓 109 年第一期前端技術班(2020/2~2020/8),獨立開發職訓專題,一人負責前後端架構設計、資料流程規劃與 API 串接,訓練了我整合開發的能力。前端使用 Vue、Quasar,後端採用 Express + MongoDB。

使用者可以在前台網站瀏覽最新消息、瀏覽商品、將商品加入購物車、註冊/登入會員、送出訂單、查看會員訂單等功能。後台可以管理網頁內容、上傳圖片、商品上架及訂單管理。

miniAttic backend
拜啵 - 聖經經文查詢 Line 機器人
透過 Line 來查詢聖經經文
Node.js
linebot
Render.io
linebot

隨時都可以用 Line 來查詢聖經經文的小工具

zombie game
打殭屍遊戲
使用 jQuery 做的小遊戲
JavaScript
jQuery

用 jQuery 操作 DOM 的練習,實現遊戲狀態機,有關卡、有分數、有排行榜的遊戲。

Expertise

Skills & Experience

這些是我在專案與工作中累積的技術與經驗,橫跨前端框架、開發流程與團隊協作。

Technical Skills

Frontend
  • HTML5 & CSS3
  • JavaScript & TypeScript
  • React (React Router, TanStack Query, React Hook Form, Zustand)
  • Vue (Vue Router, Vuex, Pinia, Vee validate)
  • Scss/Sass, Less, Bootstrap, Tailwind CSS, MUI
  • Vite, Webpack
  • Zod/Yup
Backend
  • Node.js
  • RESTful APIs
  • Express
  • PostgreSQL
  • Supabase
Tools & Deployment
  • Git & GitHub/Gitlab
  • CI/CD Pipelines
  • Testing (Jest, Vitest, Cypress)
  • Monorepo
Other Skills
  • 敏捷開發(具備相關證照及 Scrum 經驗)
  • 專案管理
  • 技術文件撰寫
  • 建立團隊工作流程
  • 制定團隊 Git Flow 與 Code review 框架

Work Experience

資深軟體工程師
2023 - 2025
網路家庭國際資訊股份有限公司(PChome)
Typescript
React
MUI
React Router
TanStack Query
React Hook Form
Zustand
Zod
Vite
Cypress
Vitest
Turborepo
  • 主導 CMS/SCM 系統架構與模組化開發,建置內容管理、行銷受眾管理、商品管理等三套後台系統,有效提升營運效率與降低 7 位數採購成本
  • 制定團隊前端架構與開發規範,導入 React + TypeScript、Zustand、Zod、TanStack Query、React Hook Form 等前端技術
  • 設計並導入 monorepo 架構與 CI/CD 策略,建立自動部署流程
  • 優化前端建置流程,將 CI/CD 執行時間縮短 61%(4 分 20 秒 → 1 分 40 秒)
  • 導入自動化測試(Cypress, Vitest),提升功能穩定性並減少回歸測試負擔
  • 參與專案規劃,從使用者角度檢視需求可行性,主動提出操作流程設計與改善建議
  • 導入 Scrum 工作流程、制定開發規範與 Code Review 機制,建立穩定的團隊節奏,持續優化產品品質與交付效率
  • 擔任前端 Lead,與 10 人以上的跨職能團隊協作,帶領前端成員完成多項系統開發專案
  • 指導新人熟悉開發流程與系統架構,並透過技術文章、開發心得與 AI 工具經驗分享,提升團隊整體技術能量
前端工程師
2020 - 2023
露天市集國際資訊股份有限公司
JavaScript
Vue
Vuex
LESS
Gulp
Webpack
Cypress
  • 露天市集網站前端開發與維護。
  • 專注購物車頁面重構與測試導入,升級 Vue 版本,並且使用 Vue Composition API 與 Cypress 重構核心流程。
  • 優化 Webpack 設定,縮短 60% 編譯時間,減少 30% JS 檔案大小,加速頁面載入速度。
  • 推動 FE Team (10 人) 開發環境轉為 Docker 並優化 Webpack 編譯效能,縮短 40% 開發時間。
  • 推動 Web Team (約 60+ 人) 版控流程從 SVN 遷移至 GIT,提升團隊協作效率。
  • 擔任技術治理委員,規劃年度技術策略;協助招募與指導新進工程師快速上手。
遊戲軟體開發經驗
2013 - 2019
多家遊戲研發公司(非博弈)
Unity3D
C#
  • 擔任過研發工程師、遊戲企劃、遊戲執行製作人與資深產品經理。
  • 帶領團隊開發超過 6 款 VR 遊戲研發專案,負責過 5 款手機及網頁遊戲等遊戲設計及營運。
  • 負責從技術實作到專案管理,累積跨部門協作與流程設計的深厚經驗。
Get In Touch

Contact Me

想跟我進一步聊聊嗎?歡迎透過以下方式聯繫!