[PDE-732] feat: add Open Graph image, rewrite README, and clean up unused config for better SEO

[motunrayokoyejo]

Summary

This PR improves how the playground appears when shared on social platforms and search engines, rewrites the README to properly represent the product, and removes leftover boilerplate from the original project scaffold.

Context

Right now, the playground URL has no preview image. Platforms fall back to a generic blank card, which makes the link look untrustworthy and significantly reduces click-through rates. Also, the README on GitHub is still the default create-next-app template, which gives no information about what the playground actually does and offers no setup guidance for contributors. There are also several dead configuration options and unused files that were left behind from the initial scaffold .

What changed

Open Graph and Twitter Card image

I added a static OG image and referenced it in the metadata in layout.js for both Open Graph and Twitter cards. This means when someone shares the playground link on social platforms, they will now see a branded preview card instead of a blank one. I also added max-image-preview: large and max-snippet: -1 as Googlebot directives so Google can show the full image and longer text snippets in search results, and expanded the keywords list with additional high-intent search terms like "webhook receiver", "webhook url", and "test webhooks online".

README rewrite

The default Next.js README has been replaced with a proper product README that explains what the playground does, lists its features, walks through the setup process, documents the required environment variables in a table, describes the tech stack, explains how the app works end-to-end, and outlines the project structure. I also added a .env.example file so new contributors immediately know which environment variables are needed without having to dig through the code.

Dead config and file cleanup

I removed compiler.styledComponents: true from next.config.js because there is no styled-components dependency in the project, this was likely carried over from a template. I also removed the unused PROJECT_TOKEN environment variable from the same file since it is not referenced anywhere in the codebase. On the file side, I deleted app/globals.css which was never imported (the app uses styles.scss as its stylesheet), deleted the Sentry onboarding example page and API route (pages/sentry-example-page.js and pages/api/sentry-example-api.js) which were stock boilerplate from the Sentry setup wizard, and deleted public/vercel.svg which was an unused default asset from create-next-app.

[netlify]

✅ Deploy Preview for convoy-playground ready!

Name	Link
🔨 Latest commit	1e9c3a6
🔍 Latest deploy log	https://app.netlify.com/projects/convoy-playground/deploys/69e7cbb484750300089aef26
😎 Deploy Preview	https://deploy-preview-8--convoy-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.