跳到主要內容
← 回到文章列表
N°.001技術筆記

[STELLAR 開發日記] STELLAR — 台灣生日應援地圖誕生!

發布2026.05.13閱讀3 分鐘
cover

今年開始追星後,越接近喜歡的成員生日的時候,就會想去他的生咖看看。

birthday-event-img
2025 年參加過的生咖們

根據什麼是生咖 (생카)?應援資訊哪裡找?韓國生咖整理管道、網站介紹

生咖 (생카) 是「生日咖啡廳 (생일카페)」的縮寫,也是追星裡流行的應援方式。粉絲會在偶像生日、或是出道週年等紀念日,租借咖啡廳或展覽空間,為喜歡的藝人慶祝。

去感受喜歡的偶像被愛的氛圍、也嘗試認識同樣喜歡這個團體或成員的粉絲,是我想去生咖的原因。

但尋找生咖相關資訊總是非常辛苦,通常會在 threads 上翻找、蒐集,如果沒有看到任何資訊,還會覺得自己是不是漏掉了什麼資訊。

「台北真的沒有 XXX 的生咖嗎 QQ 都查不到」

常常看到這樣的貼文,或者很仰賴某個人先主動跳出來幫忙整理相關資訊。

隨著台灣辦生咖的人越來越多,同時看到韓國有這樣的 app:https://www.offmate.kr/

透過社群共同維護的方式,投稿自己舉辦的生咖或應援,粉絲就能透過這個 app 找到自己想去的生咖,我覺得台灣也需要有自己的生咖地圖網站!

offmate
offmate 首頁

於是 STELLAR | 台灣生咖地圖網站就這樣誕生了!

STELLAR | 台灣生咖地圖網站是什麼?

STELLAR 是一個台灣生日應援地圖網站,在 2025 年 8 月上線,上線 3 個月內累積 3,000+ 訪客、Threads 粉絲近 500 人。

粉絲可以透過這個平台

  • 查看各週即將到來的生咖(不限對象)
  • 針對特定偶像查看即將到來的生咖
  • 投稿自己主辦的生咖活動
  • 投稿尚未在網站上建檔的偶像

stellar-map
STELLAR 地圖頁:顯示生咖的位置
stellar-event-detail
STELLAR 活動細節頁

實作

這個專案從規劃、設計與開發都由我搭配 AI 工具完成、以及朋友來協助進行手動測試和最早期用戶測試。

技術棧與架構設計

  • 前端:Next.js + TypeScript + Panda CSS 並部署於 Vercel
  • 地圖:React Leaflet
  • 生咖主辦投稿時需要輸入活動地點,使用 Google Place API 進行地點搜尋
  • 後端:Express + TypeScript 並部署於 Zeabur
  • Firebase Auth(身份驗證)和 Firestore(資料庫)
  • 圖片儲存:Cloudflare R2

過程中遇到比較大的挑戰

Firestore 讀取次數比預想的還多

因為還是小專案,希望可以把額度限制在每天的免費額度下(50,000 次/天)

結果上線前和朋友兩個人在測試,大約測試一小時的時間,讀取次數就來到 3000 次/小時,查資料發現應該是因為 get 這隻 api 去 firestore 資料庫裡面撈,一筆資料就算一次,決定先從快取資料著手。

在 Express 實作 memory cache,大部分的請求都能從快取回應,只有在快取過期或被清除時才會讀取 Firestore。

另外,偶像會顯示「目前有 X 筆生日應援」,原先是每次取得偶像資料後,再去所有生咖內撈相關聯的活動即時計算,調整為維護 coffeeEventCount 這個欄位。

當有活動通過時就 +1、刪除時 -1、每天晚上 00:00 跑排程看哪些活動結束了,就扣掉相對應的數量,避免不斷去撈生咖資料庫。

透過這樣,目前一天大約是 2000–3000 次/天,讓讀取次數和最剛開始相比下降了 95%。

圖片儲存成本與效能

網站會有大量圖片(主視覺、活動照片、偶像照片等),需要考慮儲存成本與載入速度。

使用的是 Cloudflare R2 + Workers:R2 免費額度有 10GB/月,我在用戶上傳圖片時也會去壓縮圖片、讓圖片在 500–700KB 左右,並透過 Workers 設定圖片 CDN 以及快取,減少存取圖片的成本。

提升使用者留存

另外我覺得網頁是一個滿容易被遺忘的東西,不像 app 可以常駐在桌面上提醒用戶使用或增加印象,所以實作了 PWA 讓用戶可以把網頁放到桌面、也支援離線查看。

  • 用戶可以把網頁放到桌面
  • 支援離線查看
  • Android 自動顯示安裝提示
  • iOS 引導手動安裝

從 0 到 3000+ 訪客

上線大約三個月的時間,只在 threads 與 IG 進行曝光,沒有下廣告的情況下,threads 達近 500 粉絲、網頁訪客達 3000+,我覺得這是真實存在的痛點。

目前我的做法是

  • 主動觸及生咖主辦,邀請他們主動投稿
  • 每週日會在 IG 及 threads 發本週生咖整理,建立固定的觸及(至少讓用戶不要忘記 STELLAR 這個平台)
  • 根據偶像的生咖數量多寡,也會針對特定偶像發一篇集中文,可以鎖定更明確的 TA

但要如何讓更多目標用戶知道這個服務、一想到要去生咖就會想到 STELLAR 這個平台,是最大的挑戰且很長的一段路。

接下來要做的事

STELLAR 這個平台還有很大的改善空間~!

包含但不限於以下:

  • 產品 UI/UX 持續改善
  • 更明確的社群經營方向
  • 完善測試與效能優化
  • 探索可能的商業模式

如果你對這個專案有興趣,不論是開發、設計、或商業模式,也許我們能一起讓這個產品更好,甚至找到可行的商業模式 ✨!都可以寄信給我或是 IG 私訊給我~(但因為目前是沒有商業模式也沒有任何營收,真的就是 side project 的前提一起來玩~)

寄信給我: zzuhanlin@gmail.com

IG:@_stellar.tw

END · N°.001SHARE · COPY LINK