Song search xstate

主要針對手機使用者，協助需要快速查找卓著樂譜曲目的使用者，能方便快速尋找所需內容。

Demo Link

使用技術

• React Hooks
  • 使用custom hooks整理Component，讓畫面跟邏輯分離
• XState
  • 管理input輸入到處理api非同步的各種狀態 (可於底下state chart預覽)
• GraphQL
• Infinite scroll
  • 串接GraphQL的同時使用pagination延遲載入除了第一頁的資料
• Debounce Search
  • 使用Debounce延遲送出api query
• SCSS

State chart

Xstate Demo Link

資料來源

卓著音樂資訊網