モノリポに変更しました。
- Node.js: v17.0.0
- React.js(TypeScript)
- Fastify, Prisma, PostgresQL, Docker
- 各環境変数を設定します。
cp .env.example .env
cp packages/front/.env.example packages/front/.env
cp packages/back/.env.example packages/back/.env
- postgresQL の Docker コンテナを立ち上げ、マイグレートします。
docker-compose up -d
npx prisma migrate dev
- パッケージをインストールします。
yarn
- 各アプリを起動します。
yarn front
yarn back
TODO 一覧を確認、作成、編集、アーカイブ、達成、順番入れ替えを行うことができるページです。
- 右下のボタンを押すことで TODO 作成モーダルが開き、TODO を作成することができます。
- TODO には複数のタグをつけることができ、すでに追加されているタグの中から選択することができます。
- 編集アイコンをクリックすることによって TDOO を編集することも可能です。
- ゴミ箱アイコンをクリックすることで TODO をアーカイブすることができます。アーカイブされた TODO はゴミ箱ページで確認することができます。
- チェックボックスをクリックすることにより、TODO を完了することができます。なお、チェックを入れてから一定時間変更可能な時間を設けており、その時間内にチェックを外すことで TODO の完了をキャンセルすることが可能となっています。また、TODO はドラッグにより順番を入れ替えることが可能となっています。変更された順番はデータベースに反映されるため、アプリを閉じた後でも順番は保持されるようになっております。
タグ一覧を確認、作成、編集、削除を行うことができるページです。
- タグページでタグの一覧を確認することができます。タグは紐づいている TODO が多い順にソートされて表示されます。
- 右下のボタンをクリックすることでタグ作成モーダルが開き、新しいタグを作成することができます。
- タグはカラーピッカーを使用して自由な色を選択することができます。
- また、即座にプレビューが表示されるので、自分が納得するまで色を変更し確認することが可能です。
- 各タグカードをクリックすることで編集を行うことが可能で、削除することもできます。
履歴ページでは、達成した TODO の一覧を見ることができます。また、間違えて達成しにしてまった TODO を戻すことも可能です。
ゴミ箱ページでは、アーカイブされた TODO の一覧を確認することができます。アーカイブされた TODO を戻すことも可能です。アーカイブされた TODO を完全に削除する場合には警告ダイアログが表示されます。