專案簡介
一個讓朋友們可以線上下注寶寶性別的互動網站！結合即時統計、抽獎機制和揭曉動畫，讓 Gender Reveal Party 不只是現場活動，遠端的親友也能一起參與。
🔗 GitHub: jess88tw/gender-reveal-bet 🔗 Demo: gender-reveal-bet
技術架構
| 層級 | 技術 |
|---|---|
| 前端 | Angular 17 (Standalone Components) |
| 後端 | Node.js + Express + TypeScript |
| 資料庫 | MongoDB Atlas (Prisma ORM) |
| 認證 | Google Identity Services (GIS) |
| 部署 | Render (前後端合併部署) |
功能特色
- 🎲 線上下注男生/女生（每人限一注，NT$200）
- 📊 即時統計下注情況
- 🎁 揭曉後抽獎功能（猜對者抽獎，得主獨得獎金池扣 10% 手續費）
- 🔐 Google 帳號登入
- 📱 響應式設計，手機也能輕鬆操作
- 🖼️ 線索展示區（超音波照片、孕期徵兆）
- 🤰 孕徵對照表（Boy or Girl 症狀比較卡片 + 計分條 + 爸媽預測）
- 🏠 首頁動態揭曉效果（性別揭曉後色彩變化 + 得獎者公告卡片）
- 💳 三種付款方式提示畫面（銀行轉帳、LINE Pay、現金）
- ⚙️ 管理後台（付款確認、性別揭曉、抽獎、孕徵管理）
- 🔒 隱私保護（無硬編碼帳號資訊，付款資訊請私訊主辦人）
下注規則
- 一注 NT$200
- 每人限下一注（男生或女生擇一）
- 性別揭曉後，從猜對的人中隨機抽出一位幸運得主
- 得主獨得全部獎金池（扣除 10% 手續費作為奶粉錢 🍼）
學到的東西
- Angular 17 Standalone Components 的實戰應用
- Google Identity Services 的 OAuth 登入流程
- Prisma ORM 搭配 MongoDB Atlas 的開發體驗
- Render 平台的前後端合併部署策略
- 從零到上線的完整 Full-Stack 開發流程