シンプルメモアプリ

概要

このプロジェクトでは、ミニマリスト風のメモアプリを構築します。 GitHub や Zenn にあるような、スクラップ形式で、直感的にメモを追加できるアプリです。

学習目標

React の基本的な Hook である、useState による状態管理を学習します。

特に、state 内の配列・オブジェクトをイミュータブルに扱う方法を、確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• useState フックによる状態管理
• vite を用いた React 環境構築
• Tailwind CSS を用いたスタイリング
• TypeScript による型チェック
• GitHub Pages へのデプロイ

---

🎯 お題

• 「ユーザーストーリー」を全て満たす、アプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
• なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. メモ:
   • メモの CRUD（作成・表示・編集・削除）
2. リプライ:
   • メモに紐付いたリプライの CRUD（作成・表示・編集・削除）

ユーザーストーリー

• メモ：
  • フォームに文字を入力し、ボタンをクリックすると、メモを追加できる
  • 追加したメモには、編集・削除・吹き出しのボタンが、アイコンで表示されている
  • 削除ボタンを押すと、メモは削除される
  • メモが削除されたら、それに紐ずくリプライも削除される
  • 編集ボタンを押すと、編集フォームが表示され、メモの内容を更新できる
• リプライ：
  • 吹き出しのボタンをクリックすると、メモに対するリプライを追加できる
  • 追加したリプライには、編集・削除のボタンが、アイコンで表示されている
  • 削除ボタンを押すと、リプライは削除される
  • 編集ボタンを押すと、編集フォームが表示され、リプライの内容を更新できる
• その他：
  • ユーザーとしてサイトにアクセスしたときに、メモのフォームが表示されている
  • ユーザーとしてサイトにアクセスしたときに、サイトの概要を説明するメモが１つ表示されている
  • アプリケーションがデプロイされており、誰でもアクセス可能である。