誕生日お祝いサイト

大切な人の誕生日を、もっと特別に

生まれ年のデータ부터、カウントダウン、メッセージ、ゲーム、エフェクトまで——
誕生日をお祝うための كاملة機能を備えたプラットフォーム

---

---

主な機能

コア機能

機能	説明
リアルタイム・カウントダウン	次の誕生日までの残り時間をライブ表示
インタラクティブケーキ	マイクに息を吹きかけるとロウソクが消える演出
パーティー・エフェクト	紙吹雪、花火、風船など場面に応じたビジュアル
カスタム音楽再生	バースデーソングの再生＋アップロード対応

コミュニティ機能

機能	説明
リアルタイム・チャット	Supabase Realtime を使った瞬間的なメッセージ
お祝い掲示板	メッセージの投稿・返信・共感できる場
音声・ビデオメッセージ	ブラウザで録音・録画して特別な瞬間を残す
バーチャルギフト	デジタルギフトを送り合う仕組み
写真・動画アルバム	タグ付け・検索・スライドショー対応

ゲーム

ゲーム	説明
神経衰弱	カードを 맞춰ペアを探す記憶ゲーム
ジグソーパズル	画像からパズルを生成・難易度調整可
バースデークイズ	誕生日トリビアで盛り上がる
バースデーカレンダー	月ごとの誕生日一覧

テーマ & カスタマイズ

機能	説明
季節テーマ	桜・紅葉・雪など季節自動切り替え
イベントテーマ	クリスマス、ハロウィン、七夕、花見など
多言語対応	日本語・英語 UI 切り替え

---

クイックスタート

前提条件

• Node.js 18+
• npm または yarn
• Supabase アカウント

インストール

git clone https://github.com/yourusername/happy-birthday-website.git
cd happy-birthday-website
npm install

環境変数の設定

cp .env.example .env.local

.env.local を編集:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

データベース・セットアップ

Supabase プロジェクトを作成し、DATABASE.md の SQL を SQL Editor で実行してください。

開発サーバー起動

npm run dev

http://localhost:3000 でアクセス可能

---

プロジェクト構成

happy-birthday-website/
├── app/
│   ├── api/              # API Routes（誕生日、メッセージ、メディア、ギフト等）
│   ├── layout.tsx         # ルートレイアウト
│   ├── page.tsx          # トップページ
│   └── globals.css        # グローバルスタイル
├── components/
│   ├── ui/              # 通用 UI コンポーネント
│   ├── features/         # 誕生日機能コンポーネント
│   ├── community/         # コミュニティ機能
│   ├── games/             # ミニゲーム
│   ├── effects/          # ビジュアル・エフェクト
│   └── layout/            # ヘッダー、フッター、ナビゲーション
├── lib/
│   ├── hooks/            # カスタム React Hooks
│   ├── stores/            # Zustand グローバル state
│   ├── providers/         # React Context プロバイダー
│   ├── i18n/             # 多言語対応
│   ├── supabase/          # Supabase クライアント設定
│   └── utils/             # ユーティリティ関数
├── config/                # テーマ・デザイン・トークン
├── types/                 # TypeScript 型定義
├── public/                # 静的アセット
└── __tests__/             # テストコード

---

npm スクリプト

コマンド	説明
npm run dev	開発サーバー起動
npm run build	本番ビルド
npm run start	本番サーバー起動
npm run lint	ESLint 実行
npm run test	テスト実行
npm run test:watch	テスト監視モード
npm run test:coverage	カバレッジレポート

---

セキュリティ

• Supabase Anonymous Key はパブリック動作前提の設計
• Row Level Security (RLS) でデータアクセス制御
• Service Role Key は絶対にフロントエンドに露出させない

---

ドキュメント

ドキュメント	説明
DATABASE.md	データベーススキーマ・テーブル定義・API 対応
STRUCTURE.md	プロジェクト構成の詳細

---

大切な誕生日を、大切な人と一緒に