Projects

タスク管理システム(個人開発)

デモ公開中

時間軸で全体を可視化するタスク管理システムを、設計から実装・デプロイまで個人で開発

ReactTypeScriptJavaSpring BootPostgreSQLAWS

Interactive Demo

実際に操作可能なデモ環境を準備中です

操作について

本デモは横方向のタイムライン操作を含むため、PCでの閲覧・操作を推奨します。スマートフォンでは下記の画面プレビューをご覧ください。

Screenshots

スマホでは操作が難しいため、主要画面を画像で確認できます。

概要

タスクを時間軸で可視化し、全体像を直感的に把握できるタスク管理システムを、設計から実装・デプロイまで個人で開発。

単なる ToDo アプリや UI デモではなく、業務システムに近い構成を前提とした「工程として成立する個人代表作」として制作。

バックエンド・フロントエンドを含め、設計・実装・運用を一体として捉えた構成とし、現在は実際に操作可能なデモとして公開。

担当工程

要件整理、システム設計、バックエンドおよびフロントエンドの実装、テスト、デプロイまでをすべて個人で担当。

デモ環境としての公開後も、挙動確認および改善を継続。

工夫した点・判断した点

最初から完成形を目指すのではなく、工程として成立する最小構成を段階的に積み上げる方針を採用。

バックエンドでは、画面や見た目よりも先に業務モデルの安定性を優先し、並行操作、監査、復元といった運用面を前提とした設計を重視。

フロントエンドでは、「一目で時間全体を把握できること」を最重要判断基準とし、シンプルな操作と最小限の UI で現在・過去・今後の関係性を直感的に把握できる構成を設計。

Timeline 表示においては、現在位置を見失わないことを最優先とし、スクロールや表示範囲の操作を含めて設計判断を行った。

技術スタック

フロントエンド

  • React
  • TypeScript

バックエンド

  • Java
  • Spring Boot

データベース

  • PostgreSQL

状態管理 / データ管理

  • 楽観ロック
  • バージョン管理

インフラ

  • Docker
  • AWS(ECS Fargate / RDS / ALB)※構築中

技術的なポイント

  • 並行操作を前提としたデータ整合性の確保

  • 楽観ロックによる競合検知

  • 明確なエラーハンドリング設計

  • 監査ログ、論理削除および復元を含む業務モデルを想定したバックエンド設計

  • タスク管理と時間軸(Timeline)表示を組み合わせた UI 構成

  • 行単位でのレイアウト同期

  • 縦横スクロールの分離・同期

  • sticky 要素の制御

前後端それぞれの責務を明確に分離しつつ、並行操作時にも状態の一貫性が崩れない構成を意識。

Code

部分コード公開予定

設計判断や実装の背景を説明できる形で、主要なコードの一部を公開予定です。
現在準備中です。