diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..4646293 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ + +API_URL=https://your-convoy-instance.com/api/v1 diff --git a/README.md b/README.md index 7899870..48a6b9f 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,79 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Convoy Playground -## Getting Started +A free, open-source playground for receiving, testing, and debugging webhook events in real time — powered by [Convoy](https://getconvoy.io), the open-source webhooks gateway. -First, run the development server: +**Live at [playground.getconvoy.io](https://playground.getconvoy.io)** + +## Features + +- **Instant webhook URL** — Get a unique HTTP source URL in one click. Send webhook events to it from any provider or `curl`. +- **Real-time event feed** — Events appear within seconds, grouped by date with status indicators (success, pending, failed). +- **Payload inspection** — Syntax-highlighted headers and JSON body for every event, powered by Prism.js. +- **Delivery attempt tracking** — See delivery metadata including retry counts and attempt status. +- **Shareable sessions** — Each source gets a unique `/in/{id}` URL you can bookmark or share. + +## Quick Start + +### Prerequisites + +- Node.js 18+ +- npm + +### Setup + +```bash +# Clone the repository +git clone https://github.com/frain-dev/convoy-playground.git +cd convoy-playground + +# Install dependencies +npm install + +# Create environment file +cp .env.example .env.local +``` + +### Environment Variables + +| Variable | Description | Required | +|----------|-------------|----------| +| `API_URL` | Base URL for the Convoy API (e.g. `https://api.getconvoy.io/api/v1`) | Yes | + +### Development ```bash npm run dev -# or -yarn dev -# or -pnpm dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +Open [http://localhost:3000](http://localhost:3000) in your browser. + +### Production Build -You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. +```bash +npm run build +npm start +``` -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. +## Tech Stack -## Learn More +- [Next.js](https://nextjs.org/) — React framework (App Router) +- [Tailwind CSS](https://tailwindcss.com/) — Utility-first styling +- [Prism.js](https://prismjs.com/) — Syntax highlighting +- [Sentry](https://sentry.io/) — Error monitoring +- [date-fns](https://date-fns.org/) — Date formatting -To learn more about Next.js, take a look at the following resources: +## How It Works -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +1. On first visit, the playground creates an HTTP source via the Convoy API. +2. You receive a unique URL (e.g. `https://...convoy.io/ingest/abc123`). +3. Send any HTTP request to that URL — POST a JSON payload, forward a webhook from Stripe/GitHub/etc. +4. Events appear in the feed. Click any event to inspect its headers and body. +5. Delivery attempts and their statuses are tracked automatically. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +## Contributing -## Deploy on Vercel +Contributions are welcome! Please open an issue or submit a pull request. -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +## License -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. -# convoy-playground +This project is maintained by [Convoy](https://getconvoy.io). diff --git a/app/globals.css b/app/globals.css deleted file mode 100644 index 96d59de..0000000 --- a/app/globals.css +++ /dev/null @@ -1,35 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - /* color: rgb(var(--foreground-rgb)); */ - /* background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); */ -} - -.active { - @apply transition-all duration-300 relative after:bottom-0 after:h-[3px] after:w-full after:left-0 after:right-0 after:bg-primary-400 after:absolute after:rounded-tl-16px after:rounded-tr-16px; -} - -.active span { - @apply text-primary-400 transition-all duration-300; -} diff --git a/app/layout.js b/app/layout.js index 473e4ae..af17a9c 100644 --- a/app/layout.js +++ b/app/layout.js @@ -6,7 +6,7 @@ const inter = Inter({ subsets: ['latin'] }); export const metadata = { title: 'Convoy Playground — Receive, Test & Debug Webhook Events', description: 'A free playground for receiving, testing, and debugging webhook events in real time. Inspect headers, payloads, and delivery attempts — powered by Convoy, the open-source webhooks gateway.', - keywords: ['webhook', 'webhook testing', 'webhook playground', 'convoy', 'webhook debugger', 'webhook events', 'webhook inspector', 'webhook delivery', 'open source webhooks'], + keywords: ['webhook', 'webhook testing', 'webhook playground', 'convoy', 'webhook debugger', 'webhook events', 'webhook inspector', 'webhook delivery', 'open source webhooks', 'webhook receiver', 'webhook url', 'test webhooks online'], metadataBase: new URL('https://playground.getconvoy.io'), alternates: { canonical: '/' @@ -17,19 +17,30 @@ export const metadata = { url: 'https://playground.getconvoy.io', siteName: 'Convoy Playground', type: 'website', - locale: 'en_US' + locale: 'en_US', + images: [ + { + url: '/og-image.png', + width: 1024, + height: 537, + alt: 'Convoy Playground — Receive, Test & Debug Webhook Events' + } + ] }, twitter: { card: 'summary_large_image', title: 'Convoy Playground — Receive, Test & Debug Webhook Events', - description: 'A free playground for receiving, testing, and debugging webhook events in real time. Powered by Convoy, the open-source webhooks gateway.' + description: 'A free playground for receiving, testing, and debugging webhook events in real time. Powered by Convoy, the open-source webhooks gateway.', + images: ['/og-image.png'] }, robots: { index: true, follow: true, googleBot: { index: true, - follow: true + follow: true, + 'max-image-preview': 'large', + 'max-snippet': -1 } } }; diff --git a/next.config.js b/next.config.js index 4550248..9978a04 100644 --- a/next.config.js +++ b/next.config.js @@ -8,11 +8,7 @@ const nextConfig = { experimental: { appDir: true }, - compiler: { - styledComponents: true - }, env: { - PROJECT_TOKEN: process.env.PROJECT_TOKEN, API_URL: process.env.API_URL } }; diff --git a/pages/api/sentry-example-api.js b/pages/api/sentry-example-api.js deleted file mode 100644 index ac07eec..0000000 --- a/pages/api/sentry-example-api.js +++ /dev/null @@ -1,5 +0,0 @@ -// A faulty API route to test Sentry's error monitoring -export default function handler(_req, res) { - throw new Error("Sentry Example API Route Error"); - res.status(200).json({ name: "John Doe" }); -} diff --git a/pages/sentry-example-page.js b/pages/sentry-example-page.js deleted file mode 100644 index a0b5c8a..0000000 --- a/pages/sentry-example-page.js +++ /dev/null @@ -1,84 +0,0 @@ -import Head from "next/head"; -import * as Sentry from "@sentry/nextjs"; - -export default function Home() { - return ( -
- - Sentry Onboarding - - - -
-

- - - -

- -

Get started by sending us a sample error:

- - -

- Next, look for the error on the{" "} - Issues Page. -

-

- For more information, see{" "} - - https://docs.sentry.io/platforms/javascript/guides/nextjs/ - -

-
-
- ); -} diff --git a/public/og-image.png b/public/og-image.png new file mode 100644 index 0000000..ed173c6 Binary files /dev/null and b/public/og-image.png differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file