CSS・UIの変更 | Tailwind CSS

夢や目標を叶えるためのTodoアプリという趣旨と、前向きさやキラキラした世界観により合わせるため、背景色などを変更し透明感や軽さを出しました。

サーバー側とフロント側の共通のバリデーション | zod schema

フォームの実装にはServer Actionsを使用しています。フロント側と共通のzodスキーマを用いることで、フロントとサーバー側のバリデーション違いによるエラーを防ぎ、UXを向上しています。

パスワードリセットページの追加 | Supabase Auth

パスワードを忘れてしまっても変更して再びログインできる実装を追加しました。ユーザーがログインできなくなることを防ぎ、ログイン時のUXを向上しました。

Storageの追加 | Supabase Storage

ブラッシュアップ前にはできなかった、ユーザーがアップロードした画像をUIに表示できるようになりました。ストレージはSupabase Storageを利用しています。

工夫した点

ロジック部分とUI部分のファイルを分離しテストを行いやすくしました。styled-componentsからTailwind CSSに変更し、余分なthemeや設定ファイルを削除してコードの見通しを良くしました。DBとのズレを防ぎコードの可読性を上げるため、スピナー以外のグローバルステートを削除しました。

難しかった点・今後の課題

元々認証にはNextAuthを使用していましたが、Supabase Storageを利用する段階でSupabase JWTを取得できず、コードを変更しても何度もエラーとなってしまいました。NextAuthのセッション上書きにより、NextAuthのセッションとSupabaseのセッションが不一致になってしまうことでstorage RLSが拒否し、userのIDがundefinedになってしまうため画像を取得できないようでした。 そこで、Supabase Authに変更することで、この問題は解決できました。SupabaseのDBやStorageを利用する場合は、認証も同じSupabaseにして統一するのがやはり良いみたいでした。今後は、相性なども考えライブラリなどを選択する必要性を感じました。