Storio

專案概述

市面上沒有一個工具能同時追蹤電影、影集與書籍，又保留觀看當下的情感脈絡，所以我自己做了一個。Storio 是我從 0 到 1 獨立完成的全端產品，從產品定義、UI 設計到部署上線，皆以 Vibe Coding 工作流獨立完成。

主要成果

• 設計匿名優先 onboarding：前 10 筆收藏免登入，讓用戶先感受產品價值再決定是否註冊
• 建立 Progressive Enrichment 資料模型：基礎 Story interface 快速收藏，ItemDetail interface 按需載入演員、串流平台與相關推薦
• 設計三層 AI Agent 架構，明確分離資料發現、跨平台搜尋與 AI 反思生成的職責邊界

面臨挑戰

• 多個 LLM（Claude、Gemini、OpenAI）在同一 Agent 架構下並行，輸出格式與品質不一致，需設計統一的 response schema 和 fallback 機制
• Next.js static export 與動態 auth 狀態衝突：Supabase session 在 SSG 環境下無法於 server side 取得，需重新設計 client-side hydration 流程
• 跨 API 資料品質差異大：TMDB 和 Google Books 的欄位完整度、命名慣例差距明顯，部分缺漏直接影響 UI 渲染

解決方案

• 設計統一 response schema 規範各 LLM 輸出，並針對每個 Agent 設定獨立的 fallback 策略
• 將 auth 狀態管理完全移至 client side，以 Supabase 訂閱機制實現 guest-to-user 無感遷移
• 建立 adapter 層統一各 API 回傳格式，Story interface 作為最小共同分母，缺漏欄位以預設值補全

專案影響

• 將 PM 對產品的直覺與判斷，轉化為一個真正上線運作的全端產品，證明 PM 不只能寫 spec，也能 build。
• 產品已部署上線，支援繁體中文與英文雙語

技術標籤

Frontend

Next.js

React

Tailwind CSS

Backend

FastAPI

Python

Auth & DB

Supabase

Deploy

Vercel

Railway

Automation

n8n

APIs

TMDB

Google Books