香港人工智能工業中心
智能分類回收箱監測系統
(2024-2025)
與香港綠在區區合作，開發環保物料回收監控平台，
實時追蹤全港18區回收機器狀況。
專案目標
開發web應用程式，讓管理員和經理監控全港18區環保回收機器的實時狀況和回收數據，提升回收效率和管理透明度
核心功能
  • 實時監控回收機器狀態
  • 實時數據分析
  • 自動化測試系統
  • 模擬真實回收場景

負責內容
01
前端Dashboard建構
使用React和Material UI建構管理介面，讓管理員能夠監控回收機器的運作狀況和回收數據
02
後端API開發
參與FastAPI後端開發，建立穩定的數據讀取和處理機制，確保前端能即時顯示準確資訊
03
模擬系統
用Python開發24小時運行的模擬程式，生成用戶回收行為數據，同時測試API穩定性和效能表現
貢獻

1．從開發層面上，模擬程式可測試後端的效率及API穩定性，若程式報錯，程式會自動記錄，方便回饋團隊成員，提高開發效率。
2．直觀的管理界面，實時監測機器狀況和回收數據。
技術棧
Next.js
React 框架
Material UI
用於製作數據圖表
Python
用於開發模擬程式
FastAPI
API 框架
Postman
API管理及測試
MySQL
數據庫存取
CURSOR
程式開發工具
Linux Ubuntu
開發用作業系統
Tailor AI - 智能內容創作平台 (2023-2024)
大學畢業作品
開發全端網頁應用程式，整合生成式AI技術，讓網路媒體內容創作者透過智能對話互動，自動生成關鍵詞和SEO優化文章內容。
此應用程式不僅幫助創作者激發新思維，更能產出符合搜尋引擎優化標準的內容，提升創作效率。
DEMO連結

tailor-ai.vercel.app

Tailor AI | Boost Your Traffic with SEO-Optimized Content

※初次使用必需註冊帳號才能使用。（可簡單使用Google帳戶註冊）
※此應用程式只會儲存用戶的聊天記錄，不會主動收集用戶任何個人私隱。
個人項目－全端開發
前端
使用React.js和TailwindCSS打造現代化用戶介面，提供流暢的AI互動體驗
後端服務整合
使用Node.js整合登入授權、MongoDB資料庫、OpenAI API等多項SaaS服務
雲端部署
透過GitHub和Vercel實現自動化部署，確保系統穩定運行和快速迭代

亮點
SEO友好的文章生成
  • 透過互動對話自動生成 SEO 友好內容，讓創作者專注靈感，同時提升搜尋排名。
  • 在建立文章時，特別會包含長尾關鍵字標題、標籤、後設描述，以及其他 SEO 元素，以提升搜尋引擎排名，用戶可直接複製貼上使用。
使用者關鍵字管理
  • 此功能會自動分析使用者的輸入，並將相關關鍵字儲存至 MongoDB。
  • 系統能智慧化地優先處理常用與近期的關鍵字，提升它們在「關鍵字建議區」的可見度。
Tailor AI 為用戶定制 AI 關鍵字
  • 此功能旨在激發腦力激盪，為內容創作提供創新靈感。
  • 建議尚未被使用者搜尋過、但仍高度相關的新關鍵字，進一步豐富搜尋歷史。
技術棧
Figma
UI初稿設計及軟件架構
React.js
用於前端開發
TailwindCSS
CSS框架，用於構建用戶介面
Node.js
後端開發，接通SaaS服務，包括登入授權、資料庫存取、OpenAI API等等
OpenAI API
提供關鍵字及生成SEO友好的內容
Auth0
提供創建用戶及登入功能
MongoDB
用於存取聊天內容和用戶最近使用的關鍵字
GitHub
版本控制
Vercel
部署和托管應用程式

架構
成果
  • 這個項目讓我獲得了一級榮譽（First Class Honour）畢業的成績。
  • 一邊學習及實戰，利用Next.js框架，獨自開發前端後端，並透過REST APIs 接通各種SaaS(軟體即服務)，縮短開發時間。
  • 從構想到程式部署的整個過程均由本人獨立完成，課程導師則提供方向性的指導。
Sky-Station - 區塊鏈網頁遊戲
前端重新設計項目（2021）
背景
疫情期間，以自由工作者身份接案，與另一位自由工作者 UI Designer 合作，成功為 Sky-Station（前身為 CitiStone）進行網站的現代化改版與響應式設計，讓網站煥然一新。
前後對比
Before
After
登入後介面示範
DEMO連結

demo1.lauposang.link

CitiStone

Artificial satellites are the most commonly created man-made machines for space exploration. These satellites are launched into space along with space rockets that will detach and orbit the earth once they reach the desired distance. Communication satellites are also launched into space in order to bridge the transmissions between broadcasting stations and

技術棧
PHP
將HTML組件化
JavaScript
介面互動
SASS
建構介面
Bootstrap 5
前端框架，負責手機端網頁的自適應排版（Responsive Layout）
Made with