Modèle SaaS prêt à l'emploi pour la surveillance d'événements avec Next.js et Discord

Lorsqu'on lance un nouveau projet secondaire ou un service par abonnement, on tombe souvent sur la même routine. Au lieu de travailler sur une logique métier unique, vous passez du temps à configurer l'authentification, à raccorder la facturation, à construire un tableau de bord standard et à déterminer où envoyer les alertes critiques. Quand vous arrivez à la première version, la moitié de votre enthousiasme a été consumée par le code répétitif.

L'auteur de la chaîne YouTube Josh Tried Coding a publié un dépôt open-source appelé PingPanda. C'est un projet full-stack complet pour un service de suivi d'événements en temps réel avec des notifications instantanées directement dans les canaux Discord. Vous pouvez utiliser le code comme produit prêt à l'emploi ou comme modèle d'apprentissage détaillé pour construire vos propres applications SaaS avec une pile technique moderne.

Ce que contient le projet

PingPanda résout un problème simple : suivre les événements dans vos applications (inscriptions, paiements, erreurs) et envoyer des cartes de notification structurées sur Discord.

Au lieu de configurer des intégrations lourdes avec des outils de surveillance tiers comme Datadog ou Sentry, l'auteur a choisi une approche plus simple. Vous créez une catégorie d'événements, générez une clé API, puis le service envoie une requête POST vers le point de terminaison PingPanda. Le message arrive immédiatement dans le canal Discord de votre équipe avec les bons paramètres, badges et formatage.

La pile du projet est propre :

• Framework Next.js avec App Router et typage TypeScript strict.
• Authentification via le service Clerk.
• Base de données PostgreSQL pour stocker les utilisateurs, les événements et les catégories.
• Stylisation avec Tailwind CSS et composants shadcn-ui.
• Monétisation et abonnements via Stripe.

Fonctionnement de la surveillance et de la livraison des alertes

Le principal argument de vente du service est sa simplicité d'intégration. Dans le tableau de bord, l'utilisateur crée des catégories de surveillance, par exemple user-signup ou checkout-completed. Pour chaque catégorie, vous pouvez configurer un webhook Discord et les paramètres d'affichage visuel.

L'envoi d'un événement se résume à une simple requête 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]",
    },
  }),
})

Le backend valide la requête, enregistre dans PostgreSQL, vérifie les limites du plan et déclenche le webhook Discord. Un message soigné avec mise en évidence des champs apparaît dans le chat. Si vous avez une petite équipe ou travaillez en solo sur un projet, cette approche remplace les vérifications manuelles de base de données ou la configuration de notifications par e-mail complexes.

Paiements et formules tarifaires

Le dépôt inclut déjà la logique d'abonnement payant. Le niveau gratuit est limité à un certain nombre d'événements par mois. Lorsque la limite est atteinte, le service cesse d'envoyer des alertes et invite à passer à Pro.

L'intégration Stripe suit un flux standard :

1. L'utilisateur clique sur le bouton de mise à niveau vers Pro dans le tableau de bord.
2. Next.js génère une session Stripe Checkout et redirige le client vers la page de paiement.
3. Stripe envoie un webhook concernant un paiement réussi à l'application.
4. Le serveur met à jour le statut de l'abonnement dans la base de données et supprime les limites.

Vous n'avez pas besoin d'écrire ce flux de zéro ni de comprendre comment gérer correctement les rapports de webhooks de paiement. Le code est ouvert, bien structuré et prêt pour des tests locaux via Stripe CLI.

Architecture et interface

Un détail agréable du projet est le design. Il y a une page d'atterrissage avec une mise en page épurée, des illustrations et une section tarifs. L'interface du tableau de bord est construite sur shadcn-ui, donc les composants sont faciles à personnaliser pour votre marque en modifiant quelques lignes dans la configuration Tailwind.

La base de code est organisée selon les normes d'App Router :

• Le dossier app/ contient les pages serveur et client, les routes API et les gestionnaires de webhooks.
• Le dossier components/ stocke les éléments UI isolés et les blocs du tableau de bord.
• Les requêtes à la base de données sont isolées et la validation des paramètres entrants repose sur Zod.

Grâce à Clerk, la connexion fonctionne immédiatement via les réseaux sociaux ou les codes à usage unique, sans avoir à gérer les sessions et le stockage des mots de passe.

Comment exécuter le projet en local

Vous aurez besoin de Node.js et de comptes Clerk, Stripe, ainsi que d'un service de base de données (par exemple, Neon ou une instance Postgres locale).

Clonez le dépôt :

git clone https://github.com/joschan21/pingpanda.git
cd pingpanda
npm install

Copiez le fichier des variables d'environnement :

cp .env.example .env

Dans .env, vous devez ajouter les clés pour Clerk, la connexion à la base de données DATABASE_URL, les secrets Stripe et les webhooks. Après avoir rempli la configuration, appliquez le schéma de la base de données et lancez le serveur de développement :

npm run dev

L'application se lancera à http://localhost:3000.

Ce qui manque dans le dépôt

Le README du projet est assez minimal. Il n'y a pas de guide de déploiement détaillé pas à pas ni de description de toutes les variables d'environnement, vous devrez donc étudier certaines configurations directement dans le code source.

Si vous prévoyez de déployer en production avec un trafic élevé, gardez à l'esprit : la transmission directe et synchrone des webhooks vers Discord sans file d'attente de messages (Redis/BullMQ) peut atteindre les limites de débit avec des dizaines de milliers de requêtes par minute. Pour les projets secondaires et les petits services, l'implémentation actuelle est plus que suffisante, mais pour une utilisation professionnelle sérieuse, vous devrez améliorer l'architecture de la file d'attente.

À qui ce projet est destiné

PingPanda est particulièrement adapté dans deux scénarios.

Premièrement, les développeurs qui veulent apprendre comment fonctionne une application web commerciale moderne avec Next.js. Vous pouvez y apprendre des techniques pratiques pour travailler avec App Router, la séparation sécurisée des Server et Client Components, et l'intégration de Clerk et Stripe.

Deuxièmement, les indie hackers et les créateurs de micro-SaaS. Le projet fait gagner des dizaines d'heures de travail. Vous pouvez forker le dépôt, remplacer le point de terminaison Discord par Telegram ou e-mail, changer les couleurs du thème et obtenir un squelette prêt à l'emploi pour votre propre service de surveillance ou de notification. Le code est distribué sous licence MIT, il n'y a donc aucune restriction sur l'utilisation commerciale.