個人・家族向け家計管理Webアプリ

日々の収支管理から予算設定、貯蓄目標、家族・グループでの共有まで、実生活に近いお金の流れを一元的に可視化することを目的として開発しました。

単なる家計簿ではなく、
「長期的に使い続けられること」「複数人で管理できること」を意識した設計になっています。

プロジェクト概要

本プロジェクトは、フルスタック構成による個人開発プロジェクトです。
バックエンドからフロントエンド、インフラ構成、認証・セキュリティ設計まで一貫して実装しました。

実際の家計管理シーンを想定しながら、

複数口座・通貨の管理
定期収支・借金管理
家族・グループでの共有
AIチャットアシスタントによる家計・支出に関する質問対応

といった、実用性の高い機能群を段階的に設計・開発しています。

主な機能

コア機能

複数口座管理（現金・銀行・電子マネー・クレジットカード）
収入・支出・振替の記録
カテゴリ別予算管理・アラート通知
クレジットカード分割／リボ払い対応
マルチ通貨対応（VND / JPY）

計画・管理

定期収支（毎日・毎週・毎月・毎年）
貯蓄目標の設定・進捗管理
貸し借り（債務）管理と履歴管理

コラボレーション

家族・グループ管理機能
メンバー招待
共同貯蓄目標の設定

UX / 体験設計

ダッシュボードによる可視化（収支・カテゴリ別グラフ）
ライト / ダーク / システムテーマ対応
多言語対応（日本語 / 英語 / ベトナム語）
AIチャットによる家計質問サポート
通知機能（予算超過・支払いリマインドなど）
退会機能（7日間の復元猶予付き）

使用技術

Backend

Java 17
Spring Boot 3.2
Spring Security + JWT認証
Spring Data JPA
PostgreSQL
Flyway（DBマイグレーション）
OpenAPI / Swagger

Frontend

React 18 + TypeScript
Vite
TanStack Query
Tailwind CSS v4
Recharts
react-i18next
React Hook Form + Zod

Infrastructure / DevOps

Docker / docker-compose
Railway（Backend）
Vercel（Frontend）

工夫したポイント

実生活に即したデータ設計
単純なCRUDではなく、実際のお金の流れを想定したエンティティ設計を重視しました。
スケーラブルな構成
家族・グループ利用を前提とした認可設計、API構成を意識しています。
UXとロジックの分離
状態管理・非同期処理を整理し、UIの見通しを良く保つ構成にしました。
多言語・多文化対応
日本・ベトナム両方の利用シーンを想定し、i18n設計を初期段階から組み込んでいます。

URL・デモ情報

サイトURL
https://finance-tracker.duonglien.com/
デモアカウント
- Email：demo.jp@example.com
- Password：demo1234

振り返り

Finance Trackerは、技術力の確認だけでなく、「プロダクトとして考える力」を強く意識したプロジェクトです。
機能を実装するだけでなく、「誰が・どんな場面で・どう使うか」を考え続けることで、設計の質が大きく変わることを実感しました。

今後は、検索機能やより高度な分析機能の追加など、
実運用を想定した改善にも取り組んでいきたいと考えています。