boiler.plate

Note: This documentation uses Next.js App Router. If you're still on Pages Router, see the migration guide.

Back to Examples

Notification SaaS

Create a SaaS application with in-app notifications, transactional emails, and user settings management.

Steps in the UI

  1. Start with "Supabase + Stripe SaaS" Quick Start
  2. Add the "Notifications" module for in-app notifications
  3. Add the "Emails" module for transactional emails
  4. Add the "User Settings" module for profile management
  5. Configure Resend/Postmark for email delivery

Modules included: notifications, emails, user-settings, auth-supabase, stripe-core

Routes générées

  • /dashboard- Tableau de bord avec notifications
  • /notifications- Centre de notifications
  • /notifications/[notificationId]- Détail d'une notification
  • /settings- Paramètres utilisateur
  • /settings/profile- Profil utilisateur
  • /settings/notifications- Préférences de notifications
  • /settings/email- Préférences d'email
  • /emails/preview- Prévisualisation des emails (dev)
  • /api/notifications/route.ts- API des notifications
  • /api/notifications/[notificationId]/route.ts- API d'une notification
  • /api/notifications/mark-read/route.ts- Marquer comme lu
  • /api/settings/profile/route.ts- API du profil
  • /api/settings/notifications/route.ts- API des préférences
  • /api/email/send/route.ts- API d'envoi d'email
  • /api/email/preview/route.ts- API de prévisualisation
  • /api/webhooks/resend/route.ts- Webhook Resend
  • /api/webhooks/postmark/route.ts- Webhook Postmark

.env minimal

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/notification-saas"

# NextAuth
NEXTAUTH_SECRET="your-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"

# Supabase
NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-key"
SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"

# Stripe
STRIPE_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# Email
EMAIL_PROVIDER="resend"
EMAIL_FROM="noreply@yourdomain.com"
RESEND_API_KEY="re_..."
POSTMARK_TOKEN="your-postmark-token"
POSTMARK_MESSAGE_STREAM="outbound"

# Notifications
NOTIFICATION_POLLING_INTERVAL="30000"
MAX_NOTIFICATIONS_PER_USER="100"

Smoke test

curl -I http://localhost:3000

Expected: HTTP/1.1 200 OK

curl -I http://localhost:3000/notifications

Expected: HTTP/1.1 302 Found (redirection) ou 200 OK (si authentifié)

curl -X GET "http://localhost:3000/api/notifications" \
  -H "Content-Type: application/json"

Expected: HTTP/1.1 401 Unauthorized (sans token) ou 200 OK (avec token)

curl -X POST "http://localhost:3000/api/email/send" \
  -H "Content-Type: application/json" \
  -d '{"to":"test@example.com","template":"welcome","data":{"name":"Test"}}'

Expected: HTTP/1.1 401 Unauthorized (sans token) ou 200 OK (avec token)

curl -I http://localhost:3000/emails/preview

Expected: HTTP/1.1 200 OK

curl -X POST "https://api.resend.com/emails" \
  -H "Authorization: Bearer re_..." \
  -H "Content-Type: application/json" \
  -d '{"from":"noreply@yourdomain.com","to":"test@example.com","subject":"Test","html":"<p>Test</p>"}'

Expected: HTTP/1.1 200 OK

curl -X GET "http://localhost:3000/api/settings/profile" \
  -H "Content-Type: application/json"

Expected: HTTP/1.1 401 Unauthorized (sans token) ou 200 OK (avec token)

Actions déclenchées

Notifications in-app

Quand : Nouvelle notification créée (système, admin, événement)

Voir le résultat :
  • •Notification apparaît dans `/notifications`
  • •Badge de notification dans le header
  • •Base de données : table `notifications`
  • •WebSocket push (si configuré)

Emails transactionnels

Quand : Inscription, réinitialisation de mot de passe, facture, etc.

Voir le résultat :
  • •Email envoyé via Resend/Postmark
  • •Dashboard email provider > Logs
  • •Base de données : table `email_logs`
  • •Prévisualisation dans `/emails/preview` (dev)

Webhooks email

Quand : Email livré, ouvert, cliqué, rebond

Voir le résultat :
  • •Logs dans la console de développement
  • •Base de données : table `email_events`
  • •Dashboard Resend/Postmark > Webhooks

Mise à jour de profil

Quand : Utilisateur modifie ses informations

Voir le résultat :
  • •Base de données : table `users` mise à jour
  • •Session NextAuth mise à jour
  • •Notification de confirmation

Préférences de notifications

Quand : Utilisateur change ses préférences

Voir le résultat :
  • •Base de données : table `user_preferences`
  • •Application immédiate des nouvelles préférences
  • •Notification de confirmation

Need help?

If you need assistance with this example or have questions about boiler.plate modules, check out our documentation.

Module ReferenceGetting StartedTroubleshooting