這是一個基於React.js和Tailwind打造的健身紀錄網頁應用程式前端畫面,並使用axios串接自製的API(我的後端repo連結)。使用者可以使用此網站,查看、記錄、編輯、刪除自己的訓練與身體數據紀錄,並且透過查看數據,分析自己的訓練狀況與品質。
| 使用者名稱 | 密碼 | |
|---|---|---|
| user1 | [email protected] | 123456789 |
- 登入系統
- 使用者可以透過自己註冊的資訊登入
- 使用者可以註冊
- 使用者相關功能
- 使用者可以查看/修改 基本資料
- 使用者可以查看/修改 目標
- 訓練紀錄相關功能
- 使用者可以查看/新增/修改/刪除 訓練紀錄
- 使用者可以查看特定訓練紀錄
- 使用者可以查看/新增/修改/刪除 訓練紀錄細項
- 身體數據記錄相關功能
- 使用者可以查看/新增/修改/刪除 身體數據紀錄
- 使用者可以查看特定身體數據紀錄
首頁 (回目錄)
紀錄 (回目錄)
資料 (回目錄)
登入系統 (回目錄)
使用者功能 (回目錄)
-
請先確認已安裝好 fitness record後端專案
-
將專案 clone 至本地
-
在本地開啟後,透過終端機進入資料夾,輸入 :
npm install
-
在終端機中輸入以下指令啟動程式
npm run start
-
若在終端機中看見此行訊息則代表順利運行,打開瀏覽器進入下列網址
App is running on http://localhost:3000
-
若欲暫停使用
ctrl + c
| Package | version |
|---|---|
| react | v18..2.0 |
| react-dom | v18.2.0 |
| react-router-dom | v6.16.0 |
| clsx | v2.0.0 |
| axios | v1.5.1 |
| gh-pages | v6.1.0 |
| recharts | v2.9.3 |
| date-fns | v2.30.0 |
| jwt-decode | v4.0.0 |
| sweetalert2 | v11.7.32 |












