This project was bootstrapped with Create React App.
React v18, Scss, TypeScript, Axios, react-query and Create-React-App
- 新建 npm 專案
- 照圖刻出下方 必須的 頁面 (可忽略上方手機訊號 icon，放一個黑色背景 即可)
- 模擬情境設計 mock data 的格式(假設後端尚未給 api) 5. 加入適當的操作動畫
- 使用 React 撰寫
- 不可以用任何 UI Component library (ex: Material UI, Bootstrap)。
- 實作商品細節頁
- 顯示售價及詳細資訊
- 產品資訊內容不一定完善
- 商品規格頁
- 將有庫存的商品加進購物車
- 每種商品的規格不一定
- 數量可以按 +/-, 或是填入數字
- 選取後，點擊 “加入購物車”，顯示購物車的規格及數量
- 產品列表頁 (非必須)
- 顯示商品名稱及價格
- 商品可能都賣完了，也可能有一個，也可能超多
- Bouns
- 使用 typescript 撰寫
- 當離線的時候，可能出現的情境處理
- 產品列表頁面，可下拉無限滾動印出下一頁的產品
- 使用類似 mock service worker 的服務(或自己撰寫類似的 mock data 資料流)
- 能設計出高彈性的頁面資料變換
$ npm install# development
$ npm start
# production mode
$ npm run build# unit tests
$ npm run test