前端練習介面
以 React 與 Vite 建立題目載入、作答、解析、錯題本、題目標記、會員中心與排行榜等使用流程。
📝 命題工具系列
題庫練習系統製作範本
從 React/Vite 前端、Cloudflare Worker API 到 Cloudflare D1，建立一套由使用者自行製作題庫的選擇題練習系統。
這是練習系統範本，不是原有題庫備份
Repo 不包含原有題目的文字、選項、答案、解析、會員資料或正式部署設定。使用者下載後，請在自己的環境建立資料庫並自行製作題庫。
01
這個 Repo 會教你什麼？
公開內容聚焦在「如何製作」與「資料放在哪裡」，讓使用者可以依自己的科目、題型與部署需求重建系統。
Worker API
以 Hono 建立 Cloudflare Worker API，處理登入、題目讀取、作答紀錄、管理者題目匯入與 OAuth 流程。
D1 資料庫
Repo 提供空白 schema 與 migration，說明題目、使用者、練習紀錄及題目標記資料表如何建立。
自己的題庫
使用者可以參考欄位格式，製作自己的題目分類、題幹、選項、正確答案與解析；範例只放一組國小成語示範題。
02
前端、API 與資料庫如何連在一起？
準備題目
依照題目格式製作自己的 JSON 或 CSV，先決定科目、分類與題目內容。
建立 D1
在自己的 Cloudflare 帳號建立 D1，執行 schema 與 migrations，保留自己的資料庫 ID。
部署 API
設定 Worker binding 與 secrets，讓前端透過自己的 API 網址讀取題目與紀錄。
建置前端
設定 VITE_API_BASE 後執行建置，將產出的前端放到自己的部署環境。
03
資料庫的位置與內容
資料庫不放在 Repo 裡
backend/schema.sql 與 backend/migrations/ 只描述資料表結構。實際題庫與會員練習紀錄，應放在使用者自己的本機資料庫或 Cloudflare D1。
- 使用者自行建立 D1 與 database binding。
- 題目內容由使用者自行製作、匯入與管理。
- JWT secret、OAuth secret 與正式設定留在 secrets 或未提交檔案。
question-bank-practice-template/
├─ frontend/ React/Vite
├─ backend/ Worker + D1 schema
├─ samples/ 格式示範題
└─ docs/ 製作與安全說明
04
使用者可以怎麼開始？
先閱讀文件
從 README、資料庫設定、題目格式與安全說明開始，確認自己的部署方式與資料邊界。
- 建立自己的空白 D1。
- 複製 example 設定檔再填入自己的值。
- 不要把正式設定檔提交到 Git。
再製作題庫
可以從國小成語、閱讀理解、自然科或其他選擇題開始，依範例欄位建立自己的題目資料。
- 題目 ID 與分類由使用者決定。
- 選項、答案與解析要互相對應。
- 正式題庫不應直接放在公開 Repo。
取得公開製作範本
Repo 會提供前端原始碼、Worker API、D1 schema、migration、範例欄位與安全說明。請使用自己的題庫與自己的部署設定。