Dinner Record
日々の夕食を簡単に記録・管理できるWebアプリケーション
プロジェクト概要
目的
日々の食事記録を簡単に管理し、食生活の振り返りや健康管理を支援するWebアプリケーションを開発しました。シンプルで直感的なUIを重視し、誰でも簡単に使える食事記録アプリを目指しました。
主な機能
- • ユーザー認証（ログイン/新規登録）
- • 食事記録（日付、料理名、メモ）
- • 記録一覧表示・編集・削除
- • カレンダー表示
- • ジャンル別絞り込み
プロジェクト画像
メイン画面 - 食事記録の一覧表示
カレンダー画面 - 月間の食事記録
技術詳細
使用技術
Next.js 14
TypeScript
Tailwind CSS
Firebase Realtime Database
Firebase Authentication
開発期間
2024年2月 - 2024年3月（1ヶ月）
開発体制
個人開発
デプロイ
Vercel
主な機能
認証機能
- • Firebase Authentication
- • ログイン/新規登録
- • ユーザー別データ管理
記録機能
- • 日付選択
- • 料理名入力
- • メモ機能
- • ジャンル分類
表示機能
- • 一覧表示
- • カレンダー表示
- • ジャンル絞り込み
- • 編集・削除
UI/UX
- • レスポンシブデザイン
- • 直感的な操作
- • モダンなデザイン
- • 高速な動作
開発過程
1
要件定義・設計
シンプルで使いやすい食事記録アプリの要件を整理。ユーザー認証、CRUD操作、カレンダー表示などの機能を設計しました。
2
フロントエンド開発
Next.jsとTypeScriptを使用してコンポーネントベースの開発を実施。Tailwind CSSでレスポンシブデザインを実現し、直感的なUI/UXを重視しました。
3
バックエンド・デプロイ
Firebase Realtime Databaseでデータ管理を実装。Firebase Authenticationでユーザー認証を実現し、Vercelでデプロイを完了しました。
成果・学び
技術的な学び
- • Firebase Realtime Databaseの活用
- • 認証機能の実装
- • TypeScriptの実践的活用
- • レスポンシブデザインの実装
プロダクト面の学び
- • ユーザビリティの重要性
- • シンプルな設計の効果
- • 実用的なアプリの開発
- • デプロイから運用まで