この記事では、GolangバックエンドとReactフロントエンド（TypeScript, TailwindCSS）を使ったシンプルなTODOアプリを紹介します。
Dockerで全コンポーネントが完結しており、SwaggerによるAPIドキュメント、Airによるホットリロードも実装。
リポジトリはGitHubに公開しているので、クローンするだけであなたの環境で動作させることができます！
はじめに
リポジトリをクローンし、以下のコマンドを実行するだけで、すぐにアプリが動作します：
docker-compose up --build
ブラウザで http://localhost:3000 にアクセスしてください。
アプリ概要
このTODOアプリは、シンプルなタスク管理システムです。
タスクの一覧表示、詳細編集、ドラッグ＆ドロップでのステータス変更など、日々のタスク管理に必要な機能がコンパクトに実装されています。
技術スタック
バックエンド
-
Go
フロントエンド
-
React
-
TypeScript
-
TailwindCSS
その他
-
PostgreSQL
- Swagger (APIドキュメント生成)
- Docker
- Air (ホットリロード)
- react-beautiful-dnd (ドラッグ＆ドロップ)
プロジェクト構成
.
├── backend
│ ├── Dockerfile
│ ├── controllers
│ ├── db.sql
│ ├── go.mod
│ ├── go.sum
│ ├── main.go
│ ├── models
│ └── tmp
├── docker-compose.yaml
├── docs # Swaggerなどのドキュメントを配置（必要に応じて）
└── frontend
├── Dockerfile
├── package.json
├── public
├── src
└── tsconfig.json
API仕様
| URL | メソッド | 説明 |
|---|---|---|
/tasks |
GET | タスク一覧取得 |
/tasks |
POST | 新規タスク作成 |
/tasks/{id} |
PUT | タスク更新 |
/tasks/{id} |
DELETE | タスク削除 |
※ 詳細なAPI仕様はSwagger UIで確認できます。
機能紹介
タスク一覧画面
-
ビュー切替: テーブルビューとボードビューをURLのクエリパラメータで切り替え可能
-
ドラッグ＆ドロップ: ボードビューでは、タスクをドラッグすることでステータスを変更可能
-
検索機能: タスク名・詳細のキーワードで検索可能
-
ステータス絞り込み: 複数のステータスでタスクをフィルタリング
-
新規タスク追加: 画面上からタスクを追加可能
タスク詳細画面
-
タスクの名前、詳細、ステータスを編集可能
-
保存/削除機能: 編集内容の保存やタスクの削除が可能（保存後は一覧画面に戻ります）
デザイン
- ボードビューのデザインはNotionを参考に、シンプルかつ直感的なUIを実現
- ステータスはピル型のデザインで表示
Dockerでの起動方法
-
Docker Composeを使用して起動
プロジェクトルートで以下のコマンドを実行してください：
docker-compose up --build -
各サービスにアクセス
- フロントエンド: http://localhost:3000
- バックエンド API: http://localhost:8080
- Swagger UI : http://localhost:8081
アピールポイント
-
Dockerで完結
すべての環境がDockerコンテナ上で構築され、簡単にセットアップ可能です。 -
ホットリロード
開発効率を高めるため、GolangではAir、React側では標準のホットリロードを採用しています。 -
SwaggerによるAPIドキュメント
APIの仕様をSwagger UIで確認できるため、開発者同士の連携やAPI利用者にとって分かりやすい仕様書を提供します。 -
直感的なUI
テーブルビューとドラッグ＆ドロップ対応のボードビューを備え、ユーザーは使いやすいインターフェースでタスク管理が可能です。
まとめ
このTODOアプリは、シンプルなコードベースでありながら、実用的なタスク管理機能を提供します。
Docker環境で完結するため、どなたでも簡単にセットアップでき、技術スタックも最新のものを採用しています。
ぜひ、GitHubのリポジトリからクローンして、あなたの開発環境で動作確認してください！