Plantilla SaaS lista para usar para monitoreo de eventos con Next.js y Discord
Cuando lanzas un nuevo proyecto paralelo o servicio de suscripción, a menudo te encuentras con la misma rutina. En lugar de trabajar en lógica de negocio única, dedicas tiempo a configurar autenticación, conectar facturación, construir un panel de control estándar y decidir dónde enviar alertas críticas. Para cuando llegas al primer lanzamiento, la mitad de tu entusiasmo se ha gastado en el código repetitivo.
El autor del canal de YouTube Josh Tried Coding ha publicado un repositorio de código abierto llamado PingPanda. Es un proyecto full-stack completo para un servicio de seguimiento de eventos en tiempo real con notificaciones instantáneas directamente a canales de Discord. Puedes usar el código como un producto listo para usar o como una plantilla de aprendizaje detallada para construir tus propias aplicaciones SaaS con un stack tecnológico moderno.
Qué hay dentro del proyecto
PingPanda resuelve un problema directo: rastrear eventos dentro de tus aplicaciones (registros, pagos, errores) y enviar tarjetas de notificación estructuradas a Discord.
En lugar de configurar integraciones pesadas con herramientas de monitoreo de terceros como Datadog o Sentry, el autor tomó un camino más simple. Creas una categoría de evento, generas una clave API, y luego el servicio envía una solicitud POST al endpoint de PingPanda. El mensaje llega inmediatamente al canal de Discord de tu equipo con los parámetros correctos, badges y formato.
El stack del proyecto se ve limpio:
- Framework Next.js con App Router y tipado estricto con TypeScript.
- Autenticación mediante el servicio Clerk.
- Base de datos PostgreSQL para almacenar usuarios, eventos y categorías.
- Estilos con Tailwind CSS y componentes de shadcn-ui.
- Monetización y suscripciones mediante Stripe.
Cómo funcionan el monitoreo y el envío de alertas
El principal punto fuerte del servicio es su simplicidad de integración. En el panel de control, el usuario crea categorías de monitoreo, por ejemplo, user-signup o checkout-completed. Para cada categoría, puedes configurar un webhook de Discord y parámetros de visualización.
Enviar un evento se reduce a una simple solicitud 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]",
},
}),
})
El backend valida la solicitud, guarda el registro en PostgreSQL, verifica los límites del plan y activa el webhook de Discord. Un mensaje limpio con resaltado de campos aparece en el chat. Si tienes un equipo pequeño o estás trabajando solo en un proyecto, este enfoque reemplaza las consultas manuales a la base de datos o la configuración de notificaciones complejas por correo electrónico.
Pagos y planes de precios
El repositorio ya incluye lógica de suscripción de pago. El nivel gratuito está limitado a cierta cantidad de eventos por mes. Cuando se alcanza el límite, el servicio deja de enviar alertas y solicita actualizar a Pro.
La integración con Stripe sigue un flujo estándar:
- El usuario hace clic en el botón de actualizar a Pro en el panel de control.
- Next.js genera una sesión de Stripe Checkout y redirige al cliente a la página de pago.
- Stripe envía un webhook sobre un pago exitoso de vuelta a la aplicación.
- El servidor actualiza el estado de la suscripción en la base de datos y elimina los límites.
No necesitas escribir este flujo desde cero ni figuring out how to properly handle payment webhook reports. El código es abierto, está bien estructurado y listo para pruebas locales mediante Stripe CLI.
Arquitectura e interfaz
Un detalle agradable del proyecto es el diseño. Hay una página de inicio con un diseño limpio, ilustraciones y una sección de precios. La interfaz del panel de control está construida sobre shadcn-ui, por lo que los componentes son fáciles de personalizar para tu marca cambiando solo unas líneas en la configuración de Tailwind.
La base de código está organizada siguiendo los estándares de App Router:
- La carpeta
app/contiene páginas de servidor y cliente, rutas API y manejadores de webhooks. - La carpeta
components/almacena elementos UI aislados y bloques del panel de control. - Las consultas a la base de datos están aisladas y la validación de parámetros entrantes se basa en Zod.
Gracias a Clerk, el inicio de sesión funciona inmediatamente a través de redes sociales o códigos de un solo uso, sin tratar con sesiones ni almacenamiento de contraseñas.
Cómo ejecutar el proyecto localmente
Necesitarás Node.js y cuentas con Clerk, Stripe, y un servicio de base de datos (por ejemplo, Neon o una instancia local de Postgres).
Clona el repositorio:
git clone https://github.com/joschan21/pingpanda.git
cd pingpanda
npm install
Copia el archivo de variables de entorno:
cp .env.example .env
En .env, necesitas agregar las claves para Clerk, la conexión a la base de datos DATABASE_URL, los secretos de Stripe y los webhooks. Después de completar la configuración, aplica el esquema de la base de datos e inicia el servidor de desarrollo:
npm run dev
La aplicación se ejecutará en http://localhost:3000.
Qué falta en el repositorio
El README del proyecto es bastante minimalista. No hay una guía detallada paso a paso de despliegue ni una descripción de todas las variables de entorno, así que necesitarás estudiar algunas de las configuraciones directamente en el código fuente.
Si planeas desplegar en producción con alto tráfico, ten en cuenta: el reenvío directo y síncrono de webhooks a Discord sin una cola de mensajes (Redis/BullMQ) puede alcanzar los límites de tasa con decenas de miles de solicitudes por minuto. Para proyectos paralelos y servicios pequeños, la implementación actual es más que suficiente, pero para uso empresarial serio, necesitarás mejorar la arquitectura de colas.
Para quién es este proyecto
PingPanda es ideal en dos escenarios.
Primero, desarrolladores que quieren aprender cómo funciona una aplicación web comercial moderna con Next.js. Aquí puedes aprender técnicas prácticas para trabajar con App Router, separación segura de Server y Client Components, e integración con Clerk y Stripe.
Segundo, indie hackers y creadores de micro-SaaS. El proyecto ahorra docenas de horas de trabajo. Puedes hacer un fork del repositorio, reemplazar el endpoint de Discord con Telegram o correo electrónico, cambiar los colores del tema y obtener un esqueleto listo para tu propio servicio de monitoreo o notificación. El código se distribuye bajo la licencia MIT, por lo que no hay restricciones para uso comercial.
Proyectos relacionados