graphfyというアプリを開発したので、開発におけるメモ等を残そうと思います。

graphfyとは

Spotifyのプレイリストを時系列順のグラフで表示できるようにしたアプリです。
基本的にはスマホからのアクセスを想定してます。そのためPCからアクセスするとレイアウトが崩れています。

Gitのグラフ表示をイメージしました。
まだまだ追加したい機能はあるので絶賛開発中です(track検索機能など)

以下のリポジトリで管理してます。(Readmeがデフォルトのまま。。。)

モチベーション

私は普段iPhoneからSpotifyのアプリを使用して音楽を聞いています。
他の音楽アプリでも同様にプレイリストが作成できると思いますが、SpotifyのプレイリストをiPhoneアプリで見ると
その曲をいつ追加したのかがわかりにくいです。(単純に表示の仕方がわかってないだけかもですが。。。)

左: iPhone、右: Desktop

個人的にSpotifyのUIはとても見やすく、使いやすいのですがPlaylistのこの件に関しては不満があったので、せっかくなら自分で見やすいアプリを作ろうと考えました。

主にNextAuthとSpotify周りの部分です...

useSessionから取得したsessionの中身をそのまま触ろうとすると、型がunknownとなっていました。

これに関しては公式のドキュメントに記載がありました。

NextAuthを使用したアプリをそのままVercelへデプロイしても403エラーが発生し、認証を通ることができませんでした。

調べたところ、環境変数等の設定が必要でした。

詳細に関しては以下の記事が助けになりました。