Готовый шаблон SaaS для мониторинга событий на Next.js и Discord

Когда запускаешь новый пет-проект или сервис по подписке, обычно упираешься в одну и ту же рутину. Вместо работы над уникальной бизнес-логикой сидишь и настраиваешь авторизацию, прикручиваешь биллинг, верстаешь типовой дашборд и думаешь, куда сливать критические алерты. В итоге половина энтузиазма уходит на обвязку еще до первого релиза.

Project Image

Автор YouTube-канала Josh Tried Coding выложил в открытый доступ репозиторий PingPanda. Это законченный фулстек-проект сервиса для отслеживания событий в реальном времени с мгновенными уведомлениями прямо в каналы Discord. Код можно использовать как готовый продукт или как подробный учебный шаблон для сборки собственных SaaS-приложений на современном стеке.

Что внутри проекта

PingPanda решает понятную задачу: отслеживать события внутри пользовательских приложений (регистрации, оплаты, ошибки) и присылать структурированные карточки с уведомлениями в Discord.

Вместо того чтобы городить тяжелые интеграции со сторонними мониторингами вроде Datadog или Sentry, автор выбрал простой путь. Создается категория событий, генерируется API-ключ, после чего сервис шлет POST-запрос на эндпоинт PingPanda. Сообщение сразу падает в Discord-канал команды с нужными параметрами, бейджами и форматированием.

Стек проекта выглядит опрятно:

Фреймворк Next.js с App Router и строгой типизацией на TypeScript.
Аутентификация через сервис Clerk.
База данных PostgreSQL для хранения пользователей, событий и категорий.
Стилизация через Tailwind CSS с компонентами shadcn-ui.
Монетизация и подписки через 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: "alex@example.com",
    },
  }),
})

Бэкенд валидирует запрос, сохраняет запись в PostgreSQL, проверяет лимиты тарифного плана и дергает вебхук Discord. В чате появляется аккуратное сообщение с подсветкой полей. Если у вас небольшая команда или вы ведете проект в одиночку, такой подход заменяет проверку базы данных вручную или настройку сложных почтовых уведомлений.

Платежи и тарифные планы

В репозиторий уже встроена логика платной подписки. Бесплатный тариф ограничен определенным количеством событий в месяц. Когда лимит исчерпан, сервис перестает слать алерты и предлагает обновиться до версии 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 у проекта довольно лаконичный. Там нет подробного пошагового руководства по деплою и описания всех переменных окружения, поэтому часть конфигов придется изучать прямо по исходникам.

Если вы планируете выкатывать проект в продакшен с высокими нагрузками, имейте в виду: прямой синхронный проброс вебхуков в Discord без очереди сообщений (Redis/BullMQ) может упереться в рейт-лимиты при десятках тысяч запросов в минуту. Для пет-проектов и небольших сервисов текущей реализации хватает с головой, но для серьезного энтерпрайза архитектуру очередей придется доработать.

Кому пригодится проект

PingPanda отлично подойдет в двух случаях.

Во-первых, разработчикам, которые хотят изучить устройство современного коммерческого веб-приложения на Next.js. Здесь можно подсмотреть практические приемы работы с App Router, безопасное разделение Server и Client Components, стыковку Clerk и Stripe.

Во-вторых, инди-хакерам и создателям микро-SaaS. Проект экономит десятки часов работы. Можно форкнуть репозиторий, заменить Discord-эндпоинт на Telegram или почту, перекрасить тему и получить готовый скелет для собственного сервиса мониторинга или уведомлений. Код распространяется под лицензией MIT, так что ограничений на коммерческое использование нет.