---
# System prepended metadata

title: Alion 前端面試題目

---

# YouTube Shorts Clone
## 目標：複製 YouTube Shorts 的介面，取特定頻道的 Shorts 列表並且播放。

### 1. 複製 YouTube Shorts（圖一）
    - 側邊的按鈕不需要有功能，只要樣式一樣就好
    - 影片下方的影片名稱跟 Hash Tag 不用做，只要乾淨的影片就好。
    - 需要可以點擊暫停影片。
    - 需要可以靜音。
    - 可以播放並且操控影片就好，不用糾結在隱藏 YouTube 的一些遮罩（若有辦法處理掉也可）。

### 2. 取得『[THE FIRST TAKE](https://www.youtube.com/@The_FirstTake)』的 Shorts 列表
    - 不論任何方法，只要可以拿到列表資料並顯示就好，但必須是真實資料，不能寫假資料。

### 3. 滑動行為
    - 可以參照 YouTube Shorts 網頁版，使用『滾輪滑動』或手機版的『拖曳滑動』，二擇一製作即可。
    - 滑動到下一個影片時，要『暫停』上一個影片並且播放當前的影片。
    - 返回上一個影片時，要從之前暫停的地方播放。
    
### 注意事項 👹
    - 請依照應徵的職位選擇 React, React Native 或 Vue 製作，不侷限框架。
    - 不限使用任何狀態管理。
    - 不限任何 css 框架。
    - 請使用 Git。
    - 檔案(repo)名稱請用，short-{english_name}-{date}。 ex: short-kevin-20240101。
    - 請注意網站的渲染效能。
    - 請注意網站的渲染效能。
    - 請注意網站的渲染效能。
    
### 加分項 💪
    - 部署網站。
    - 撰寫 Readme。
    - 簡潔清楚的程式碼。
    
### 圖片
圖一
![截圖 2023-12-07 下午1.47.19](https://hackmd.io/_uploads/rkaaqJx86.png)
