Next.jsとDiscordでイベント監視を行う、すぐに使えるSaaSテンプレート
新しいサイドプロジェクトやサブスクリプションサービスを立ち上げる際、同じようなルーティンに遭遇することが多いです。独自のビジネスロジックに取り組む代わりに、認証の設定、請求システムの連携、標準的なダッシュボードの構築、重要なアラートの送信先の決定に時間を費やします。最初のリリースを迎える頃には、情熱の半分以上がボイラープレートに消耗してしまいます。
YouTubeチャンネルJosh Tried Codingの運営者は、PingPandaというオープンソースリポジトリを公開しました。Discordチャンネルに直接リアルタイム通知を送信するイベント追跡サービスの、完全なフルスタックプロジェクトです。コードはそのまま使用できる製品として、あるいはモダンなテクノロジースタックを使用した独自のSaaSアプリケーション構築の詳細な学習テンプレートとして活用できます。
プロジェクトの中身
PingPandaはシンプルな問題を解決します：アプリケーション内のイベント（登録、支払い、エラーなど）を追跡し、構造化された通知カードをDiscordに送信します。
DatadogやSentryのようなサードパーティの監視ツールとの重い統合を設定する代わりに、著者はよりシンプルな方法を取りました。イベントカテゴリを作成し、APIキーを生成した後、POSTリクエストをPingPandaエンドポイントに送信します。メッセージは適切なパラメータ、バッジ、フォーマットと共にチームのDiscordチャンネルにすぐに届きます。
プロジェクトスタックはクリーンです：
- App Routerと厳格なTypeScriptタイピングを使用したNext.jsフレームワーク。
- Clerkサービスによる認証。
- ユーザー、イベント、カテゴリを保存するPostgreSQLデータベース。
- shadcn-uiコンポーネントを使用したTailwind CSSスタイリング。
- Stripeによる収益化とサブスクリプション。
監視とアラート配信の仕組み
サービスの主な売り手は統合のシンプルさです。ダッシュボードで監視カテゴリを作成します（例：user-signupまたはcheckout-completed）。各カテゴリに対して、Discordウェブフックと視覚的な表示パラメータを設定できます。
イベントの送信はシンプルなHTTPリクエストで完了します：
await fetch("https://your-pingpanda-domain.com/api/v1/events", {
method: "POST",
headers: {
Authorization: `Bearer ${API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
category: "sale",
fields: {
amount: "$49.00",
plan: "Pro Annual",
user: "[email protected]",
},
}),
})
バックエンドはリクエストを検証し、PostgreSQLにレコードを保存し、プランの制限を確認し、Discordウェブフックをトリガーします。チャットにはフィールドがハイライトされた整ったメッセージが表示されます。小規模なチーム場合やソロでプロジェクトを進めている場合、このアプローチは手動のデータベースチェックや複雑なメール通知の設定に代わるものです。
支払いと料金プラン
リポジトリにはすでに有料サブスクリプションのロジックが含まれています。無料ティアは1ヶ月あたりのイベント数に制限があります。制限に達すると、サービスはアラートの送信を停止し、Proへのアップグレードを促します。
Stripeの統合は標準的なフローをたどります：
- ユーザーはダッシュボード内のProへのアップグレードボタンをクリックします。
- Next.jsがStripe Checkoutセッションを生成し、 клиентаを支払いページにリダイレクトします。
- Stripeは正常な支払いに関するウェブフックをアプリケーションに送信します。
- サーバーはデータベース内のサブスクリプションステータスを更新し、制限を解除します。
このフローをゼロから書いたり、支払いウェブフックレポートの適切な処理方法を理解したりする必要はありません。コードはオープンで、 хорошо構造化されており、Stripe CLIによるローカルテストの準備ができています。
アーキテクチャとインターフェース
プロジェクトの素晴らしい詳細の一つはデザインです。クリーンなレイアウト、イラスト、料金セクションを含むランディングページがあります。ダッシュボードインターフェースはshadcn-uiに基づいて構築されているため、Tailwind設定の 数行を変更するだけでブランドに合わせてコンポーネントをカスタマイズできます。
コードベースはApp Router標準に従って整理されています：
app/フォルダにはサーバーとクライアントページ、APIルート、ウェブフックハンドラーが含まれます。components/フォルダには分離されたUI要素とダッシュボードブロックが保存されます。- データベースクエリは分離され、受信パラメータのバリデーションはZodに依存しています。
Clerkにより、ソーシャルネットワークまたはワンタイムコードによるログインがセッションやパスワードストレージなしで即座に機能します。
プロジェクトをローカルで実行する方法
Node.jsと、Clerk、Stripe、データベースサービス（例：NeonまたはローカルPostgresインスタンス）のアカウントが必要です。
リポジトリをクローンします：
git clone https://github.com/joschan21/pingpanda.git
cd pingpanda
npm install
環境変数ファイルをコピーします：
cp .env.example .env
.envでは、Clerk、データベース接続情報DATABASE_URL、Stripeシークレット、ウェブフックのキーを追加する必要があります。設定を入力した後、データベーススキーマを適用し、開発サーバーを起動します：
npm run dev
アプリケーションはhttp://localhost:3000で起動します。
リポジトリに不足しているもの
プロジェクトのREADMEは非常に簡潔です。詳細なステップバイステップのデプロイメントガイドやすべての環境変数の説明がないため、ソースコード内の設定を直接研究する必要があります。
高トラフィックで本番環境にデプロイすることを計画している場合、メッセージキュー（Redis/BullMQ）なしの直接的な同期ウェブフックのDiscordへの転送は、毎分数万件のリクエストでレート制限に達する可能性があります。サイドプロジェクトや小規模なサービスには現在の実装で十分ですが、本格的なエンタープライズ使用にはキューアーキテクチャの強化が必要です。
このプロジェクトの対象者
PingPandaは2つのシナリオに最適です。
まず、Next.jsでモダンな商用Webアプリケーションがどのように動作するかを学びたい開発者です。App Routerでの作業、サーバーとクライアントコンポーネントの安全な分離、ClerkとStripeの統合など、実用的なテクニックをここで習得できます。
次に、イン디ハッカーとマイクロSaaS創業者です。このプロジェクトは数十時間の作業を節約します。リポジトリをフォークし、DiscordエンドポイントをTelegramやメールに置き換え、テーマの色を変更することで、独自の監視サービスや通知サービスの готовую основуを取得できます。コードはMITライセンスで配布されているため、商用利用に制限はありません。
関連プロジェクト