一個以 React 與 Firebase 打造的全端小說閱讀平台，提供閱讀、上傳、收藏、社群留言等完整功能。
Live Demo：https://pr-novel.vercel.app
| 首頁 | 小說詳情頁 |
|---|---|
 |
 |
| 閱讀頁 | 個人中心 |
|---|---|
 |
 |
| 留言系統 | 管理員後台 |
|---|---|
 |
 |
- 小說列表、詳情頁、分頁閱讀（每頁 3000 字）
- 章節目錄 + 已讀章節標記（✓）
- 自動記錄上次讀到的章節，下次直接繼續閱讀
- 護眼閱讀背景色（#FEFDFB）
- Email / Google 登入、忘記密碼
- 收藏小說、個人閱讀記錄
- 個人頁（收藏 / 我的作品 / 閱讀記錄）
- 暱稱、自我介紹編輯
- 多層留言系統（巢狀回覆、按讚、樓層標記）
- 留言檢舉 + 管理員後台（結案 / 刪除）
- 站內通知（回覆、按讚、檢舉、刪除通知）
- 小說評分系統（1～5 顆星）
- 點擊通知直接跳轉至對應留言位置
- TXT 格式小說上傳（支援中文章節解析）
- 封面圖片壓縮（Canvas API，寬 400px，品質 0.7）
- 我的上傳管理（編輯、刪除）
- 排行榜（人氣榜、收藏榜、新書榜）
- 標籤篩選（多選 AND 邏輯）
- 全站關鍵字搜尋
- Firebase Auth + Firestore 直讀直寫（登入時）
- 未登入走 localStorage，登入後無縫切換
- Firestore Security Rules（含 Admin 權限）
- Skeleton Loading（詳情頁、閱讀頁、個人頁）
- 軟刪除（deleted: true）保留留言脈絡
| 類別 | 技術 |
|---|---|
| UI 框架 | React 18 (Hooks) |
| 路由 | React Router 6 |
| 樣式 | Tailwind CSS |
| 後端 / 資料庫 | Firebase Firestore |
| 認證 | Firebase Authentication |
| 圖片處理 | Canvas API |
| 部署 | Vercel |
- Node.js 18+
- Firebase 專案（需自行建立）
# 1. Clone 專案
git clone https://github.com/Du-22/pr-novel.git
cd pr-novel
# 2. 安裝套件
npm install
# 3. 新增 .env 檔案並填入你的 Firebase 設定在 .env 填入以下變數：
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
REACT_APP_FIREBASE_MEASUREMENT_ID=
# 4. 啟動開發伺服器
npm startsrc/
├── components/ # 共用元件（Navbar、留言系統、Skeleton...）
├── pages/ # 各頁面
├── hooks/ # useAuth 等 Custom Hooks
├── firebase/ # Firebase 設定與 CRUD 工具
├── utils/ # 工具函式（小說解析、收藏管理...）
└── data/ # 預設小說資料（mockData）
本專案使用 Claude Code（AI 工具）輔助開發，包含程式碼生成、架構規劃與問題排查。
MIT