Ctrl-Y（ご褒美ポケット）

親子で使えるタスク報酬管理アプリ — お手伝いを「お仕事」に変えて、リアルな給与体験を届けます。

制作背景

課題

家庭でのお小遣い制度では、タスクごとの報酬が曖昧になりがちで、子供にとって「何をすればいくらもらえるのか」が不明確でした。

目的

報酬を月ごとにまとめて支給する仕組みにすることで、リアルな給与体験を通じた社会勉強の機会を子供に提供します。

解決アプローチ

1. 親がタスクと報酬を設定する
2. 子供がタスクを実行・完了報告する
3. 月末に自動集計し、給与明細として可視化する

このサイクルを繰り返すことで、子供が「働いて稼ぐ」感覚を自然に身につけられます。

主な機能

• タスク管理 — タスクの作成・編集・削除・ステータス管理
• 給与システム — 月次自動集計、給与記録の可視化
• 親子専用画面 — 親と子供それぞれに最適化されたUI
• 子供用簡易ログイン — キーワード認証による簡単なログイン
• プッシュ通知 — タスクの完了報告や承認をリアルタイムに通知
• PWA対応 — モバイル端末にインストールしてネイティブアプリ風に利用可能

技術選定

カテゴリ	技術	選定理由
フロントエンド	React + Vite	高速なHMRで開発効率向上、コンポーネント指向で再利用性が高い
スタイリング	Tailwind CSS	ユーティリティファーストでレスポンシブデザインを迅速に構築
バックエンド	Express (Node.js)	JavaScriptで統一し学習コストを低減、軽量で柔軟なAPI構築
データベース	PostgreSQL (Supabase)	リレーショナルデータに適しており、Supabaseで運用負荷を軽減
ORM	Prisma	型安全なDB操作、マイグレーション管理が容易
認証	JWT	ステートレスな認証でスケーラブル、親子で異なるトークン管理が可能
デプロイ	Vercel + Railway	フロント/バックエンドそれぞれに最適なホスティング、GitHub連携で自動デプロイ
PWA	Vite PWA Plugin	モバイルでのネイティブアプリ風体験を提供

ディレクトリ構成

Ctrl-Y/
├── frontend/
│   ├── public/          # 静的ファイル（アイコン、manifest等）
│   ├── src/
│   │   ├── components/  # 再利用可能なUIコンポーネント
│   │   ├── pages/       # ページコンポーネント
│   │   ├── config/      # 設定ファイル
│   │   ├── lib/         # ライブラリ・ユーティリティ
│   │   └── utils/       # 汎用ヘルパー関数
│   └── vite.config.js
├── backend/
│   ├── prisma/          # スキーマ定義・マイグレーション
│   ├── src/
│   │   ├── controllers/ # リクエストハンドラ
│   │   ├── routes/      # APIルーティング
│   │   ├── services/    # ビジネスロジック
│   │   ├── middlewares/  # 認証・バリデーション等
│   │   ├── lib/         # ライブラリ・ユーティリティ
│   │   └── utils/       # 汎用ヘルパー関数
│   └── server.js
└── README.md

環境構築

前提条件

• Node.js (v18以上)
• PostgreSQL（またはSupabaseアカウント）

フロントエンド

cd frontend
npm install
npm run dev

バックエンド

cd backend
npm install
npx prisma migrate dev
npm run dev

環境変数

各ディレクトリに .env ファイルを作成してください。

backend/.env

DATABASE_URL=postgresql://...
JWT_SECRET=your-secret-key

frontend/.env

VITE_API_URL=http://localhost:3000