技術實作篇 | STELLAR — 台灣生日應援地圖誕生!

更新 發佈閱讀 6 分鐘
vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

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

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

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

「台北真的沒有 XXX 的生咖嗎 QQ 都查不到」
vocus|新世代的創作平台

或者很仰賴某個人先主動跳出來幫忙整理相關資訊:

vocus|新世代的創作平台

隨著台灣辦生咖的人似乎越來越多,同時看到韓國有這樣的 app: https://www.offmate.kr/ 透過社群共同維護的方式,投稿自己舉辦的生咖或應援,粉絲就能透過這個 app 找到自己想去的生咖,我覺得台灣也該有自己的生咖地圖網站。

vocus|新世代的創作平台

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

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

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

vocus|新世代的創作平台

粉絲可以透過這個網站

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

實作

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

技術棧與架構設計

  • 前端: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 引導手動安裝
vocus|新世代的創作平台
vocus|新世代的創作平台

從 0 到 3000+ 訪客

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

目前我的做法是

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

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

接下來要做的事

STELLAR 這個平台還有很大的優化空間~!

包含但不限於以下:

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

如果你對這個專案有興趣,不論是開發、設計、或商業模式,也許我們能一起讓這個產品更好,甚至找到可行的商業模式 ✨!

都可以寄信給我或是 IG 私訊給我~(但因為目前是沒有商業模式也沒有任何營收,真的就是 side project 的前提一起來玩~)

寄信給我: zzuhanlin@gmail.com

IG:@_stellar.tw

留言
avatar-img
木木的日子
0會員
1內容數
回頭看著自己的時候
你可能也想看
Thumbnail
嗨,我是艾克叔公 從前一兩年開始,我有發現到身邊好幾位朋友陸續成為追星一員,開始呈現出我當年年輕時會有的所有追星行為-follow他們的任何最新消息,盡可能參與任何關於他們的活動,以及購買任何官方販售的商品。 這天受到Coer朋友的邀請,一起到台中知名生咖,參加CORTIS-主訓成玹聯合生咖會。
Thumbnail
嗨,我是艾克叔公 從前一兩年開始,我有發現到身邊好幾位朋友陸續成為追星一員,開始呈現出我當年年輕時會有的所有追星行為-follow他們的任何最新消息,盡可能參與任何關於他們的活動,以及購買任何官方販售的商品。 這天受到Coer朋友的邀請,一起到台中知名生咖,參加CORTIS-主訓成玹聯合生咖會。
Thumbnail
當時間變少之後,看戲反而變得更加重要——這是在成為母親之後,我第一次誠實地面對這一件事:我沒有那麼多的晚上,可以任性地留給自己了。看戲不再只是「今天有沒有空」,而是牽動整個週末的結構,誰應該照顧孩子,我該在什麼時間回到家,隔天還有沒有精神帶小孩⋯⋯於是,我不得不學會一件以前並不擅長的事:挑選。
Thumbnail
當時間變少之後,看戲反而變得更加重要——這是在成為母親之後,我第一次誠實地面對這一件事:我沒有那麼多的晚上,可以任性地留給自己了。看戲不再只是「今天有沒有空」,而是牽動整個週末的結構,誰應該照顧孩子,我該在什麼時間回到家,隔天還有沒有精神帶小孩⋯⋯於是,我不得不學會一件以前並不擅長的事:挑選。
Thumbnail
工程師陳柏睿,三十一歲,在新竹科學園區的某間半導體設備廠當資深RD。每天早上七點半從套房出門,走路十分鐘就能到園區大門。 今天又是典型的竹科雨天。灰濛濛的天空從凌晨就開始滴水,園區的路面積了薄薄一層水窪。我撐著傘,耳機裡放著白噪音,腦袋還在跑昨晚沒debug完的程式。 走進公司大樓時,我習慣性地
Thumbnail
工程師陳柏睿,三十一歲,在新竹科學園區的某間半導體設備廠當資深RD。每天早上七點半從套房出門,走路十分鐘就能到園區大門。 今天又是典型的竹科雨天。灰濛濛的天空從凌晨就開始滴水,園區的路面積了薄薄一層水窪。我撐著傘,耳機裡放著白噪音,腦袋還在跑昨晚沒debug完的程式。 走進公司大樓時,我習慣性地
Thumbnail
當代名導基里爾.賽勒布倫尼科夫身兼電影、劇場與歌劇導演,其作品流動著強烈的反叛與詩意。在俄烏戰爭爆發後,他持續以創作回應專制體制的壓迫。《傳奇:帕拉贊諾夫的十段殘篇》致敬蘇聯電影大師帕拉贊諾夫。本文作者透過媒介本質的分析,解構賽勒布倫尼科夫如何利用影劇雙棲的特質,在荒謬世道中尋找藝術的「生存之道」。
Thumbnail
當代名導基里爾.賽勒布倫尼科夫身兼電影、劇場與歌劇導演,其作品流動著強烈的反叛與詩意。在俄烏戰爭爆發後,他持續以創作回應專制體制的壓迫。《傳奇:帕拉贊諾夫的十段殘篇》致敬蘇聯電影大師帕拉贊諾夫。本文作者透過媒介本質的分析,解構賽勒布倫尼科夫如何利用影劇雙棲的特質,在荒謬世道中尋找藝術的「生存之道」。
Thumbnail
2025年幫電影演員河正宇在台北舉辦的生咖紀錄,內含:場地租借、活動設計、費用、取得授權等。
Thumbnail
2025年幫電影演員河正宇在台北舉辦的生咖紀錄,內含:場地租借、活動設計、費用、取得授權等。
Thumbnail
在台灣的骨科與物理治療臨床現場,我們常會遇到做完「肩關節唇修補手術(SLAP Repair)」的患者。這些患者經過了漫長的手術等待期與初步癒合期,滿懷希望地來到你的工作室或診間,希望透過你的「神之手」解決殘餘的緊繃感。
Thumbnail
在台灣的骨科與物理治療臨床現場,我們常會遇到做完「肩關節唇修補手術(SLAP Repair)」的患者。這些患者經過了漫長的手術等待期與初步癒合期,滿懷希望地來到你的工作室或診間,希望透過你的「神之手」解決殘餘的緊繃感。
Thumbnail
(如果你連懶人包都懶得看,文末有更詳細的介紹,保證讓你心動不已!) 懶人包提示: ● 獨特木魚造型小夜燈,圓潤可愛超討喜,不僅是擺飾更是情緒療癒神器。 ● 輕輕敲擊「咔、咔」聲,瞬間帶走焦慮,讓心靈重歸平靜。 ● 告別壞脾氣,召喚好運氣,好運+1、暴富+1,為你的生活帶來正能量。
Thumbnail
(如果你連懶人包都懶得看,文末有更詳細的介紹,保證讓你心動不已!) 懶人包提示: ● 獨特木魚造型小夜燈,圓潤可愛超討喜,不僅是擺飾更是情緒療癒神器。 ● 輕輕敲擊「咔、咔」聲,瞬間帶走焦慮,讓心靈重歸平靜。 ● 告別壞脾氣,召喚好運氣,好運+1、暴富+1,為你的生活帶來正能量。
Thumbnail
5 月,方格創作島正式開島。這是一趟 28 天的創作旅程。活動期間,每週都會有新的任務地圖與陪跑計畫,從最簡單的帳號使用、沙龍建立,到帶著你從一句話、一張照片開始,一步一步找到屬於自己的創作節奏。不需要長篇大論,不需要完美的文筆,只需要帶上你今天的日常,就可以出發。征服創作島,抱回靈感與大獎!
Thumbnail
5 月,方格創作島正式開島。這是一趟 28 天的創作旅程。活動期間,每週都會有新的任務地圖與陪跑計畫,從最簡單的帳號使用、沙龍建立,到帶著你從一句話、一張照片開始,一步一步找到屬於自己的創作節奏。不需要長篇大論,不需要完美的文筆,只需要帶上你今天的日常,就可以出發。征服創作島,抱回靈感與大獎!
Thumbnail
本文深入探討約翰·喀爾文政治哲學智慧的時代背景,分析十六世紀「宗教改革」運動如何塑造其思想。透過剖析教會權威崩塌、城市國家崛起、絕對王權萌芽及印刷術的影響,闡述喀爾文如何回應「靈魂與體制雙重崩潰」的危機,並建立以「理性紀律」為核心的新秩序,同時也探討其思想遺產對現代社會可能帶來的警示。
Thumbnail
本文深入探討約翰·喀爾文政治哲學智慧的時代背景,分析十六世紀「宗教改革」運動如何塑造其思想。透過剖析教會權威崩塌、城市國家崛起、絕對王權萌芽及印刷術的影響,闡述喀爾文如何回應「靈魂與體制雙重崩潰」的危機,並建立以「理性紀律」為核心的新秩序,同時也探討其思想遺產對現代社會可能帶來的警示。
Thumbnail
喀爾文的智慧是十六世紀最為「剛性」的聲音。 他不像馬基維利那樣玩弄權術,但他建立了一套比權術更強大的「心理與組織機器」。 他讓後世學會了如何透過自律與法律來管理一個複雜的社會,但也讓許多人在追求「被揀選的標記」中,漸漸喪失了那種奧古斯丁式純粹的靈魂安息。
Thumbnail
喀爾文的智慧是十六世紀最為「剛性」的聲音。 他不像馬基維利那樣玩弄權術,但他建立了一套比權術更強大的「心理與組織機器」。 他讓後世學會了如何透過自律與法律來管理一個複雜的社會,但也讓許多人在追求「被揀選的標記」中,漸漸喪失了那種奧古斯丁式純粹的靈魂安息。
Thumbnail
跑步、打球後膝蓋卡卡、喀喀聲,甚至彎起來不順?很多人以為只是「老了」、「習慣了」,其實這可能是關節潤滑不足的徵兆,甚至是潛在積水反應。再繼續硬撐下去,小心變成永久性退化性傷害。這篇教你判斷警訊、修正姿勢與有效補救!
Thumbnail
跑步、打球後膝蓋卡卡、喀喀聲,甚至彎起來不順?很多人以為只是「老了」、「習慣了」,其實這可能是關節潤滑不足的徵兆,甚至是潛在積水反應。再繼續硬撐下去,小心變成永久性退化性傷害。這篇教你判斷警訊、修正姿勢與有效補救!
Thumbnail
見諸參與鄧伯宸口述,鄧湘庭於〈那個大霧的時代〉記述父親回憶,鄧伯宸因故遭受牽連,而案件核心的三人,在鄧伯宸記憶裡:「成立了成大共產黨,他們製作了五星徽章,印刷共產黨宣言——刻鋼板的——他們收集中共空飄的傳單,以及中國共產黨中央委員會有關文化大革命決議文的英文打字稿,另外還有手槍子彈十發。」
Thumbnail
見諸參與鄧伯宸口述,鄧湘庭於〈那個大霧的時代〉記述父親回憶,鄧伯宸因故遭受牽連,而案件核心的三人,在鄧伯宸記憶裡:「成立了成大共產黨,他們製作了五星徽章,印刷共產黨宣言——刻鋼板的——他們收集中共空飄的傳單,以及中國共產黨中央委員會有關文化大革命決議文的英文打字稿,另外還有手槍子彈十發。」
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News