ランダム名言ジェネレータ
概要
このプロジェクトでは、ミニマリスト風のメモアプリを構築します。 GitHub や Zenn にあるような、スクラップ形式で、直感的にメモを追加できるアプリです。
学習目標
React の基本的な Hook である、useState による状態管理を学習します。
特に、state 内の配列・オブジェクトをイミュータブルに扱う方法を、確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- useState フックによる状態管理
- vite を用いた React 環境構築
- Tailwind CSS を用いたスタイリング
- TypeScript による型チェック
- GitHub Pages へのデプロイ
🎯 お題
- 「ユーザーストーリー」を全て満たす、アプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- メモ:
- メモの CRUD（作成・表示・編集・削除）
- リプライ:
- メモに紐付いたリプライの CRUD（作成・表示・編集・削除）
ユーザーストーリー
- メモ：
- フォームに文字を入力し、ボタンをクリックすると、メモを追加できる
- 追加したメモには、編集・削除・吹き出しのボタンが、アイコンで表示されている
- 削除ボタンを押すと、メモは削除される
- メモが削除されたら、それに紐ずくリプライも削除される
- 編集ボタンを押すと、編集フォームが表示され、メモの内容を更新できる
- リプライ：
- 吹き出しのボタンをクリックすると、メモに対するリプライを追加できる
- 追加したリプライには、編集・削除のボタンが、アイコンで表示されている
- 削除ボタンを押すと、リプライは削除される
- 編集ボタンを押すと、編集フォームが表示され、リプライの内容を更新できる
- その他：
- ユーザーとしてサイトにアクセスしたときに、メモのフォームが表示されている
- ユーザーとしてサイトにアクセスしたときに、サイトの概要を説明するメモが１つ表示されている
- アプリケーションがデプロイされており、誰でもアクセス可能である。