Budget Tracker

WBS形式のタスク・進捗管理Webアプリ

WBS-style Task & Progress Management Web Application

📋 概要

📋 Overview

Budget Trackerは、プロジェクト管理に最適なWBS(Work Breakdown Structure)ライクなタスク管理ツールです。 大項目・中項目・小項目の3階層でタスクを構造化し、予定工数と実績工数を記録することで進捗を可視化します。 ダークモード対応、キーボードショートカット、高速検索機能を備えた、モダンなSPA(Single Page Application)です。

Budget Tracker is an optimal WBS (Work Breakdown Structure) task management tool for project management. It structures tasks in 3 hierarchies (large, medium, small items) and visualizes progress by recording planned and actual hours. This modern SPA (Single Page Application) features dark mode, keyboard shortcuts, and fast search functionality.

🚀 アプリを起動 🚀 Launch App

✨ 主な機能

✨ Key Features

3階層タスク管理

3-Level Task Management

大項目 → 中項目 → 小項目のツリー構造でタスクを整理。親子関係を明確化し、プロジェクト全体を俯瞰できます。

Organize tasks in a tree structure: Large → Medium → Small items. Clarify parent-child relationships and get an overview of the entire project.

予定と実績の管理

Plan & Actual Management

開始日・終了日・予定工数を設定し、実績工数を記録。進捗率と遅延率を自動計算します。

Set start date, end date, and planned hours, then record actual hours. Automatically calculates progress rate and delay rate.

進捗可視化

Progress Visualization

プログレスバーで進捗を直感的に把握。遅れているタスクは自動的に警告表示されます。

Intuitively grasp progress with progress bars. Delayed tasks are automatically highlighted with warnings.

ダークモード

Dark Mode

システム設定に自動追従し、手動切り替えも可能。目に優しい暗色テーマでの作業をサポート。

Automatically follows system settings with manual toggle available. Supports work in an eye-friendly dark theme.

キーボードショートカット

Keyboard Shortcuts

G+D(Dashboard)、G+T(Tasks)、N(新規タスク)、Ctrl+K(検索)など、効率的な操作を実現。

G+D (Dashboard), G+T (Tasks), N (New Task), Ctrl+K (Search), and more for efficient operations.

高速検索

Fast Search

インクリメンタルサーチでタスクを即座に検索。大規模プロジェクトでも快適に操作できます。

Instantly search tasks with incremental search. Works smoothly even in large-scale projects.

🛠 技術スタック

🛠 Tech Stack

バックエンド

Backend

Node.js 18+ LTS Express 4.x SQLite (better-sqlite3) Helmet CORS Compression

フロントエンド

Frontend

Vanilla JavaScript (ES2020+) Custom CSS Variables Hash-based Routing LocalStorage

テスト・品質

Testing & Quality

Jest 29.x Supertest 6.x 97.92% Coverage 270 Tests (100% Pass)

🔄 開発プロセス

🔄 Development Process

このアプリケーションは、AI駆動の自動開発ワークフローで構築されました。 Phase 0(初期化)からPhase 6(GitHub公開)まで、完全自動実行により高品質なコードを短時間で生成しています。

This application was built with an AI-driven automated development workflow. From Phase 0 (Initialization) to Phase 6 (GitHub Publishing), high-quality code is generated in a short time through fully automated execution.

開発フェーズ

Development Phases

Phase 1: 要件定義・計画
Phase 2: 実装(Frontend/Backend/Database並列開発)
Phase 3: テスト合格(270件100%合格)
Phase 4: 品質改善(カバレッジ97.92%達成)
Phase 5: 完成処理(ドキュメント生成)

Phase 1: Requirements & Planning
Phase 2: Implementation (Frontend/Backend/Database parallel development)
Phase 3: Testing (270 tests, 100% pass)
Phase 4: Quality Improvement (97.92% coverage achieved)
Phase 5: Finalization (Documentation generation)

📊 品質メトリクス

📊 Quality Metrics

270
テスト数
Tests
100%
合格率
Pass Rate
97.92%
カバレッジ
Coverage
94.05%
分岐網羅率
Branch Coverage

すべてのコアロジックが徹底的にテストされており、本番環境での安定性を保証します。

All core logic is thoroughly tested, ensuring stability in production environments.

🎮 デモ

🎮 Demo

実際のアプリケーションを今すぐお試しください。

Try the actual application now.

アプリを起動する Launch Application