JKOPAY Pretest

Description

This project was bootstrapped with Create React App.

Technologies

React v18, Scss, TypeScript, Axios, react-query and Create-React-App

Demo

• View on CodeSandbox: Click Me

• View on Netlify: Click Me

Requirements

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

Installation

$ npm install

Running the app

# development
$ npm start

# production mode
$ npm run build

Test

# unit tests
$ npm run test