誕生日お祝いサイト - 喜びでつながるプラットフォーム

創造的なインタラクティブ・オープンソース Web サイト です。友だちや家族の誕生日を「覚える・祝う・共有する」ための仕掛けを、楽しくユニークな形でまとめています。リアルタイムのカウントダウン、2D バースデーケーキへの「ふーっ」と息を吹きかける演出、写真・動画アルバム、ミニゲーム、リアルタイムチャット、季節やお祭りに合わせたテーマなど、忘れられない誕生日体験を届けます。

🌟 主な機能

🎂 コア機能

📸 アルバム & メディア機能

🎮 ゲーム & エンタメ

💬 コミュニティ & ソーシャル機能

🎭 テーマ & カスタマイズ

※ コード側では日本・国際的なテーマに統一しています。

このプロジェクトで得られる価値 💖

1. 友人・家族とのつながりを強くする

   • 大切な人の誕生日をうっかり忘れることを防ぐ
   • 共通の「お祝いスペース」でメッセージや思い出を共有
   • 誕生日をきっかけにコミュニケーションが自然に増える

2. 思い出を長く残せる

   • 写真・動画をデジタルアルバムとして整理して保存
   • いつでも簡単に見返したり、家族や友人と共有できる
   • グループで「共通の思い出コレクション」を育てられる

3. 場を盛り上げるエンタメ要素

   • ゲームやエフェクトでオンラインのお祝いを楽しく演出
   • ビデオメッセージで、その瞬間の気持ちをしっかり残せる
   • 見た目も動きもある UI で「特別感」を出せる

4. 実用性の高い機能

   • 自動カウントダウンで重要な日を事前に把握
   • ワンクリックで SNS へシェアできる導線
   • シンプルな UI で、IT に詳しくない人でも扱いやすい

5. 小さなコミュニティのハブとして使える

   • チーム・サークル・クラスなどの「共通の場」として運用可能
   • メッセージやギフト機能で、前向きなコミュニケーションを促進
   • オープンソースなので、コミュニティに合わせて自由に拡張できる

使用技術スタック

フロントエンド

バックエンド

開発ツール

はじめ方（ローカル環境）

前提条件

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

1. ソースコード取得

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

2. 依存パッケージのインストール

npm install
# または
yarn install

3. 環境変数の設定

cp .env.example .env.local

.env.local を編集します:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here

4. データベースのセットアップ

必要なテーブルやポリシーの詳細は DATABASE.md を参照してください。主なテーブル:

• birthdays - 誕生日情報
• custom_messages - メッセージ
• media_files - メディアファイル
• virtual_gifts - バーチャルギフト
• audio_messages - ボイスメッセージ
• video_messages - ビデオメッセージ
• bulletin_posts - 掲示板投稿
• bulletin_replies - 掲示板返信

5. 開発サーバーの起動

npm run dev
# または
yarn dev

ブラウザで http://localhost:3000 を開きます。

6. デプロイ

Vercel へのデプロイ（推奨）

手動デプロイの流れ:

1. プロジェクトを Vercel にインポート
2. Environment Variables を設定:
   • NEXT_PUBLIC_SUPABASE_URL: Supabase プロジェクト URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabase anonymous key
3. そのまま Vercel 側でビルド & デプロイが実行されます

環境変数とセキュリティ

必要な環境変数

セキュリティ上の注意

• ✅ 安全: Anonymous key はフロントエンドから利用する前提の公開キー
• ✅ 安全: URL 自体は公開情報
• ❌ 危険: Service role key やパスワード類は絶対に公開しない
• ✅ RLS: Supabase 側で Row Level Security を有効化しておく

プロジェクト構成 💻

詳細な構成図は STRUCTURE.md を参照してください。ここでは概要だけ記載します。

happy-birthday-website/
├── app/                      # Next.js App Router
│   ├── api/                  # API Routes
│   │   ├── birthdays/        # 誕生日 API
│   │   ├── messages/         # メッセージ API
│   │   ├── media/            # メディア API
│   │   ├── gifts/            # ギフト API
│   │   ├── audio/            # 音声メッセージ API
│   │   ├── video/            # ビデオメッセージ API
│   │   └── upload/           # アップロード API
│   ├── layout.tsx            # ルートレイアウト
│   ├── page.tsx              # トップページ
│   └── globals.css           # グローバル CSS
├── components/
│   ├── ui/                   # UI コンポーネント
│   ├── features/             # 誕生日向け機能コンポーネント
│   ├── community/            # コミュニティ機能
│   ├── games/                # ゲーム
│   ├── effects/              # ビジュアルエフェクト
│   └── layout/               # レイアウト
├── lib/
│   ├── hooks/                # カスタム Hooks
│   ├── stores/               # Zustand ストア
│   ├── supabase/             # Supabase クライアント
│   ├── providers/            # React プロバイダー
│   └── i18n/                 # 多言語対応
├── config/                   # テーマ・音楽などの設定
├── types/                    # TypeScript 型定義
├── __tests__/                # テストコード
├── public/                   # 静的ファイル（動画・音声など）
└── package.json              # 依存関係とスクリプト

npm スクリプト

対応ブラウザ

• Google Chrome（推奨）
• Mozilla Firefox
• Apple Safari
• Microsoft Edge

ドキュメント

コントリビュートについて

このプロジェクトへのコントリビュートは大歓迎です。以下の流れを参考にしてください。

1. Fork & Clone

   • リポジトリを Fork し、ローカルに clone します。

2. ブランチを作成

   git checkout -b feature/your-feature-name

3. 実装・修正

   • 機能追加・バグ修正などを実施
   • TypeScript の型安全性を保つ
   • 可能であればテストも追加

4. Commit & Push

   • 変更を commit し、自分のリポジトリへ push
   • 内容を説明した Pull Request を作成

💡 メモ: Issue の作成、アイデア共有、Pull Request など、どんな形の参加も歓迎です。一緒に「誕生日をもっと楽しくするツール」を育てていきましょう。

ライセンス

このプロジェクトは MIT ライセンス のもとで公開されています。商用・個人利用、改変・再配布など、自由にお使いいただけます（ライセンス条項に従う範囲で）。

特別な誕生日と、大切な人との時間のために。日本からも、世界からも、心を込めて。🎂🎉