Gotowy do użycia szablon SaaS do monitorowania zdarzeń z Next.js i Discord

Przy uruchamianiu nowego projektu pobocznego lub usługi subskrypcyjnej często natrafiasz na tę samą rutynę. Zamiast pracować nad unikalną logiką biznesową, poświęcasz czas na konfigurowanie autoryzacji, podłączanie billing, budowanie standardowego dashboardu i zastanawianie się, gdzie wysyłać krytyczne alerty. Kiedy docierasz do pierwszego wydania, połowa Twojego entuzjazmu została już zużyta na boilerplate.

Autor kanału YouTube Josh Tried Coding udostępnił repozytorium open-source o nazwie PingPanda. To kompletny projekt full-stack do śledzenia zdarzeń w czasie rzeczywistym z natychmiastowymi powiadomieniami bezpośrednio na kanałach Discord. Możesz wykorzystać kod jako gotowy produkt lub szczegółowy szablon do nauki budowania własnych aplikacji SaaS z nowoczesnym stackiem technologicznym.

Co zawiera projekt

PingPanda rozwiązuje prosty problem: śledzenie zdarzeń w aplikacjach (rejestracje, płatności, błędy) i wysyłanie ustrukturyzowanych kart powiadomień na Discord.

Zamiast konfigurować ciężkie integracje z zewnętrznymi narzędziami do monitorowania takimi jak Datadog czy Sentry, autor wybrał prostszą drogę. Tworzysz kategorię zdarzeń, generujesz klucz API, a następnie usługa wysyła żądanie POST do endpointu PingPanda. Wiadomość natychmiast pojawia się na kanale Discord Twojego zespołu z odpowiednimi parametrami, badge'ami i formatowaniem.

Stack projektu wygląda przejrzyście:

• Framework Next.js z App Router i ścisłym typowaniem TypeScript.
• Autoryzacja przez usługę Clerk.
• Baza danych PostgreSQL do przechowywania użytkowników, zdarzeń i kategorii.
• Stylowanie Tailwind CSS z komponentami shadcn-ui.
• Monetyzacja i subskrypcje przez Stripe.

Jak działają monitorowanie i dostarczanie alertów

Główną zaletą usługi jest prostota integracji. W dashboardzie użytkownik tworzy kategorie monitoringu, na przykład user-signup lub checkout-completed. Dla każdej kategorii można skonfigurować webhook Discord oraz parametry wyświetlania wizualnego.

Wysłanie zdarzenia sprowadza się do prostego żądania 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]",
    },
  }),
})

Backend waliduje żądanie, zapisuje rekord do PostgreSQL, sprawdza limity planu i wyzwala webhook Discord. Czytelna wiadomość z podświetlonymi polami pojawia się na czacie. Jeśli masz mały zespół lub pracujesz solo nad projektem, to podejście zastępuje ręczne sprawdzanie bazy danych lub konfigurowanie skomplikowanych powiadomień email.

Płatności i plany cenowe

W repozytorium znajduje się już logika płatnych subskrypcji. Plan darmowy jest ograniczony do określonej liczby zdarzeń miesięcznie. Po osiągnięciu limitu usługa przestaje wysyłać alerty i wyświetla monit o uaktualnienie do wersji Pro.

Integracja ze Stripe opiera się na standardowym przepływie:

1. Użytkownik klika przycisk uaktualnienia do Pro w dashboardzie.
2. Next.js generuje sesję Stripe Checkout i przekierowuje klienta na stronę płatności.
3. Stripe wysyła webhook o udanej płatności z powrotem do aplikacji.
4. Serwer aktualizuje status subskrypcji w bazie danych i usuwa ograniczenia.

Nie musisz pisać tego przepływu od zera ani zastanawiać się, jak poprawnie obsługiwać raporty webhooków płatności. Kod jest otwarty, dobrze ustrukturyzowany i gotowy do lokalnego testowania przez Stripe CLI.

Architektura i interfejs

Ciekawym szczegółem projektu jest jego design. Istnieje landing page z przejrzystym układem, ilustracjami i sekcją cenową. Interfejs dashboardu bazuje na shadcn-ui, więc komponenty można łatwo dostosować do własnej marki, zmieniając kilka linijek w konfiguracji Tailwinda.

Kod projektu jest zorganizowany zgodnie ze standardami App Router:

• Folder app/ zawiera strony serwera i klienta, trasy API oraz handlery webhooków.
• Folder components/ przechowuje odizolowane elementy interfejsu i bloki dashboardu.
• Kwerendy do bazy danych są odizolowane, a walidacja przychodzących parametrów opiera się na Zod.

Dzięki Clerk logowanie działa natychmiast przez sieci społecznościowe lub kody jednorazowe, bez konieczności zarządzania sesjami i przechowywania haseł.

Jak uruchomić projekt lokalnie

Będziesz potrzebować Node.js oraz kont w Clerk, Stripe i usłudze bazodanowej (na przykład Neon lub lokalna instancja Postgres).

Sklonuj repozytorium:

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

Skopiuj plik zmiennych środowiskowych:

cp .env.example .env

W .env musisz dodać klucze dla Clerk, połączenia z bazą danych DATABASE_URL, sekretów Stripe i webhooków. Po wypełnieniu konfiguracji zastosuj schemat bazy danych i uruchom serwer deweloperski:

npm run dev

Aplikacja uruchomi się pod adresem http://localhost:3000.

Czego brakuje w repozytorium

Plik README projektu jest dość minimalistyczny. Brak szczegółowego przewodnika wdrożeniowego krok po kroku lub opisu wszystkich zmiennych środowiskowych, więc będziesz musiał przeanalizować niektóre konfiguracje bezpośrednio w kodzie źródłowym.

Jeśli planujesz wdrożenie do produkcji z dużym ruchem, weź pod uwagę: bezpośrednie synchroniczne przekazywanie webhooków do Discorda bez kolejki wiadomości (Redis/BullMQ) może napotkać limity zapytań przy dziesiątkach tysięcy żądań na minutę. Dla projektów pobocznych i małych usług obecna implementacja jest wystarczająca, ale do poważnego zastosowania enterprise będziesz musiał wzmocnić architekturę kolejki.

Dla kogo jest ten projekt

PingPanda sprawdza się idealnie w dwóch scenariuszach.

Pierwszy to deweloperzy chcący zrozumieć, jak działa nowoczesna komercyjna aplikacja webowa z Next.js. Tutaj możesz nauczyć się praktycznych technik pracy z App Router, bezpiecznego rozdzielania Server i Client Components oraz integracji z Clerk i Stripe.

Drugi to indie hackerzy i twórcy micro-SaaS. Projekt oszczędza dziesiątki godzin pracy. Możesz forknąć repozytorium, zamienić endpoint Discord na Telegram lub email, zmienić kolorystykę motywu i otrzymać gotowy szkielet dla własnej usługi monitorowania lub powiadomień. Kod jest rozpowszechniany na licencji MIT, więc nie ma ograniczeń co do użycia komercyjnego.