Projects

Task Management System (Personal Project)

Demo Available

Designed and developed a task management system with timeline-based visualization from scratch, handling design, implementation, and deployment independently

ReactTypeScriptJavaSpring BootPostgreSQLAWS

Interactive Demo

An interactive demo environment is being prepared

Usage Note

This demo includes horizontal timeline operations and is recommended for PC viewing. On smartphones, please refer to the screen previews below.

Screenshots

Main screens are available as images for easier viewing on mobile devices.

Overview

Personally designed, implemented, and deployed a task management system that visualizes tasks on a timeline for intuitive understanding of the big picture.

Not just a simple ToDo app or UI demo, but created as a "personal flagship project that functions as a complete development lifecycle" with an enterprise-system-like configuration.

Designed as an integrated approach covering backend, frontend, design, implementation, and operations, currently published as an interactive demo.

Responsibilities

Handled all phases personally: requirements gathering, system design, backend and frontend implementation, testing, and deployment.

Continuing to verify behavior and make improvements after publishing as a demo environment.

Design & Implementation Approach

Rather than aiming for a complete product from the start, adopted an approach of incrementally building up the minimum viable configuration that functions as a complete development lifecycle.

On the backend, prioritized business model stability over screens and appearance, emphasizing design that assumes operational aspects like concurrent operations, auditing, and restoration.

On the frontend, used "being able to grasp the entire timeline at a glance" as the most important decision criterion, designing a configuration that allows intuitive understanding of the relationship between past, present, and future with simple operations and minimal UI.

For timeline display, made not losing sight of the current position the top priority, including design decisions for scrolling and display range operations.

Tech Stack

フロントエンド

  • React
  • TypeScript

バックエンド

  • Java
  • Spring Boot

データベース

  • PostgreSQL

状態管理 / データ管理

  • Optimistic Locking
  • Version Control

インフラ

  • Docker
  • AWS (ECS Fargate / RDS / ALB) *under construction

Technical Points

  • Ensuring data consistency assuming concurrent operations

  • Conflict detection through optimistic locking

  • Clear error handling design

  • Backend design assuming business models including audit logs, soft delete, and restore

  • UI configuration combining task management with timeline display

  • Row-level layout synchronization

  • Separation and synchronization of vertical and horizontal scrolling

  • Sticky element control

Designed for state consistency during concurrent operations while clearly separating frontend and backend responsibilities.

Code

Partial Code Release Planned

Selected code portions will be released with explanations of design decisions and implementation background.
Currently in preparation.