/dnd-todos

Primary LanguageTypeScript

Dnd Todos

モノリポに変更しました。

実行環境

  • Node.js: v17.0.0
  • React.js(TypeScript)
  • Fastify, Prisma, PostgresQL, Docker

実行手順

  1. 各環境変数を設定します。
cp .env.example .env
cp packages/front/.env.example packages/front/.env
cp packages/back/.env.example packages/back/.env
  1. postgresQL の Docker コンテナを立ち上げ、マイグレートします。
docker-compose up -d
npx prisma migrate dev
  1. パッケージをインストールします。
yarn
  1. 各アプリを起動します。
yarn front
yarn back

アプリ説明

TODO ページ

TODO 一覧を確認、作成、編集、アーカイブ、達成、順番入れ替えを行うことができるページです。

  • 右下のボタンを押すことで TODO 作成モーダルが開き、TODO を作成することができます。
  • TODO には複数のタグをつけることができ、すでに追加されているタグの中から選択することができます。
  • 編集アイコンをクリックすることによって TDOO を編集することも可能です。
  • ゴミ箱アイコンをクリックすることで TODO をアーカイブすることができます。アーカイブされた TODO はゴミ箱ページで確認することができます。
  • チェックボックスをクリックすることにより、TODO を完了することができます。なお、チェックを入れてから一定時間変更可能な時間を設けており、その時間内にチェックを外すことで TODO の完了をキャンセルすることが可能となっています。また、TODO はドラッグにより順番を入れ替えることが可能となっています。変更された順番はデータベースに反映されるため、アプリを閉じた後でも順番は保持されるようになっております。

image

TODO 作成、編集 image

タグページ

タグ一覧を確認、作成、編集、削除を行うことができるページです。

  • タグページでタグの一覧を確認することができます。タグは紐づいている TODO が多い順にソートされて表示されます。
  • 右下のボタンをクリックすることでタグ作成モーダルが開き、新しいタグを作成することができます。
  • タグはカラーピッカーを使用して自由な色を選択することができます。
  • また、即座にプレビューが表示されるので、自分が納得するまで色を変更し確認することが可能です。
  • 各タグカードをクリックすることで編集を行うことが可能で、削除することもできます。

タグ一覧 image

タグ作成 image

タグ編集 image

履歴ページ

履歴ページでは、達成した TODO の一覧を見ることができます。また、間違えて達成しにしてまった TODO を戻すことも可能です。 image

ゴミ箱ページ

ゴミ箱ページでは、アーカイブされた TODO の一覧を確認することができます。アーカイブされた TODO を戻すことも可能です。アーカイブされた TODO を完全に削除する場合には警告ダイアログが表示されます。

アーカイブされた TODO 一覧 image

アラートダイアログ image