# Front-End Interview Homework
請開發一個「凱鈿音樂庫平台」，使用 Spotify API 作為資料來源。
Deadline 一週。

* 請將你的程式碼推到 public repository。
* 並確保專案是可以在本地端執行的。
* 將專案 repository link 提供給我們的 HR

## Technical Requirements
1. 使用 React 框架編寫網頁
2. 使用 next.js 作為 server 框架
3. get client credentials 必須在 server 端處理，也就是你的client_id 和 client_secret 不可以存在 client 端
4. 介面必須針對各種裝置大小去編排（RWD）。
5. 需兼容最新版本主流瀏覽器（Chrome、Edge、Safari、Firefox）
6. README 文檔必須提供在本地端執行的說明。
7. 需做錯誤狀態處理，例如：API 伺服器沒有回應要提示使用者
8. 寫 Functional Component

## Feature Requirements
* Header 區塊
* Banner 區塊
* Check Out Our Music Library 區塊。
* All 預設顯示 featured-playlists 音樂清單
* 使用者可以透過切換上方 Tab 載入不同類型音樂清單。
* 使用者可以預覽清單前8首樂曲。
* 載入的歌曲點擊前方播放按鈕必須提供預覽功能。
* 歌曲須包含歌曲名稱、演唱者、專輯名稱等資訊。
* Browse by category 區塊
* 使用者能訪問前12個熱門分類。
* 每個項目必須包含分類名稱、背景圖片。
* Why us 區塊
* Plan 區塊
* User experience 區塊
* Footer 區塊

## Extra Points
* CSS in JS (Style-components)
* 使用 Redux 做狀態管理
* 使用 TypeScript 編寫
* 使用 ESlint 統一程式碼風格
* 將專案部署到任一雲端環境
* 撰寫 unit test

## Design
https://www.figma.com/file/C0cxEy9XvTffDC0cQ2deNM/Sounds-effect-library---responsive-landing-page-(Community)?node-id=264%3A713

## API Doc

請註冊一個 Spotify 開發者帳戶

[Spotify Web API Doc](https://developer.spotify.com/documentation/web-api/reference)

### Using APIs

1. get client credentials
https://developer.spotify.com/documentation/general/guides/authorization/client-credentials

2. get featured-playlists
https://api.spotify.com/v1/browse/featured-playlists

4. get categories
https://api.spotify.com/v1/browse/categories

3. get playlist by categorie
https://api.spotify.com/v1/browse/categories/{category_id}/playlists

4. get tracks by playlist
https://api.spotify.com/v1/playlists/{playlist_id}/tracks