CoolFace
Apppublic

punkypunka/pokemon-nintento

sourceHugging Faceupdated 10mo agoView on Hugging Face
0likes
App README

PokeCard TCG Taiwan 🇹🇼

PokeCard TCG Taiwan 是一個專為台灣市場打造的專業集換式卡牌 (TCG) 電商平台。 結合了類似 StockX 的市場數據趨勢、豐富的預購系統以及整合式的 PSA/BGS/CGC 鑑定代送服務，為收藏家提供一站式的交易體驗。

Project Banner

🌟 核心特色 (Key Features)

1. 專業電商體驗

  • —全螢幕現代化設計：針對桌面與行動裝置最佳化的 RWD 介面，電腦版採用 Fullscreen 佈局。
  • —StockX 風格數據：商品頁面提供歷史價格走勢圖 (SVG Chart)、漲跌幅資訊與市場行情跑馬燈。
  • —強大的搜尋與篩選：支援關鍵字、分類、價格區間及庫存狀態篩選。

2. 預購專區 (Pre-order System)

  • —視覺化倒數：商品卡片與詳情頁顯示即時倒數計時器。
  • —庫存進度條：營造稀缺感的動態庫存顯示。
  • —獨立結帳邏輯：購物車自動區分「現貨」與「預購」商品，確保物流安排順暢。

3. 鑑定服務中心 (Grading Center)

  • —代送服務整合：支援 PSA、BGS、CGC 三大鑑定公司。
  • —費用試算器：依據卡片申報價值、數量與服務等級，自動計算預估費用（含保險）。
  • —視覺化進度追蹤：
  • —提供 8 階段詳細進度條 (Arrived -> Prep -> Research -> Grading -> Assembly -> Ready -> QA -> Complete)。
  • —每個節點皆標示詳細完成日期與時間，讓玩家隨時掌握愛卡動向。

4. 會員忠誠度計畫 (Loyalty Program)

  • —雙幣制回饋：
  • —銀幣 (Silver)：消費累積，用於升級會員等級。
  • —金幣 (Gold)：可直接折抵消費金額 (最高 30%)，可由銀幣兌換或活動取得。
  • —交易紀錄：完整的金銀幣收支明細與訂單歷程 (CoinHistory)。

5. 台灣在地化整合 (Localization)

  • —行政區連動：內建台灣縣市/區域/郵遞區號連動選單。
  • —多元物流模擬：包含宅配 (黑貓) 與 超商取貨 (7-11/全家/萊爾富/OK) 電子地圖模擬。
  • —電子發票：支援手機條碼、自然人憑證、公司統編與捐贈碼欄位。

6. 視覺體驗 (Visual Experience)

  • —任天堂主題 (Nintendo Theme): 採用經典紅白配色，致敬任天堂官方設計風格。
  • —行動優先 (Mobile First):
  • —懸浮精靈球導航: 手機版底部獨特的懸浮式首頁按鈕。
  • —優化側邊選單: 針對單手操作優化的側滑選單，整合預購與鑑定服務快速入口。

🛠️ 技術架構 (Tech Stack)

  • —Frontend Framework: React 19
  • —Language: TypeScript
  • —Styling: Tailwind CSS (Utility-first CSS)
  • —Routing: React Router DOM
  • —Icons: Lucide React
  • —Containerization: Docker & Docker Compose

📂 專案結構

bash
/
├── index.html           # 入口 HTML (含 Tailwind CDN 設定)
├── App.tsx              # 應用程式主入口與 Context Provider (User/Cart/Wishlist)
├── types.ts             # TypeScript 型別定義 (User, Order, Product...)
├── constants.ts         # 常數資料 (行政區資料、匯率設定)
├── pages/               # 頁面組件 (Home, Shop, Profile, Grading...)
├── components/          # 重用 UI 組件 (ProductCard, Layout, SearchBar...)
├── services/            # 模擬資料與 API 邏輯 (mockData.ts)
├── todo.md              # 開發待辦事項清單
├── DEVELOPMENT_GUIDE.md # 詳細開發規範指南
├── docker-compose.yml   # Docker 開發環境設定
└── Dockerfile           # Docker 映像檔定義

🚀 快速開始 (Quick Start)

使用 Docker (推薦)

本專案已配置 Docker 開發環境，支援熱更新 (Hot Reload)。

  1. 1.啟動服務:
bash
    docker-compose up
  1. 1.瀏覽: 打開瀏覽器訪問 http://localhost:8888。

本地開發 (Local Development)

  1. 1.安裝依賴:
bash
    npm install
  1. 1.啟動開發伺服器:
bash
    npm run dev
  1. 1.瀏覽: 打開瀏覽器訪問 http://localhost:3000。

📝 待辦事項 (To-Do)

詳情請見 todo.md 了解目前開發進度與未來規劃。

📄 授權 (License)

MIT License