Ready-to-Use SaaS Template for Event Monitoring with Next.js and Discord

When launching a new side project or subscription service, you often hit the same routine. Instead of working on unique business logic, you spend time setting up authentication, hooking up billing, building a standard dashboard, and figuring out where to send critical alerts. By the time you reach the first release, half your enthusiasm has been spent on the boilerplate.

The author of the YouTube channel Josh Tried Coding has released an open-source repository called PingPanda. It's a complete full-stack project for a real-time event tracking service with instant notifications directly to Discord channels. You can use the code as a ready-made product or as a detailed learning template for building your own SaaS applications with a modern tech stack.

What's Inside the Project

PingPanda solves a straightforward problem: track events within your applications (registrations, payments, errors) and send structured notification cards to Discord.

Instead of setting up heavy integrations with third-party monitoring tools like Datadog or Sentry, the author took a simpler route. You create an event category, generate an API key, and then the service sends a POST request to the PingPanda endpoint. The message immediately lands in your team's Discord channel with the right parameters, badges, and formatting.

The project stack looks clean:

• Next.js framework with App Router and strict TypeScript typing.
• Authentication via Clerk service.
• PostgreSQL database for storing users, events, and categories.
• Tailwind CSS styling with shadcn-ui components.
• Monetization and subscriptions via Stripe.

How Monitoring and Alert Delivery Work

The main selling point of the service is its integration simplicity. In the dashboard, the user creates monitoring categories, for example, user-signup or checkout-completed. For each category, you can configure a Discord webhook and visual display parameters.

Sending an event comes down to a simple HTTP request:

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]",
    },
  }),
})

The backend validates the request, saves the record to PostgreSQL, checks plan limits, and triggers the Discord webhook. A neat message with field highlighting appears in the chat. If you have a small team or are working on a project solo, this approach replaces manual database checks or setting up complex email notifications.

Payments and Pricing Plans

The repository already includes paid subscription logic. The free tier is limited to a certain number of events per month. When the limit is reached, the service stops sending alerts and prompts an upgrade to Pro.

The Stripe integration follows a standard flow:

1. The user clicks the upgrade to Pro button in the dashboard.
2. Next.js generates a Stripe Checkout session and redirects the client to the payment page.
3. Stripe sends a webhook about a successful payment back to the application.
4. The server updates the subscription status in the database and removes the limits.

You don't need to write this flow from scratch or figure out how to properly handle payment webhook reports. The code is open, well-structured, and ready for local testing via Stripe CLI.

Architecture and Interface

A nice detail of the project is the design. There's a landing page with clean layout, illustrations, and a pricing section. The dashboard interface is built on shadcn-ui, so components are easy to customize for your brand by changing a few lines in the Tailwind config.

The codebase is organized following App Router standards:

• The app/ folder contains server and client pages, API routes, and webhook handlers.
• The components/ folder stores isolated UI elements and dashboard blocks.
• Database queries are isolated, and incoming parameter validation relies on Zod.

Thanks to Clerk, login works immediately via social networks or one-time codes, without dealing with sessions and password storage.

How to Run the Project Locally

You'll need Node.js and accounts with Clerk, Stripe, and a database service (for example, Neon or a local Postgres instance).

Clone the repository:

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

Copy the environment variables file:

cp .env.example .env

In .env, you need to add keys for Clerk, database connection DATABASE_URL, Stripe secrets, and webhooks. After filling in the config, apply the database schema and start the development server:

npm run dev

The application will launch at http://localhost:3000.

What's Missing in the Repository

The project's README is quite minimal. There's no detailed step-by-step deployment guide or description of all environment variables, so you'll need to study some of the configs directly in the source code.

If you're planning to deploy to production with high traffic, keep in mind: direct synchronous webhook forwarding to Discord without a message queue (Redis/BullMQ) may hit rate limits with tens of thousands of requests per minute. For side projects and small services, the current implementation is more than enough, but for serious enterprise use, you'll need to enhance the queue architecture.

Who This Project Is For

PingPanda is a great fit in two scenarios.

First, developers who want to learn how a modern commercial web application works with Next.js. Here you can pick up practical techniques for working with App Router, secure separation of Server and Client Components, and integrating Clerk and Stripe.

Second, indie hackers and micro-SaaS creators. The project saves dozens of hours of work. You can fork the repository, replace the Discord endpoint with Telegram or email, recolor the theme, and get a ready-made skeleton for your own monitoring or notification service. The code is distributed under the MIT license, so there are no restrictions on commercial use.