徐育瑋

具備科技業背景的前端工程師，擅長將流程優化思維導入開發實作。曾透過系統化表單設計大幅提升跨部門協作效率；並具備技術分享主持與文件整合經驗。

期待發揮跨領域溝通能力，為團隊創造開發技術以外的附加價值。

  • 具備 React、JavaScript、TypeScript、RWD、RESTful API、CI/CD 開發經驗
  • 還原 Figma、Adobe XD 設計稿，並遵循設計規範建立元件化架構
  • 使用 Supabase 建置後端服務，包含登入註冊、資料表管理、頭像上傳與權限控管
  • 導入 Playwright 進行端對端測試，提升功能穩定性與測試效率
  • 建立團隊協作的 Git Branch、Commit、PR 與 ESLint 規範
  • 推動團隊溝通與專案管理工具，如：Discord、Notion

前端開發

  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • React
  • RWD
  • Tailwind CSS
  • shadcn/ui

後端與資料庫整合

  • Supabase
  • PostgreSQL
  • RESTful API

開發工具與部署流程

  • Node.js
  • npm
  • Vite
  • Git
  • GitHub
  • Vercel

測試與品質控管

  • Playwright

AI 協作工具

  • ChatGPT
  • Gemini
  • Cursor
  • Google Antigravity
  • Google Stitch

團隊協作工具

  • Notion
  • Discord


Better Than 威秀 | React + TypeScript

https://better-than-vieshow-user.vercel.app/

採用 React + TypeScript 建構 SPA，搭配 Tailwind CSS、Vite 提升開發效率，運用 Context API 管理複雜訂票狀態、封裝 RESTful API、導入 PWA 離線體驗，並結合 Framer Motion、Swiper 與 react-zoom-pan-pinch 優化互動效果及影廳座位縮放平移操作。


此專案為火箭隊培訓營團隊作品，我擔任前端開發的角色，除負責登入註冊、影廳座位、購票流程等核心邏輯外，亦獨立開發後台管理平台，涵蓋新增影廳、影廳管理、座位區配置，並同步負責前端架構設計與協作規範制定，確保專案具備高度可維護性。

基於現有電影購票流程的使用體驗觀察，我們規劃並開發一款著重於提升使用者購票流程與操作體驗的電影購票系統。



【技術亮點】

  1. 針對影廳選位操作，整合 react-zoom-pan-pinch 達到座位縮放平移的效果，解決手機端點擊位子過小的痛點，提升操作直覺度。
  2. 運用 Framer Motion 與 Swiper 打造直覺的卡片式交互，解決傳統選片頁面切換僵硬的問題，透過流暢的動畫效果提升購票過程中的視覺回饋。
  3. 導入 PWA 技術實現離線功能，解決使用者進入影城訊號不佳時無法查看票券的痛點，並透過加入主畫面功能提供媲美原生 App 的操作便利性。
  4. 獨立開發高互動性後台，支援工具列切換與滑鼠批次編輯（連續放置/清除）。導入走道自動識別偵測邏輯，大幅提升管理端配置影廳的效率。


Github Repository ( User )：github.com/Adolph-hong/better-than-vieshow-user

Github Repository ( Admin ) : github.com/Adolph-hong/better-than-vieshow-admin

Demo ( Admin ) : https://better-than-vieshow-admin.vercel.app/

Slide：https://pse.is/8q7hvr


測試帳號：[email protected]
測試密碼：Abcd1234
前台 ( User )： 建議使用行動裝置開啟 Demo（或桌機開啟行動裝置模式）。

後台 ( Admin )： 請使用電腦瀏覽器開啟，以獲得最佳管理體驗。


PayWe 管委 | React + TypeScript + Supabase

https://paywe-guanwei.vercel.app/

本專案採用 React + TypeScript 搭配 Vite、Tailwind CSS，結合 Radix UI 與 shadcn/ui 建構響應式介面，提升開發效率與整體前端效能。開發過程中運用 Google Stitch 生成 UI 原型，並串接 Google Antigravity 輔助畫面產出，加速設計到實作流程。後端以 Supabase 實現使用者認證、權限控管與分組帳務邏輯，並導入 Playwright 進行端對端測試，結合 PWA 提供離線使用與接近原生 App 的體驗。

因為與朋友、家人出遊時常遇到各自付費、事後難以計算欠款的困擾，且市售多款分帳 App 多存在登入門檻高、資料同步延遲或介面繁瑣等問題，因此我獨立開發了這款全端分帳應用，自動化處理多人複雜債務關係，最小化結算轉帳次數。

GitHub Repository : https://github.com/iamlouxu/paywe-guanwei
測試帳號：[email protected]
測試密碼：123456






Git Playground | React + TypeScript

https://git-playground-three.vercel.app/

此專案為 Git 互動式學習網站，透過視覺化與互動操作，協助使用者理解 Git 基本指令與版本控制流程。以 vibe coding 方式進行專案開發，由自身主導功能設計與實作方向，並搭配 AI 作為輔助工具提升開發效率，從需求規劃、前端實作、版本控制到部署上線皆為獨立實作，並使用 GitHub 與 Vercel 完成自動化部署。

Git 在團隊開發中相當重要，但對初學者而言較為抽象，本專案希望透過互動式操作，協助使用者理解 Git 在團隊協作與版本管理中的實際價值。

使用技術：

  • React：元件化開發介面
  • TypeScript：為資料結構提供型別定義
  • Tailwind CSS：定義整個專案的視覺風格
  • GSAP：捲動網頁時，讓說明區段產生平滑的進場動畫
  • Vercel：搭配 GitHub 進行前端專案部署，完成基礎 CI / CD
  • Vite：用於前端開發建置，支援快速熱更新（HMR）與專案打包
  • Google Antigravity：提出優化建議，並加速開發效率
Powered By