Diary
Node.js
Express
Vue
Responsive
アプリ
日々の出来事を記録し、AI (Gemini API)
がコメントをくれる機能を持つシンプルなWeb日記帳アプリケーションです。
フロントエンドはVue.js、バックエンドはNode.js/Expressを使用して構築されています。ユーザー登録・ログイン機能、日記のCRUD操作、検索機能などを備えています。
- POINT
-
・Gemini API連携
ユーザーが記述した日記の内容に基づき、AI (Gemini API) がコメントを生成する機能を実装しました。ユーザーはAIの性別や関係性、コメントスタイルを設定でき、よりパーソナルな体験を得られます。
・検索機能付き日記一覧
ページネーション、キーワード検索(デバウンス処理付き)、日付による絞り込み(年月/年月日)、並び替え(昇順/降順)といった、実用的な一覧表示機能を実装しました。
・状態管理とエラーハンドリング
ログイン状態やAPI通信中のローディング状態をグローバルに管理し、UIに反映させています。また、axiosインターセプターで認証エラー時の自動ログアウトや、APIエラー発生時のモーダル表示など、堅牢性も意識しました。 - 使用技術
- Node.js / Express / Prisma / JWT / Vue.js(v3) / axios / Gemini API
- デザイン
- Figmaページ(閲覧のみ可能です)