-
- テストユーザー
- メールアドレス：
test@example.com - パスワード：
password1
- メールアドレス：
- テストユーザー
| 領域 | 技術やツール |
|---|---|
| フロントエンド | Next.js(React) / TypeScript |
| バックエンド | Supabase(PostgreSQL) |
| スタイル | Headless UI / Tailwind CSS |
| 認証 | Supabase Authentication |
| ストレージ | Supabase Storage |
| Linter/Formatter | ESLint / Prettier |
- husky(pre commit 時のコード lint)
- react-hook-form,zod(フォームバリデーション)
- react-textarea-autosize(テキストエリア)
- react-hot-toast(トースト)
- use-debounce(デバウンス)
ユーザはGoogle, Emailでの２種類の方法でアカウント作成が可能。
- SupabaseAuthentication によって認証を行う。
- それぞれの入力フォームには react-hook-form を採用しており、再レンダリングやバリデーションを考慮して実装。
テキストのみ記載ができる。
ユーザーのテキスト入力から数秒間隔が空いたタイミングで自動保存される。
コンテンツがない状態でも「新規メモ」として一覧に表示される。
- テキストエリアを react-textarea-autosize によって実装。
- メモ一覧ではデータの更新が頻繁に行われる可能性があるため、毎回リクエストを行うように設定。
- メモの本文は、更新頻度が高くないと想定できるので、next.revalidate を指定することでキャッシュを設定。
自分自身のプロフィール編集が可能で、プロフィール画像の変更では任意の画像を登録できる。
テーマでダークモードの切り替えができる
- SupabaseStorage に画像の保存を行う。
- ダークモードを next-theme によって実装。
ヘッダーの検索バーへ文字を入力し、コンテンツの自動検索が可能。
更新日時が最新のメモが上部に表示される。
- 自動検索を use-debounce によって実装。
- React の useTransition を使用してレンダリング中にローディン UI を表示することで、UX を考慮して実装。
- 全ページフルレスポンシブ対応
- オブジェクト指向 UI を意識したデザイン
- TypeScript を React で使う際の型定義
- コンポーネント分割の粒度について
- メモ一覧の削除後メモを復元する機能
- プロフィール画面の画像登録機能の実装
- 外部認証サービスの構築・実装
- バックエンドを実装せずに RLS を用いて構築
- メモ作成後のトップページ遷移でキャッシュを無効にする
- ダークモード対応
- 動的ページのキャッシュ戦略
- コンテンツの自動保存、自動検索
- リクエストとレスポンスの型安全性の確保