Rick's DevNotes
筆記關於我作品集

© 2026 Rick's DevNotes. All rights reserved.

作品集

本頁展示的專案是我平常工作之餘開發的 Side Projects，內容和在職期間之公司專案無關，不涉及任何營業機密。

https://rickchiu.me/api/image?key=portfolios/個人部落格全端專案/cover.png
個人部落格全端專案
2025/05/12 - 至今

1. 框架：Next.js 15 2. 核心函式庫：Mdx Editor、Next Mdx Remote Client、Pg 等 3. 資料庫：PostgreSQL 4. 檔案儲存：Amazon S3（非結構化資料） 5. 環境：AWS EC2/ Nginx 6. CDN：Amazon CloudFront 7. AI API：OpenAI API

https://rickchiu.me/api/image?key=portfolios/SockStream 直播聊天平台/cover.png
SockStream 直播聊天平台
2025/02/04 - 至今

SockStream 是個模擬直播平台的練習專案 1. WebSocket（Socket.io）實現即時通訊 2. HLS.js 進行影音串流整合 3. Better Auth 實現登入機制 4. Docker Container

https://rickchiu.me/api/image?key=portfolios/個人部落格（初版）/cover.webp
個人部落格（第一版）
2021/10/31 - 2021/12/07

【此為第一版設計，後續已重構新版本，功能與架構更完整】 這是我自行開發的部落格平台，前後端皆由我獨立完成。 平台的核心功能是展示技術筆記：文章內容直接來自 GitHub Repo 的 Markdown 檔案，並在前端轉換為 JSX 呈現。雖然當前版本不支援文章撰寫與編輯，且已下線，但它是我進入 前後端整合 的重要起點。透過這個專案，我更深入理解了 SPA 架構、API 串接、身分驗證 等核心概念，也為後續的重構版本打下基礎。

https://rickchiu.me/api/image?key=portfolios/早餐店點餐 App/cover.png
早餐店點餐 App
2021/08/04 - 2021/08/25

1. 使用 React 框架建立之 SPA 2. 使用 Redux 進行狀態管理 3. 整合 Firebase Auth 以及 Google OAuth 2.0 4. 建立並串接 Firebase Realtime Database

https://rickchiu.me/api/image?key=portfolios/隨機迷宮遊戲/cover.png
隨機迷宮遊戲
2021/07/02 - 2021/07/20

1. 使用 TypeScript 結合 React & Redux 建立 SPA 2. 使用 Scss 預處理器進行版面佈局 3. 建立 圖 (Graph) 之資料結構以產生隨機迷宮

https://rickchiu.me/api/image?key=portfolios/公車動態查詢 APP (API 已停用)/cover.png
公車動態查詢 APP (API 已停用)
2021/01/31 - 2021/02/25

原金鑰已停用，後續將重新申請串接 1. 使用 Vanilla JS 實作 MVC 架構 2. 使用 Bootstrap 進行網頁布局 3. Axios 串接交通部 PTX API 以及 Google Maps API 4. 以 Webpack 進行前端打包

https://rickchiu.me/api/image?key=portfolios/自製配對翻牌遊戲/cover.png
自製配對翻牌遊戲
2020/11/30 - 2020/12/30

1. 使用 Vanilla JS 實作 MVC 架構 2. 串接 Unsplash API 取得 Open Source 圖庫 3. 以 CSS Grid Layout 進行卡牌布局 4. 以 Webpack 進行前端打包