跳到正文
線上
zh-Hantv0.46.1 · 1d135e2
mainlane.io

作品集

我們打造的產品:挑戰、方案與成果。

平台
技術

使用示範資料的Shopveyor商店前台:商品目錄包含Nintendo Switch 2、Sony WH-1000XM6、MacBook Air 13″ M4與Pixel 10 Pro,美元價格附格里夫納估價使用示範資料的Shopveyor商店前台:商品目錄包含Nintendo Switch 2、Sony WH-1000XM6、MacBook Air 13″ M4與Pixel 10 Pro,美元價格附格里夫納估價
Shopveyor積極開發中

以Laravel打造的網路商店平台:商品目錄、訂單、多幣別定價與多語言內容,集中在一個管理後台。

  • Laravel
  • Docker
  • Elasticsearch
2025 – 2026更新於 2026年11月13日發布次數:17
DeskForge配置器:附磚牆的3D房間裡有一張升降桌,桌上擺著兩台螢幕、一台筆電與鍵盤,還有辦公椅、層架與立燈,旁邊是商品目錄DeskForge配置器:附磚牆的3D房間裡有一張升降桌,桌上擺著兩台螢幕、一台筆電與鍵盤,還有辦公椅、層架與立燈,旁邊是商品目錄
DeskForge積極開發中

為3C電子商店打造的3D桌面配置器:顧客在自己真實的桌子上打造工作空間,並把整套商品加入購物車。

  • TypeScript
  • React
  • React Three Fiber
  • NestJS
2026 – 至今更新於 2026年11月9日
Plenline 2026年10月月檢視:扣除計畫支出後的可用餘額,收入、已付、待付與信用債務合計,支出表單,以及換算成格里夫納的美元薪資分筆Plenline 2026年10月月檢視:扣除計畫支出後的可用餘額,收入、已付、待付與信用債務合計,支出表單,以及換算成格里夫納的美元薪資分筆
Plenline積極開發中

一款家庭預算網頁應用程式,保留了手工Excel活頁簿的邏輯:月份、帳戶、信用卡債務與依日期排列的付款。

  • Nuxt
  • FastAPI
  • PostgreSQL
2026 – 至今更新於 2026年11月14日
並排的三個FlintGuard手機畫面:裝置列表、處於隔離狀態的新裝置與事件記錄並排的三個FlintGuard手機畫面:裝置列表、處於隔離狀態的新裝置與事件記錄
FlintGuard積極開發中

一款管理GL.iNet Wi-Fi路由器的行動與網頁App:從推播通知核准或封鎖新裝置,把家用網路掌握在手中。

  • Ionic
  • Capacitor
  • TypeScript
  • OpenWrt
2026 – 至今更新於 2026年11月9日
LiveWall動態桌布:雨夜中的霓虹城市,粉紅色月亮與探照燈
LiveWall積極開發中

macOS動態影片桌布:在桌面圖示後方輪播播放清單,可在一台顯示器、所有顯示器同步,或每台顯示器播放不同影片。

  • Swift
  • AppKit
  • SwiftUI
2026 – 至今更新於 2026年11月8日
六種主題下的Brimline:Clay light、Nord dark、Phosphor、Neon、Synthwave與Hologram
Brimline積極開發中

一款Mac選單列App,顯示Claude工作階段限額與每週限額還剩多少、何時重設,以及依目前速度還能用多久。

  • Electron
  • TypeScript
2026 – 至今更新於 2026年11月13日
Children Mission首頁:一個培訓在地社區幫助兒童的烏克蘭信仰型非政府組織,主視覺是一位微笑的女孩,配有「Discover Our Trainings」與「Support Our Work」按鈕,選單中有紫色的「Donate」按鈕
Children Mission維護中

為一個培訓社區幫助兒童的烏克蘭非政府組織打造的WordPress網站:單次與每月捐款、合作申請,以及團隊不需工程師就能自行編輯的內容。

  • WordPress
  • PHP
  • MySQL
  • Docker
  • Cloudflare
2026 – 至今更新於 2026年10月8日
Karuselle首頁:精選設計師時裝轉售平台,滿版呈現一只銀色手提包,配有「Sell with us」按鈕、依品牌與類別劃分的選單、搜尋及語言切換
Karuselle活躍

一個精選二手設計師時裝的多語言交易平台:在持續成長的Laravel程式碼庫上實現語意搜尋、彈性的賣家佣金、歐盟稅務申報與新的付款方式。

  • Laravel
  • PHP
  • MySQL
  • FastAPI
  • Qdrant
2023 – 至今
Decoroll首頁:捲簾與百葉窗商店,有商品目錄按鈕、商品搜尋、電話與營業時間、客廳窗簾橫幅,以及遮光、垂直簾、調光簾等熱門類別
Decoroll維護中

一家販售捲簾的OpenCart商店:先修好價格計算器與結帳流程,再透過一次效能搶救降低資料庫負載,解除了主機商的CPU限制。

  • OpenCart
  • PHP
  • MariaDB
  • Docker
  • Cloudflare
2026年2月 – 8月更新於 2026年8月31日
英文版Freezedry.eu首頁:Harvest Right歐洲官方經銷商,主視覺呈現冷凍乾燥機與幾罐乾燥水果,配有優勢圖示與「Choose a freeze-dryer」按鈕
Freezedry活躍

一家銷往全歐盟的冷凍乾燥機WooCommerce商店:八種營運語言、每個國家都正確的運費,以及更輕更快的網站。

  • WordPress
  • WooCommerce
  • PHP
2026 – 至今
Lendbor已封存

一個管理親友之間私人借款的Telegram機器人,附到達頁面:誰欠多少、還剩多少、下一筆何時到期。2023年的個人專案。

  • Python
  • Flask
  • Django
  • PostgreSQL
  • Redis
  • React
2023年6月 – 8月更新於 2023年8月25日

團隊參與

我作為客戶團隊成員參與的專案。不註明客戶名稱。

AI sales platform for B2B

2025 – 2026

職責全端工程師

一個SaaS平台,企業可在其中設定用於電話、簡訊、電子郵件、即時通訊與網頁小工具的AI銷售代理。

  • Laravel
  • Vue
  • FastAPI
  • PostgreSQL
  • Redis
  • Docker
方案

身為大型團隊中的全端工程師,我負責了客戶儀表板的大部分內容以及多個後端服務:

  • 潛在客戶分派: 輪詢、加權、團隊與混合策略,並考量業務經理的可用時間與行事曆;支援拖放設定的手動順序。
  • 行事曆與預約: 透過Webhook串接Google Calendar與Calendly,雙向同步,跨所有行事曆的空檔服務,防止重複預約,並透過函式呼叫把預約功能提供給AI代理。
  • AI代理: 用於查詢時段、預約與更新聯絡人的函式呼叫;具增量索引的知識庫搜尋;需經確認的語言切換;六種對話風格;防範提示詞注入的防護機制;每次呼叫模型前檢查token。
  • 流程建構器: 重新設計的視覺化編輯器,支援變數、經過驗證的連線與自動排版、自動儲存與還原,並在不遺失資料的情況下把所有流程從JSON遷移到關聯式資料表。
  • 通路: 語音、電子郵件、簡訊與iMessage的統一設定畫面,具即時驗證,以及通路整合頁面。
  • 電話: 通話記錄、錄音與逐字稿,多家語音服務商的語音設定,以CSV建立的外撥活動,瀏覽器測試通話,改用串流語音辨識,以及連接兩家電信業者的SIP橋接,其中電信業者事件與SIP訊令之間的競爭條件由我追查並修正。
  • Token計費: 附預測的餘額儀表板、Stripe依用量付費、訂閱、自動儲值與發票、透過WebSocket即時顯示餘額、一路貫通到Stripe的方案限額與折扣,以及在兩個資料庫之間同步的無限制擁有者角色。
  • 電話號碼市集: 以token計價的號碼搜尋與購買、依國家的法規驗證、支出報告、稽核日誌與角色。
  • 資安: 包括OAuth登入後在內的雙重驗證、SAML SSO、服務間JWT、個人識別資訊遮罩。
  • DevOps: 為每個服務撰寫Dockerfile,以基礎架構即程式碼把正式環境從AWS遷移到Azure,執行手冊以及13筆DNS記錄的原子切換;在連線池耗盡後為12個Python服務導入PgBouncer。
  • 品質: 約25,000行測試程式碼(PHPUnit、Vitest、pytest、E2E)。

Accounting automation for small business

2025年8月 – 10月

職責全端工程師

一個為烏克蘭個人獨資業者打造的會計平台。

  • FastAPI
  • PostgreSQL
  • Redis
  • Next.js
  • Docker
方案

我負責通知微服務及其前端:一套涵蓋電子郵件、簡訊與Telegram的統一範本系統,記錄完整內容的傳送日誌,已讀狀態,依通路的傳送設定(從主要/備用模式改為多選),以及一個Telegram機器人;使用快取在記憶體與Redis中的權杖用戶端實作服務間驗證,並在不中斷其他服務的情況下改為純JWT方式;與政府稅務資料服務串接,包括統一編號查詢、電子簽章到期檢查,以及含風險評分的繳稅分析;網頁應用程式中的通知頁面與通知鈴鐺;測試與部署指南。

SaaS social platform

2023 – 2024

一個為社群與企業內部網路打造的SaaS平台。

  • PHP
  • Yii2
  • ProseMirror
方案

我主要負責的是格式化文字與Markdown編輯器:

  • 編輯器內以CodeMirror 6打造的程式碼區塊: 變更與選取範圍的雙向同步、行號、語法醒目提示、復原與重做、用方向鍵離開區塊,以及正確的複製貼上。
  • 編輯: 依使用者記住的Markdown原始碼模式,強調與刪除線的輸入規則,附新圖示與H1–H4的精簡工具列,會記住狀態的收合選單,從選取文字建立連結,相對URL與標題錨點,以及支援可翻譯關鍵字的表情符號搜尋。
  • 鍵盤與無障礙: Tab鍵在清單、表格與程式碼中可用,在其他地方則移動焦點;在表格最後一格按Tab會新增一列;支援鍵盤焦點的無障礙選單。
  • 品質與交付: 修正18個失敗的測試並新增測試,升級相依套件,ESLint,更小的打包檔,Rollup設定,CI與依標籤自動發布到npm,編輯器套件共發布8個版本。
  • 平台: 新使用者導覽,連同關聯登入一起軟刪除使用者,可設定的收合貼文高度,未讀訊息提示,邀請功能修正,啟動Bootstrap 5遷移,企業版主題、行事曆、推播通知與內容審核。

Corporate site for an agri exporter

2022 – 2023

一個以其他代理商的佈景主題為基礎、附品牌與產品目錄的企業網站。

  • WordPress
  • PHP
方案

我在不改寫佈景主題的前提下,把網站做成英文與烏克蘭文雙語:範本會切換到目前語言,所有自訂欄位標籤與產品文字都在程式碼中註冊為可翻譯。之後我又加入「關於我們」頁面,其中有一張支援桌面與行動裝置、涵蓋59個國家的互動式出口地圖,也加入附彈出視窗的雙語防詐騙聲明,並修正首頁問題。2026年,我稽核了平台,並為下一階段準備了界定範圍的計畫:內容更新、新的品牌頁面、產品技術規格、評價區塊,以及採用由右至左版面的阿拉伯文版本。

Game-match streaming platform

2023年1月 – 2月

一個提供聯賽、投注、錢包與訂閱的遊戲賽事直播平台。

  • Angular
  • NestJS
  • PostgreSQL
  • MongoDB
方案

在一次短期合作中,我實作了以Socket為基礎的即時通知(未讀狀態、賽事與聯賽邀請、後端的新訂閱者事件)、給管理員使用的使用者管理(角色、附原因的停權狀態、搜尋與排序、防止變更自己的角色)、包含區塊鏈與帳戶交易的付款管理,以及支援圖片裁切的類別管理畫面與API中獨立的遊戲規則模組。

Team collaboration platform

2021 – 2022

職責資深前端工程師

一個多租戶工作空間,在網頁、iOS、Android與桌面端提供聊天、看板、行事曆、筆記、檔案與視訊通話。

  • Angular
  • NestJS
  • MongoDB
  • Electron
  • Capacitor
方案

在一年半的時間裡,我是最活躍的前端工程師之一,也負責審查並合併其他工程師的程式碼:

  • 聊天與討論串: 支援提及、表情符號、貼上圖片與拖放檔案的格式化文字編輯器;在瀏覽器、桌面端與iOS上都能使用的語音訊息;附標記、分頁以及從推播通知直達之深層連結的討論串;附「跳到最新」的無限捲動;搜尋;群組聊天與私訊;把訊息連同附件轉成任務、活動或筆記。
  • 看板與任務: 支援拖放與自動捲動的看板、待辦清單與封存、標籤與篩選、工時估算、子任務,以及即時更新的個人看板。
  • 行事曆、筆記與檔案: 提醒、全天與週期性活動、日光節約時間處理、檢查清單,以及具公開與私人資料夾及權限的資料室。
  • 視訊通話: 在空間、專案與私訊中通話,在iOS背景也能響起的鈴聲,外部訪客。
  • 行動與桌面: 新的導覽與重新設計的畫面,iPad與橫向模式支援,Android與iOS建置及商店帳號,桌面通知,勿擾模式,深層連結,以及Windows與macOS的簽署版本。
  • 效能: 將關鍵清單移到NGXS狀態管理,討論串快取,Angular與TypeScript升級。

Early experience

2015 – 2021

以Ionic與Angular打造的行動App(包括已在App Store與Google Play上架的藍牙裝置控制App)、以MQTT進行的物聯網監控、PHP網路商店與圖庫交易平台。

  • Ionic
  • Angular
  • Node.js
  • PHP
  • MySQL
  • MongoDB
方案
  • SaaS平台數據分析 · 2021。 解析並整理Google Analytics資料,為平台客戶產生儀表板與圖表。Angular, Node.js, Express, MongoDB.
  • 家具網路商店 · 2018–2020。 商品卡片改版、配送與金流串接、OpenCart自訂模組。PHP, JavaScript, MySQL.
  • 為攝影師打造的圖庫交易平台 · 2016–2020。 照片上傳與下載、中繼資料擷取、篩選搜尋、金流系統,以及AWS S3檔案儲存。PHP, JavaScript, MySQL, AWS.
  • 網路設備物聯網監控 · 2017–2020。 透過MQTT對客製化路由器下達指令、收集遠端裝置資料、儀表板,以及分析結果達到設定條件時通知使用者。Angular, Node.js, Express, MongoDB, PHP, Shell.
  • iOS與Android吉他學習App · 2017。 影片課程、收藏與新課程推播通知。Ionic, Angular, REST API.
  • iOS與Android習慣養成App · 2016–2017。 從零開發:每日任務與心情記錄、行事曆、成就圖表、排程本機提醒。Ionic, Angular.
  • 藍牙裝置控制App · 2015–2016。 搜尋裝置、密碼保護的配對、傳送BLE指令並顯示狀態、日誌記錄與錯誤處理;已在App Store與Google Play上架,並附WordPress到達頁面。Ionic, Angular, Cordova, WordPress.