/voice-board

for test

Primary LanguageJavaScript

VoiceBoard

Mock VoiceTube website develped by Nuxt.js

Demo

Specification (打勾代表完成)

  • 透過 async/await 呼叫 API 取得相關的影片資訊並將資訊呈現至頁面中。
  • 使用耳機 icon - link

上方篩選、排序功能列

  • 為前端篩選及排序，無需經由 API 篩選及排序
  • 排序從「發佈時間」、「觀看次數」、「收藏次數」中選擇一種，進行排序
  • 長度分別為「不限」、「4 分鐘以下」、「5 - 10 分鐘」、「超過 10 分鐘」，擇一進行篩選
  • 沒有篩選結果時，顯示「沒有篩選結果」

頁面設計規格

  • 全頁水平置中對齊 ( 最大寬度為 1366px )。
  • 影片資訊卡定寬定高，每排最多 4 張，卡片間間距最小為 20px，若還有更多空間，請將卡片 分散對齊 。
  • 卡片超出四張或頁面寬度不足以容納四張，請 自動換行 至下一行。
  • 滑鼠經過每張卡片時，請將影片縮圖放大 10%，放大過程需漸變。( 影片圖片不可露出黑邊 )
  • 影片標題最多為兩行。
  • RWD。

額外需求

  • 針對影片列表做 SEO 優化。
  • Unit Testing
  • End-to-End Testing

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# run unit test(jest)
$ npm run test

# open new terminal and serve with hot reload at localhost:3000
$ npm run dev
# Then run e2e test(jest-puppeteer) on dev
$ npm run e2e

# run e2e test(jest-puppeteer) on gh-pages(prod)
$ npm run e2e:gh-pages

# generate static project and deply to ghpage
Have to commit all code before deploy to gh-page
$ npm run generate:gh-pages
$ npm run deploy