主な機能
- ユーザー管理メール+パスワード+ユーザー名での新規登録・ログイン、ゲストログイン（ログアウトでデータ消去）
- フレンド交換: 6桁英数字のフレンドコードで検索・申請・承認/拒否、双方向フレンド関係
- プロフィール/ステータス共有: ニックネーム・所属・電話・公開メール・ステータス（対応可/不可/緊急時のみ）・対応状況メモ（30分後対応可能など）を管理
- リスト管理: 上部にピン留め、ドラッグ&ドロップで並び替え、検索（名前・状態で絞り込み）、クリックで詳細モーダル表示
- 画像アップロード: アバターをアップロードし、Next Imageで最適化表示
- ゲストモード: ローカルストレージにプロフィール・フレンドを保存し、簡易利用を提供
-
メモ機能フレンドそれぞれに自分にしか見えないメモを追加することができます。
使用している言語・技術・サービス
- フレームワーク: Next.js 14 (App Router)
- 言語: TypeScript
- スタイリング: Tailwind CSS
- 認証・DB・ストレージ: Supabase（認証、Postgres、ストレージ、RLS）
- UI補助: react-beautiful-dnd（ドラッグ&ドロップ対応）
- ビルド/ツール: ESLint、PostCSS、Tailwind、tsconfig
- 画像最適化: next/image（Supabaseストレージの画像を remotePatterns で許可）
- デプロイ先: Vercel（自動デプロイ想定）
- その他: ローカルストレージ利用（ゲストモード）、カスタムイベントでダッシュボード更新
フレンド追加時に双方向で表示させるのに苦労しました。できるだけシンプルで一目でできるだけ多くのフレンドを表示できるように心がけました。リスト表示時のフレンドの情報の取捨選択の塩梅がなかなか難しかったです。ゲストモードでログインできるのでぜひ見てみてください。