技術實作篇 | 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
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
在台灣的骨科與物理治療臨床現場,我們常會遇到做完「肩關節唇修補手術(SLAP Repair)」的患者。這些患者經過了漫長的手術等待期與初步癒合期,滿懷希望地來到你的工作室或診間,希望透過你的「神之手」解決殘餘的緊繃感。
Thumbnail
在台灣的骨科與物理治療臨床現場,我們常會遇到做完「肩關節唇修補手術(SLAP Repair)」的患者。這些患者經過了漫長的手術等待期與初步癒合期,滿懷希望地來到你的工作室或診間,希望透過你的「神之手」解決殘餘的緊繃感。
Thumbnail
跑步、打球後膝蓋卡卡、喀喀聲,甚至彎起來不順?很多人以為只是「老了」、「習慣了」,其實這可能是關節潤滑不足的徵兆,甚至是潛在積水反應。再繼續硬撐下去,小心變成永久性退化性傷害。這篇教你判斷警訊、修正姿勢與有效補救!
Thumbnail
跑步、打球後膝蓋卡卡、喀喀聲,甚至彎起來不順?很多人以為只是「老了」、「習慣了」,其實這可能是關節潤滑不足的徵兆,甚至是潛在積水反應。再繼續硬撐下去,小心變成永久性退化性傷害。這篇教你判斷警訊、修正姿勢與有效補救!
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
工程師陳柏睿,三十一歲,在新竹科學園區的某間半導體設備廠當資深RD。每天早上七點半從套房出門,走路十分鐘就能到園區大門。 今天又是典型的竹科雨天。灰濛濛的天空從凌晨就開始滴水,園區的路面積了薄薄一層水窪。我撐著傘,耳機裡放著白噪音,腦袋還在跑昨晚沒debug完的程式。 走進公司大樓時,我習慣性地
Thumbnail
工程師陳柏睿,三十一歲,在新竹科學園區的某間半導體設備廠當資深RD。每天早上七點半從套房出門,走路十分鐘就能到園區大門。 今天又是典型的竹科雨天。灰濛濛的天空從凌晨就開始滴水,園區的路面積了薄薄一層水窪。我撐著傘,耳機裡放著白噪音,腦袋還在跑昨晚沒debug完的程式。 走進公司大樓時,我習慣性地
Thumbnail
本文深入探討約翰·喀爾文政治哲學智慧的時代背景,分析十六世紀「宗教改革」運動如何塑造其思想。透過剖析教會權威崩塌、城市國家崛起、絕對王權萌芽及印刷術的影響,闡述喀爾文如何回應「靈魂與體制雙重崩潰」的危機,並建立以「理性紀律」為核心的新秩序,同時也探討其思想遺產對現代社會可能帶來的警示。
Thumbnail
本文深入探討約翰·喀爾文政治哲學智慧的時代背景,分析十六世紀「宗教改革」運動如何塑造其思想。透過剖析教會權威崩塌、城市國家崛起、絕對王權萌芽及印刷術的影響,闡述喀爾文如何回應「靈魂與體制雙重崩潰」的危機,並建立以「理性紀律」為核心的新秩序,同時也探討其思想遺產對現代社會可能帶來的警示。
Thumbnail
(如果你連懶人包都懶得看,文末有更詳細的介紹,保證讓你心動不已!) 懶人包提示: ● 獨特木魚造型小夜燈,圓潤可愛超討喜,不僅是擺飾更是情緒療癒神器。 ● 輕輕敲擊「咔、咔」聲,瞬間帶走焦慮,讓心靈重歸平靜。 ● 告別壞脾氣,召喚好運氣,好運+1、暴富+1,為你的生活帶來正能量。
Thumbnail
(如果你連懶人包都懶得看,文末有更詳細的介紹,保證讓你心動不已!) 懶人包提示: ● 獨特木魚造型小夜燈,圓潤可愛超討喜,不僅是擺飾更是情緒療癒神器。 ● 輕輕敲擊「咔、咔」聲,瞬間帶走焦慮,讓心靈重歸平靜。 ● 告別壞脾氣,召喚好運氣,好運+1、暴富+1,為你的生活帶來正能量。
Thumbnail
2025年幫電影演員河正宇在台北舉辦的生咖紀錄,內含:場地租借、活動設計、費用、取得授權等。
Thumbnail
2025年幫電影演員河正宇在台北舉辦的生咖紀錄,內含:場地租借、活動設計、費用、取得授權等。
Thumbnail
喀爾文的智慧是十六世紀最為「剛性」的聲音。 他不像馬基維利那樣玩弄權術,但他建立了一套比權術更強大的「心理與組織機器」。 他讓後世學會了如何透過自律與法律來管理一個複雜的社會,但也讓許多人在追求「被揀選的標記」中,漸漸喪失了那種奧古斯丁式純粹的靈魂安息。
Thumbnail
喀爾文的智慧是十六世紀最為「剛性」的聲音。 他不像馬基維利那樣玩弄權術,但他建立了一套比權術更強大的「心理與組織機器」。 他讓後世學會了如何透過自律與法律來管理一個複雜的社會,但也讓許多人在追求「被揀選的標記」中,漸漸喪失了那種奧古斯丁式純粹的靈魂安息。
Thumbnail
嗨,我是艾克叔公 從前一兩年開始,我有發現到身邊好幾位朋友陸續成為追星一員,開始呈現出我當年年輕時會有的所有追星行為-follow他們的任何最新消息,盡可能參與任何關於他們的活動,以及購買任何官方販售的商品。 這天受到Coer朋友的邀請,一起到台中知名生咖,參加CORTIS-主訓成玹聯合生咖會。
Thumbnail
嗨,我是艾克叔公 從前一兩年開始,我有發現到身邊好幾位朋友陸續成為追星一員,開始呈現出我當年年輕時會有的所有追星行為-follow他們的任何最新消息,盡可能參與任何關於他們的活動,以及購買任何官方販售的商品。 這天受到Coer朋友的邀請,一起到台中知名生咖,參加CORTIS-主訓成玹聯合生咖會。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News