探索台灣各地的匹克球場地，找到最適合你的球場！
Live Site: https://3shimi.github.io/Pickle
台灣匹克球場地圖是一個互動式網站，提供全台 110+ 個匹克球場地的地圖查詢服務。
- 互動式地圖 - Leaflet.js 地圖視覺化，支援標記聚合
- 多維度篩選 - 城市、場地類型（室內/室外/風雨）、收費狀況
- 搜尋功能 - 快速搜尋場地名稱
- GPS 定位 - 找到附近的球場
- 場地詳情 - 開放時間、地址、備註等完整資訊
- 評論系統 - 用戶可對場地進行評分與評論
- 問題回報 - 回報錯誤資訊或建議新場地
- 討論區 - 社群交流平台（找隊友、技術交流、裝備討論）
- 富文字編輯 - 發文支援粗體、斜體、連結、圖片上傳
- Google 登入 - OAuth 認證，支援匿名發文
- 中英文雙語 - i18next 國際化支援
| 類別 | 技術 |
|---|---|
| 前端框架 | React 19 + TypeScript |
| 建置工具 | Vite |
| 樣式 | Tailwind CSS + shadcn/ui |
| 地圖 | Leaflet.js + React-Leaflet |
| 後端 | Supabase (PostgreSQL + Auth + Storage) |
| 國際化 | i18next |
| 富文字 | TipTap |
- Node.js 18+
- npm 或 yarn
- Supabase 帳號
# 1. Clone 專案
git clone https://github.com/3shimi/Pickle.git
cd Pickle
# 2. 安裝依賴
npm install
# 3. 設定環境變數
cp .env.example .env
# 編輯 .env 填入 Supabase credentials
# 4. 啟動開發伺服器
npm run dev建立 .env 檔案：
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_anon_keysrc/
├── index.tsx # React 入口
├── App.tsx # 路由配置
├── constants.ts # 常數定義
│
├── pages/
│ ├── MapPage.tsx # 主地圖頁
│ ├── CourtDetailPage.tsx # 場地詳情
│ └── forum/ # 討論區頁面
│
├── components/
│ ├── MapComponent.tsx # 地圖組件
│ ├── SearchBar.tsx # 搜尋
│ ├── auth/ # 認證組件
│ ├── reviews/ # 評論組件
│ ├── forum/ # 討論區組件
│ └── ui/ # shadcn/ui 元件
│
├── hooks/ # Custom hooks
├── contexts/ # React contexts
├── lib/ # 工具函式
└── i18n/ # 國際化
npm run dev # 開發模式
npm run build # 生產建置
npm run preview # 預覽建置結果| 資料表 | 說明 |
|---|---|
| courts | 場地資訊 |
| reviews | 場地評論 |
| reports | 問題回報 |
| profiles | 用戶資料 |
| boards | 討論區看板 |
| posts | 討論區貼文 |
| comments | 貼文留言 |
- Facebook: 你來我網
- Instagram: @pickleball.podcast
- 討論區新增富文字編輯器（TipTap）
- 支援圖片上傳（最多 20 張，自動壓縮）
- 新增刪除貼文功能
- 重構為 React + TypeScript
- 新增討論區功能
- 新增 Google OAuth 登入
- 新增場地評論系統
- 新增中英文雙語支援
- 初版發佈
- 收錄 110 個台灣匹克球場地
- 實作互動式地圖功能
MIT License
用地圖找球場，用匹克球找快樂！
Made with ❤️ by 《你來我網》Podcast