Project 012021.08 - 2021.08
My portfolio
個人 portfolio 展示，包含數個 JavaScript 作品分享，並部署到 Netlify，過程中自行 debug 並分享到 GitHub。
個人品牌定位、內容編排與前端呈現
JavaScriptNetlifyGitHub
個人 portfolio 展示
JavaScript 作品分享
部署到 Netlify
分享至 GitHub
Portfolio
完整作品集
首頁保留最重要的三個代表作，這裡補上完整專案列表，方便快速瀏覽題目、技術與實作重點。
Project 02
MyRobotFriends
React 開發學習專案，將 React 專案部署到 GitHub，並有搭配 blog 學習資源分享。
前後端整合、功能實作、專案部署
ReactGitHub
React 開發學習
部署到 GitHub
Project 032021.09 - 2021.10
smart-brain-api
React + Node.js + PostgreSQL 的人臉辨識專案，包含註冊、登入與人臉辨識功能，並部署至 Heroku。
前後端整合、功能實作、專案部署
ReactNode.jsPostgreSQLHeroku
串接人臉辨識 API
串接前端 React
串接後端 Node.js
串接資料庫 PostgreSQL
Project 042023.01 - 2023.02
crown-clothing
電商 shop page，含 Firebase Google 註冊登入、購物車系統與部署流程。
前後端整合、功能實作、專案部署
ReactFirebaseNetlifyCI/CD
Shop page
Firebase Google 註冊與登入登出
購物車系統
Netlify CI/CD
Project 05
家庭預約洗衣系統
為了解決家庭成員洗衣時間不同造成的溝通成本，設計具登入、預約、群組與通知模組的系統。
Side project 規劃、功能設計、整合實作
SvelteSupabaseGoogle AuthLINE Messaging API
OAuth 登入模組
預約模組
群組模組
Line 官方通知整合
Project 062026.01 - 2026.02
SaaS 平台 — AI 自動建立網站 (SEO Flow)
AI 驅動的網站生成與內容管理平台。使用者可透過 AI Chat 輸入主題，自動建立網站結構、生成內容與 SEO metadata，並具備 CMS、Media Library、Knowledge Base 與多租戶 SaaS 管理能力。
AI SaaS 平台開發、內容生成流程、部署與雲端整合
SvelteKitTailwind CSSTipTap EditorNode.jsPostgreSQL
AI Chat 建立網站主題
自動生成首頁與內容
自動產生 SEO metadata
網站預覽頁
Project 07
Dev Snippet Manager
一個專注於實作真實 OAuth 流程與權限控管的開發者工具。不同於單純 login demo，此專案完整實作 GitHub / Google OAuth、資料庫 session、使用者資源 ownership 控制與 server-side authorization。
認證流程設計、權限控管與全端架構實作
Next.js (App Router)Auth.js v5PostgreSQLDrizzle ORMZod
實作 GitHub 與 Google OAuth（Auth.js v5）
資料庫 session 管理（非 JWT-only demo）
Next.js App Router protected routes
Server-side ownership enforcement（確保資料只屬於該 user）
Project 08
Super Clinic
中醫診所掛號首頁 prototype，目標是在短時間內完成可 demo 的產品體驗。透過清楚且可信的資訊設計，讓使用者快速理解門診班表並透過 AI 掛號助手完成預約引導。
產品原型規劃、資訊架構與 AI 輔助互動設計
Next.jsReactTailwind CSSFrontend Fake DataAI Chat UI (mock)
快速打造可 demo 的診所掛號首頁
設計清楚且可信的醫療資訊 UI
門診班表視覺化呈現
AI 掛號助手（chatbot UI）