← 全部作品
FULL-STACK已上線2024
julefu-bnb
完整商業功能的民宿預訂全棧網站。認證、信用卡支付、即時排程、Cloudinary 圖庫、SEO 全做透，營運中。
- 角色
- 主導 + 全端開發
- 時程
- 2024
- Reading
- 2 分鐘
技術棧
Next.js 15TypeScript 5Prisma 6PostgreSQLNextAuth.jsStripeCloudinaryFramer Motion
產品畫面
SCREENSHOTS · COMING SOON
產品截圖補上中。把圖丟到 public/works/<slug>/ 並在 mdx frontmatter 加 screenshots 陣列即可。
public/works/julefu-bnb/01.png業主經營民宿多年，過去靠電話 + Google 表單收訂房，每次旺季都會 overbook、漏訊息。julefu-bnb 把整個訂房流程數位化：搜房、看房、選日期、信用卡付款、信件確認、後台管理一條龍。
問題
- 電話 + Google 表單預訂常 overbook、漏訊息
- 業主沒時間每天回查詢，希望客人能線上自助完成
- 既有訂房平台抽 15-20%，業主想保留 100% 收入
解法
Next.js 全棧 + Stripe 支付 + Prisma schema 完整生態：
- 行事曆即時鎖房：FullCalendar 視覺化呈現可訂期間，後端用 PG transaction 確保不會 race condition 重複預訂。
- Stripe 支付：信用卡 + Apple Pay，款項直入業主 Stripe 帳戶，平台不抽成。
- Cloudinary 圖庫：業主自助上傳房型照片，自動 CDN + responsive size。
- NextAuth 多認證：Google / Email magic link，後台 + 訪客分層權限。
- SEO 全做：sitemap、JSON-LD（LodgingBusiness schema）、OG image 動態生成。
技術棧
- Frontend: Next.js 15 App Router + TypeScript 5 + Tailwind CSS + Framer Motion
- Backend: Next.js Server Actions + Prisma 6.3 + PostgreSQL
- Auth: NextAuth.js（Google + Email magic link）
- Payment: Stripe Checkout + webhook
- Media: Cloudinary（自動 CDN + responsive image）
- Calendar: FullCalendar 6
- Deploy: Vercel
成果
- 上線運營中
- 業主成功擺脫平台抽成，月增收約 20%
- 後台簡化到「業主一個人就能管」，不需另雇客服
- Lighthouse Mobile 95+、SEO 100
學到什麼
- Next.js Server Action 的事務邊界：訂房寫入 + Stripe 扣款不在同一個 transaction 範圍，要設計 idempotent webhook 補償機制。
- Cloudinary 比自己做好太多：自己用 sharp + S3 重做要 2 週工作量，Cloudinary 30 分鐘搞定且 CDN 自帶。
- 客戶不關心技術，只關心流程：每次 demo 客戶都問「我要怎麼改房價」，最後做了一個極簡 spreadsheet 風後台，比花俏的儀表板更受歡迎。