feat(integrations): Direct users to the reference implementation (#5053)

Author: leeandher

src/docs/product/integrations/integration-platform/index.mdx

@@ -8,6 +8,14 @@ description: "Learn more about Sentry’s integration platform and how it provid
 
 Sentry’s integration platform provides a way for external services to interact with Sentry using [webhooks](/product/integrations/integration-platform/webhooks/), [UI components](/product/integrations/integration-platform/ui-components/), and the [REST API](/api). Integrations using this platform are first-class actors within Sentry.
 
+## Example App
+
+If you're new to the integration platform, it might help to get started with an example project. To help you out, we've built an [example application](https://github.com/getsentry/integration-platform-example), which you can use as a starting point. It demonstrates the different features and data available for your application:
+
+![Demo kanban application user interface that was built to show integration platform features.](reference-implementation-frontend.png)
+
+It's a kanban application that uses many of the features available to Sentry integrations and it provides starter code in both Python and TypeScript. It also includes a step-by-step guide to setting up your first integration, as well as documentation and testing advice. Typically, the app should be safely consuming live Sentry data within minutes.
+
 ## Creating an Integration
 
 In [sentry.io](https://sentry.io), navigate to **Settings > Developer Settings**. From here, you can choose to create an [internal](/product/integrations/integration-platform/internal-integration) or [public](/product/integrations/integration-platform/public-integration) integration. Internal integrations can only be used by your organization, whereas public integrations can be published and are available for all Sentry users.

src/docs/product/integrations/integration-platform/internal-integration.mdx

@@ -4,6 +4,12 @@ sidebar_order: 2
 description: "Learn more about Sentry's internal integrations."
 ---
 
+<Note>
+
+We've built an [example application](https://github.com/getsentry/integration-platform-example) to help you get started with building on Sentry's integration platform. Check it out for useful code snippets for adding these features in Python and TypeScript. See the [docs](/product/integrations/integration-platform/#example-app) for more information.
+
+</Note>
+
 Internal integrations are meant for custom integrations unique to your organization. They can also be as simple as an organization-wide token. Whether you are using just the API or all the integration platform features combined, internal integrations are for use within a single Sentry organization.
 
 Internal integrations don't require an OAuth flow. You receive an org-wide auth token immediately after creation:

src/docs/product/integrations/integration-platform/public-integration.mdx

@@ -4,6 +4,12 @@ sidebar_order: 1
 description: "Learn more about Sentry's public integrations."
 ---
 
+<Note>
+
+We've built an [example application](https://github.com/getsentry/integration-platform-example) to help you get started with building on Sentry's integration platform. Check it out for useful code snippets for adding these features in Python and TypeScript. See the [docs](/product/integrations/integration-platform/#example-app) for more information.
+
+</Note>
+
 Public integrations are for the "general public" of Sentry users. These start in an unpublished state for development purposes and can be submitted later for approval to publish. For more information, check out the [Publication section](#publication) of this page.
 
 The code examples in the sections below demonstrate a potential use case that involves a Flask app receiving new issue webhooks from Sentry, calling the Sentry API for more data about the issue, and pushing it to Pushover as a generator of desktop/mobile notifications.
@@ -134,11 +140,13 @@ It's possible to use auth tokens from the browser if you allow the origins of th
 ## Image Requirements
 
 Public integrations require a logo image to be uploaded. The requirements for those are:
+
 - Logo size must be between 256 &times; 256px and 1024 &times; 1024px
 - File format must be PNG
 - Background must be transparent (unless the logo takes up the entire space)
 
 If the integration has a [UI component](/product/integrations/integration-platform/ui-components), you must also upload an icon that follows these requirements:
+
 - Icon size must be between 256 &times; 256px and 1024 &times; 1024px
 - File must be a PNG in RGBA format
 - All pixels must be black or transparent

src/docs/product/integrations/integration-platform/reference-implementation-frontend.png

@@ -6,6 +6,12 @@ redirect_from:
 description: "Learn more about Sentry's integration platform User Interface (UI) components and how they provide you with the ability to define UI components to render within sentry.io, through a JSON-based schema."
 ---
 
+<Note>
+
+We've built an [example application](https://github.com/getsentry/integration-platform-example) to help you get started with building on Sentry's integration platform! Check it out for useful code snippets for adding these features in Python and TypeScript. See the [docs](/product/integrations/integration-platform/#example-app) for more information.
+
+</Note>
+
 The Sentry integration platform provides developers with the ability to define components to render within specific parts of [sentry.io](https://sentry.io), through a JSON-based schema.
 
 You can define the following components:

src/docs/product/integrations/integration-platform/ui-components/index.mdx

@@ -6,6 +6,12 @@ redirect_from:
 description: "Learn more about Sentry's integration platform webhooks and how they allow your service to receive requests about specific resources, such as installation, issues, and alerts."
 ---
 
+<Note>
+
+We've built an [example application](https://github.com/getsentry/integration-platform-example) to help you get started with building on Sentry's integration platform. Check it out for useful code snippets for adding these features in Python and TypeScript. See the [docs](/product/integrations/integration-platform/#example-app) for more information.
+
+</Note>
+
 Webhooks allow your service to receive requests about specific resources, depending on your selection, such as installation, issues, and alerts:
 
 ![Sentry integration webhook checkbox](webhook-checkbox.png)