Reactのアプリ開発のチュートリアルです。
日々トラッカーと言うタイトルにしてますが、日々のポジティブ、ネガティブな感情を記録するアプリをチュートリアル的に開発していきます。
カレンダーイメージで、その日に感じたポジティブ・ネガティブな気持ちをチェックボックス形式で簡単に記録出来る仕組みを目指しました。また、メモ欄も設け、特に残しておきたい内容を記載出来るようにしています。
開発プラットフォームはReact(v19) + TypeScript + Firebase、UIはMUIです。
データの統計をわかりやすくビジュアライズするレポート機能も実装します。

React + Firebase 日々トラッカーアプリ開発

はじめに

初期構築

Firebase設定

レイアウト作成

Home画面のベース作成

Firestoreデータの取得

取得データの加工・集計処理

カレンダー作成

メニューエリア作成

フォームエリア作成

データ追加、削除、更新機能

Report 画面のベース作成

棒グラフ作成

カテゴリグラフ作成

登録一覧表示作成

登録一覧データ取得・削除

レスポンシブ対応

GitHub、Firebase連携

参考：リポジトリ情報等

firebase

react

typescript

vite

bauhaus