Clerk を使ったブックマークマネージャーを作った話

• GitHub: https://github.com/lvncer/bookmarks
• 公開先: https://bookmarks-gamma-vert.vercel.app

0. プレビュー

1. 使用技術

• スタックたち
  

• Supabase のスキーマ定義
  

2. なんで作ったんですか？

単純にブックマークマネージャーを作りたいというのがありました。しかし既存でいくらでも優秀なのがあるので、実際は勉強がてらクローンアプリという感じで進めて行くことに。
いままで clerk と supabase を連携するときは web hook を使っていましたが、デバッグをするときに毎回サーバーを立ててその公開 URL を Clerk に設定するという、なかなかめんどくさいことをしなければいけないのです。
あと、すこし調べたら JWT で連携すればそんなことしなくてもいいということがわかりました

参考 URL：https://zenn.dev/harukii/articles/f9c1a66ae344fc

3. どういう風に作ったか

1. まず、要件を定義します。ユーザごとにブックマークを保存できる必要があるので、ユーザ認証とブックマークを保存できるデータベースが必要。それらが連携出来たらより良い。ならば今流行り（？）の Clerk と Supabase を使うしかない。

2. 次に、Clerk と Supabase を連携する、どうやら JWT Token を使うと楽だと知り、参考 URL を見ながら連携した。あと、データベースのスキーマ定義を考えました。ユーザ情報とブックマークを保存するテーブルは確実だとして、カテゴリごとにブックマークを保存したいと思っていた（Google のブックマークもフォルダごとにブックマークを保存できるみたいな）。

3. できたら、Clerk と Supabase のシークレットキーなどを準備して、ドキュメント通りに、Next.js プロジェクトを開発していく。Next.js と clerk のセットアップ済みのテンプレートがあったので、それを生かしていけば比較的早く終わると思う。骨組みを ChatGPT に作ってもらう。Supabase への fetch などの処理はすべて任せてしまっているので、理解していないためにバグが発生しても解決できない。

   テンプレート参考 URL：https://github.com/clerk/nextjs-auth-starter-template

4. 基本的な機能が完成したら、後は仕上げ。Bolt というこれまた新しい AI のサービスを使います。出来上がったコードを丸々ぶん投げて、「モダンなレイアウトに TailwindCSS を適用して」と頼むだけであとはプレビューしてくれます。ここが気に食わないといえば、すぐに直したコードをまたプレビューしてくれます。

4. 今後について

今後は、このサービスを改良していければしていきたいと思っています。もっと見やすくレイアウトを修正したり、公開用に URL を発行できるようにしたいなとか。まあ、とにかくやりたいことはたくさんあります。

また、この技術スタックを使えば、作れないサービスはないと思うので、思いつくものをいろいろとやってみたいなと思いました。