Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/b13o/simple-memo-app

📚 A minimalist-style simple memo app.
https://github.com/b13o/simple-memo-app

react typescript usestate

Last synced: about 1 month ago
JSON representation

📚 A minimalist-style simple memo app.

Awesome Lists containing this project

README 

        
![memp app](https://github.com/user-attachments/assets/61e762b5-0d55-4691-8f58-2678f32d0f21)



# ランダム名言ジェネレータ



## 概要



このプロジェクトでは、ミニマリスト風のメモアプリを構築します。

GitHub や Zenn にあるような、スクラップ形式で、直感的にメモを追加できるアプリです。



## 学習目標



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



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



### 推奨技術



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



- useState フックによる状態管理

- vite を用いた React 環境構築

- Tailwind CSS を用いたスタイリング

- TypeScript による型チェック

- GitHub Pages へのデプロイ



---



## 🎯 お題



- 「ユーザーストーリー」を全て満たす、アプリを構築してください。

- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。

- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。



### 必須機能



1. **メモ**:

   - メモの CRUD（作成・表示・編集・削除）

2. **リプライ**:

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



## ユーザーストーリー



- メモ：

  - [ ] フォームに文字を入力し、ボタンをクリックすると、メモを追加できる

  - [ ] 追加したメモには、編集・削除・吹き出しのボタンが、アイコンで表示されている

  - [ ] 削除ボタンを押すと、メモは削除される

  - [ ] メモが削除されたら、それに紐ずくリプライも削除される

  - [ ] 編集ボタンを押すと、編集フォームが表示され、メモの内容を更新できる

- リプライ：

  - [ ] 吹き出しのボタンをクリックすると、メモに対するリプライを追加できる

  - [ ] 追加したリプライには、編集・削除のボタンが、アイコンで表示されている

  - [ ] 削除ボタンを押すと、リプライは削除される

  - [ ] 編集ボタンを押すと、編集フォームが表示され、リプライの内容を更新できる

- その他：

  - [ ] ユーザーとしてサイトにアクセスしたときに、メモのフォームが表示されている

  - [ ] ユーザーとしてサイトにアクセスしたときに、サイトの概要を説明するメモが１つ表示されている

  - [ ] アプリケーションがデプロイされており、誰でもアクセス可能である。