🍘

タスク管理を作る。next.js【作例】

2022/04/23に公開約1,400字

概要:

タスク管理 作成のメモとなります。あまり技術的な内容は無いので。
紹介記事みたいな内容です

  • メンバー内で共有可能、個人での利用も可能です。

  • プロジェクトにメンバーを追加する場合、招待コードをメンバーから送付する形です

  • テスト環境は、vercelに設置, db はsupabase 。サーバーレス風な構成

  • コールドスタート状態になりやすく、遅延しやすいですが。ウォームアップ対応的な処理は追加していません

  • 設置時のインフラ部分の、運用コストが無料

  • ログインは、firebase 認証


構成

  • next.js 12
  • node 14
  • apollo-client
  • apollo-server
  • prisma ORM
  • postgres / supabase
  • firebase
  • exceljs

関連


関連のコード

  • OSSで公開しました。

https://github.com/kuc-arc-f/task_group
  • apollo-server / backend

https://github.com/kuc-arc-f/apollo_task

画面の参考

  • Task一覧

  • task編集、 status編集等が可能

  • task詳細

  • 招待画面


  • Excel(xlsx) export: Task一覧から出力
  • こちらは、縦レイアウトで。タスク状態が縦配置にしました。


参考の tsx

  • フロントのパス一部のみですが、下記

  • task一覧
    /src/pages/tasks/index.tsx

  • 詳細
    /src/pages/tasks/[id].tsx

  • 編集
    /src/pages/tasks/edit/[id].tsx

  • 招待画面
    /src/pages/projects/invite.tsx


....

Discussion

ログインするとコメントできます