📌 置頂
用定位抓取附近餐廳,依菜系、評分、價位、是否營業中等條件篩選,幫你決定今天吃什麼。
Next.jsTypeScriptTailwind CSSGoogle Places API
查看詳細內容
- 允許定位後,依方圓半徑(預設 2km,可自訂)抓取附近餐廳清單
- 支援中、日、韓、義、泰、越、印度、墨西哥等多國菜系,以及海鮮、燒烤、早午餐、吃到飽等細分類別篩選
- 可再依評分(3.0 以上到 4.5 以上)、價位區間、是否營業中進一步過濾結果
- 串接 Google Places API 取得周邊餐廳資料,因該 API 為計費服務,設有每日查詢次數上限控管成本
📌 置頂
完整 B2C 解決方案,包含 Zustand 持久化狀態、Algolia 搜尋、綠界金流串接、Cloudflare R2 資產管理。
Next.js 16React 19TypeScriptTailwind CSSZustandMongoDBRedisNextAuth.jsAlgoliaCloudflare R2VercelECPay API
查看詳細內容
- 全域狀態:用 Zustand + Persist 實作持久化購物車,達成多裝置間的資料庫層級同步與原子化庫存檢核
- 搜尋:整合 Algolia 全文檢索實作毫秒級搜尋,設計 Webhook 異步更新機制確保資料庫與搜尋索引最終一致
- 快取:結合 Redis 與 Vercel Edge Caching 優化高頻數據存取,實作 Banner 管理系統的快取失效處理
- 金物流:深度串接綠界科技(ECPay),優化 3D 驗證跳轉流程;整合四大超商電子地圖與自動化寄件系統
- 驗證:用 NextAuth.js 整合 Google 與 LINE OAuth,搭配 Middleware 實作細粒度權限控管
- 資產:用 Cloudflare R2 處理變體商品多圖上傳,搭配 Presigned URL 提升資源傳輸安全性
- 技術難題:分析銀行端 3D 驗證非標準回傳格式並重構導向邏輯,將支付流失率降低 95% 以上
- 技術難題:設計資料庫交易後觸發機制與錯誤重試邏輯,解決搜尋索引與主資料庫間的數據同步落後問題
一個發布到 npm 的極簡套件:在網站 devtools console 印出客製化的歡迎 banner 彩蛋,內建預設值也能自帶設定。
TypeScripttsupnpmReact (peer)
查看詳細內容
- 起因是兩個網站(tommy-blog、COME.ANC13)各自複製貼上同一段 console banner 邏輯,把它抽成一個真正發布、真正能被安裝的 npm 套件
- 框架無關的核心 logConsoleBanner(nameOrConfig, overrides?) 放在 src/index.ts,接受內建 preset 名稱或一整包自訂設定
- src/presets.ts 是查表用的 preset 註冊表,新增一個人的 banner 只要加一筆資料
- React 整合(<ConsoleBanner />)拆成獨立的 hey-console/react 子路徑匯出,讓框架無關的使用者完全不會載入到 React 相關程式碼
- package.json 的 exports 同時提供 ESM/CJS 雙格式,peerDependencies + peerDependenciesMeta.optional 讓 react 變成選用依賴
- 用 tsup 一份設定建置出 ESM、CJS、型別定義三種產物,publish 前用 npm publish --dry-run 先檢查打包內容
- 已經實際發布到 npm 並裝回 tommy-blog 這個部落格本身驗證整條「發布 → 安裝 → 使用」的流程真的走得通
中秋節限定的多人即時互動網站,免帳號、免付費,挑一桌坐下就能跟同桌的人一起烤肉賞月,即時看到誰也在。
Next.js 16React 19TypeScriptTailwind CSSWebSocket
查看詳細內容
- 用 Next.js 16 App Router + React 19 打造,訪客免帳號免付費,直接挑一桌坐下就能加入
- 前端純粹扮演 WebSocket client,透過原生 WebSocket 串接部署在 Render 的 Go/Gin 即時後端(Redis 存座位狀態)——Vercel serverless function 撐不住長連線,所以即時連線的伺服器端另外部署
- Render 免費方案閒置 15 分鐘會被 spin down,重啟後記憶體裡的即時連線/座位狀態會歸零;用排程 cron job 定期 ping 保持服務常駐,避免訪客連線時卡在冷啟動
- 自製 useBbqSocket hook 管理連線生命週期:指數退避重連、心跳偵測,處理 SYNC_ALL/MOVE/LEAVE/SCORE/CHAT 多種訊息類型的狀態同步
- 烤肉小遊戲:丟食材上烤架、限時烤熟、依食材給分,分數以兩小時為一個區間自動歸零,同桌即時排行榜比分數
- 同桌即時聊天室、大頭貼挑選、整點頭 5 分鐘自動放煙火動畫、背景音樂、月兔與河流場景等節慶氣氛細節
- 有分享連結功能讓訪客邀朋友直接進同一桌,搭配 og:image / sitemap 讓分享出去的連結預覽正常顯示
即時搶座與專注管理系統,用 Vue 3、Golang、WebSocket,搭配 Redis Lua script 處理高併發選位。
Vue 3QuasarTypeScriptPiniaWeb WorkerPWAGolang (Gin)Gorilla WebSocketGORMRedis (Lua)DockerKobey
查看詳細內容
- 基於 Quasar(Vue 3)與 Golang 研發的即時座位管理與深度專注系統
- 計時:用 Web Worker 獨立執行緒計時,避開瀏覽器背景分頁降頻,確保計時毫秒級精準
- PWA:實作離線支援與系統層級的專注結束 Web Push 通知
- 即時通訊:用 Gorilla WebSocket 實作 Room-based 廣播機制與連線生命週期管理
- 安全防護:整合簽章式 Token 驗證、CORS 來源檢查與速率限制
PTT MacShop 關鍵字監控與通知系統
文章用 AWS Lambda / DynamoDB / API Gateway / IAM 建置的全 serverless 系統,監控 PTT MacShop 版,依訂閱關鍵字比對新文章並透過 Discord 即時通知。
Next.js 16TypeScriptAWS LambdaAPI GatewayDynamoDBIAMDiscord APIAWS Amplify
查看詳細內容
- 獨立設計並實作一套全 serverless AWS 架構(Lambda、API Gateway、DynamoDB、IAM),爬取目標看板內容、比對使用者訂閱的關鍵字,透過 Discord API 即時發送通知
- 排查並解決雲端主機被目標網站整個 IP 網段封鎖的問題,將爬蟲執行位置搬遷到自架排程,AWS 端的資料接收/儲存/通知邏輯完全不受影響
- 為每個 Lambda function 設計最小權限 IAM role,權限精確限縮到該函式實際需要存取的 DynamoDB 資料表與操作
- 用 Next.js 16(App Router)+ Discord OAuth2 打造前端登入與訂閱管理介面,透過 Server Action 確保後端 API 金鑰完全不外洩給瀏覽器
- 設計 DynamoDB 存取模式(GSI、條件式寫入)達成:資料寫入去重、每位使用者每日通知額度的原子性控管、關鍵字搜尋
- 開發資料匯出工具,確保系統資料不被鎖定在特定資料庫格式,保留未來遷移彈性