カケポン: Laravel10×Reactで楽しく続けられるミニマル家計簿アプリを作ってみた
カケポンは、支出の記録とお金の使い方を“楽しく・続けやすく”するために開発したシンプル&直感的な家計簿アプリです。 「毎日続けられる家計簿」をコンセプトに、ユーザー体験を第一に設計しました。 📱 アプリ全体像 カケポンは、3つの主要画面(ホーム・取引登録・カテゴリ分析)を軸に、日々の家計管理が無理なく続けられるUI設計になっています。 ・ホーム(ダッシュボード) 月ごとの収支サマリー、日別の取引一覧が一画面で確認可能。シンプルなグラフで支出傾向が直感的にわかります。 ・取引登録画面 +ボタンからワンタップで登録開始。金額とカテゴリを選んで即保存できるので、記録が習慣化しやすい設計です。 ・カテゴリ分析画面 カテゴリ別の支出を円グラフで可視化。どこにお金を使っているかを定期的に振り返ることができ、支出の見直しにも役立ちます。 操作はすべてモバイルファーストで設計しており、片手でサクサク入力・確認ができる軽快な体験を提供しています。 🗄️ DB 設計図 本アプリのデータベースは、「ユーザー」「カテゴリ」「収支の記録」「月別予算」など、家計簿に必要な最小限かつ拡張性のある構成を採用しています。 ユーザーごとのデータ分離により、個人利用に特化 収入・支出のカテゴリを個別に管理し、柔軟な分類が可能 収支記録は日付・カテゴリ・金額・メモ付きで記録でき、集計に最適で、予算管理機能も備えています。 DB設計スプレッドシートhttps://docs.google.com/spreadsheets/d/12yO13ONInd9DSd4_OPPaikfRCEjw3h4fEJiyFedEilk/edit?usp=sharing ☁️ インフラ構成図 カケポンのインフラは **AWS 上に構築されたコンテナベースのモダンな構成**を採用しています。 ・ フロントエンドは React (Vite) 製の SPA を S3 + CloudFront 上にホスティングし、高速かつセキュアな配信を実現 ・ バックエンド API(Laravel) は ECS Fargate にコンテナとしてデプロイ。ロードバランサ経由でリクエストを受け付け ・ MySQL (RDS) はプライベートサブネット内に配置し、外部アクセスを遮断。セキュアなデータ管理を実現 ・ Route 53 + ACM により独自ドメイン・SSL 対応を構成 ・ CI/CD は GitHub Actions を使い、main ブランチへの push をトリガーに API を自動デプロイ シンプルながらスケーラビリティとセキュリティを意識した設計で、個人開発でも本番運用に耐える構成を目指しました。 🧭 コンセプト ・ 毎日続けられるミニマルで快適な UI ・ カテゴリ別に支出・収入をスッキリ整理 ・ 習慣化支援/共有家計管理/固定費設定などの拡張も見据えた設計 🛠 技術スタック ・フロントエンド: React (Vite + TypeScript) ・バックエンド: Laravel 10 (REST API) ・認証: Laravel Sanctum(セッション管理) ・インフラ: AWS (Fargate, ECS, RDS, Route53, ACM, S3, CloudFront) ・CI/CD: GitHub Actions (main ブランチ push → 自動デプロイ) ⚙️ 実装ポイント 1. SPA 構成で UX 重視の高速レスポンス 2. モバイルファースト UI で快適な入力体験 3. GitHub Actions によるステージング〜本番の自動デプロイ 4. AWS 上でのドメイン取得/SSL/DB 設計まで一貫構築 📘 詳細設計資料 → https://drive.google.com/drive/folders/1PmtkIZxj6BMiNiYzRp1_RseaNJvh7naz?usp=sharing