diff --git a/sreez-showcase/app-config.yaml b/sreez-showcase/app-config.yaml
index 248cff1..66c7820 100644
--- a/sreez-showcase/app-config.yaml
+++ b/sreez-showcase/app-config.yaml
@@ -93,6 +93,8 @@ catalog:
       target: ../../examples/org.yaml
       rules:
         - allow: [User, Group]
+    - type: url
+      target: https://github.com/backstage/backstage/raw/master/packages/catalog-model/examples/apis/petstore-api.yaml
 
     ## Uncomment these lines to add more example data
     # - type: url
diff --git a/sreez-showcase/plugins/testfrontend-react/.eslintrc.js b/sreez-showcase/plugins/testfrontend-react/.eslintrc.js
new file mode 100644
index 0000000..e2a53a6
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
diff --git a/sreez-showcase/plugins/testfrontend-react/README.md b/sreez-showcase/plugins/testfrontend-react/README.md
new file mode 100644
index 0000000..c4db0c9
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/README.md
@@ -0,0 +1,5 @@
+# backstage-plugin-testfrontend-react
+
+Welcome to the web library package for the testfrontend plugin!
+
+_This plugin was created through the Backstage CLI_
diff --git a/sreez-showcase/plugins/testfrontend-react/package.json b/sreez-showcase/plugins/testfrontend-react/package.json
new file mode 100644
index 0000000..61bccf9
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "backstage-plugin-testfrontend-react",
+  "description": "Web library for the testfrontend plugin",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-plugin-api": "^1.9.2",
+    "@material-ui/core": "^4.9.13"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.26.3",
+    "@backstage/test-utils": "^1.5.4",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "typescript-language-server": "^4.3.3"
+  },
+  "files": [
+    "dist"
+  ]
+}
diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.test.tsx b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.test.tsx
new file mode 100644
index 0000000..c421e05
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { ExampleComponent } from './ExampleComponent';
+
+describe('ExampleComponent', () => {
+  it('should render', async () => {
+    await renderInTestApp(<ExampleComponent />);
+
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should display a custom message', async () => {
+    await renderInTestApp(<ExampleComponent message="Hello Example" />);
+
+    expect(screen.getByText('Hello Example')).toBeInTheDocument();
+  });
+});
diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.tsx b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.tsx
new file mode 100644
index 0000000..a1ab093
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+/**
+ * Props for {@link ExampleComponent}.
+ *
+ * @public
+ */
+export interface ExampleComponentProps {
+  message?: string;
+}
+
+/**
+ * Displays an example.
+ *
+ * @remarks
+ *
+ * Longer descriptions should be put after the `@remarks` tag. That way the initial summary
+ * will show up in the API docs overview section, while the longer description will only be
+ * displayed on the page for the specific API.
+ *
+ * @public
+ */
+export function ExampleComponent(props: ExampleComponentProps) {
+  // By destructuring props here rather than in the signature the API docs will look nicer
+  const { message = 'Hello World' } = props;
+
+  return <Typography variant="h1">{message}</Typography>;
+}
diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts
new file mode 100644
index 0000000..9bb2f2c
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts
@@ -0,0 +1,2 @@
+export { ExampleComponent } from './ExampleComponent';
+export type { ExampleComponentProps } from './ExampleComponent';
diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/index.ts b/sreez-showcase/plugins/testfrontend-react/src/components/index.ts
new file mode 100644
index 0000000..0380b8c
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/components/index.ts
@@ -0,0 +1,5 @@
+/***/
+// The index file in ./components/ is typically responsible for selecting
+// which components are public API and should be exported from the package.
+
+export * from './ExampleComponent';
diff --git a/sreez-showcase/plugins/testfrontend-react/src/hooks/index.ts b/sreez-showcase/plugins/testfrontend-react/src/hooks/index.ts
new file mode 100644
index 0000000..cec94f4
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/hooks/index.ts
@@ -0,0 +1,5 @@
+/***/
+// The index file in ./hooks/ is typically responsible for selecting
+// which hooks are public API and should be exported from the package.
+
+export * from './useExample';
diff --git a/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts b/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts
new file mode 100644
index 0000000..f1fd276
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts
@@ -0,0 +1 @@
+export { useExample } from './useExample';
diff --git a/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/useExample.ts b/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/useExample.ts
new file mode 100644
index 0000000..3c6e2c4
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/useExample.ts
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+
+/**
+ * Shows an example alert.
+ *
+ * @public
+ */
+export function useExample() {
+  const alertApi = useApi(alertApiRef);
+
+  useEffect(() => {
+    alertApi.post({ message: 'Hello World!' });
+  }, [alertApi]);
+}
diff --git a/sreez-showcase/plugins/testfrontend-react/src/index.ts b/sreez-showcase/plugins/testfrontend-react/src/index.ts
new file mode 100644
index 0000000..d7eb36d
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/index.ts
@@ -0,0 +1,12 @@
+/***/
+/**
+ * Web library for the testfrontend plugin.
+ *
+ * @packageDocumentation
+ */
+
+// In this package you might for example export components or hooks
+// that are useful to other plugins or modules.
+
+export * from './components';
+export * from './hooks';
diff --git a/sreez-showcase/plugins/testfrontend-react/src/setupTests.ts b/sreez-showcase/plugins/testfrontend-react/src/setupTests.ts
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/sreez-showcase/plugins/testfrontend-react/src/setupTests.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/sreez-showcase/yarn.lock b/sreez-showcase/yarn.lock
index fb75079..2f849ad 100644
--- a/sreez-showcase/yarn.lock
+++ b/sreez-showcase/yarn.lock
@@ -8978,7 +8978,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@*", "@types/react-dom@^18", "@types/react-dom@^18.0.0":
+"@types/react-dom@*", "@types/react-dom@^18.0.0":
   version "18.2.25"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"
   integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==
@@ -9016,7 +9016,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.13.1 || ^17.0.0", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0", "@types/react@^18":
+"@types/react@*", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0":
   version "18.2.79"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
   integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
@@ -9024,6 +9024,15 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^16.13.1 || ^17.0.0":
+  version "17.0.80"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.80.tgz#a5dfc351d6a41257eb592d73d3a85d3b7dbcbb41"
+  integrity sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "^0.16"
+    csstype "^3.0.2"
+
 "@types/request@^2.47.1", "@types/request@^2.48.8":
   version "2.48.12"
   resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.12.tgz#0f590f615a10f87da18e9790ac94c29ec4c5ef30"
@@ -9056,6 +9065,11 @@
   resolved "https://registry.yarnpkg.com/@types/sarif/-/sarif-2.1.7.tgz#dab4d16ba7568e9846c454a8764f33c5d98e5524"
   integrity sha512-kRz0VEkJqWLf1LLVN4pT1cg1Z9wAuvI6L97V3m2f5B76Tg8d413ddvLBPTEHAZJlnn4XSvu0FkZtViCQGVyrXQ==
 
+"@types/scheduler@^0.16":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
 "@types/semver@^7.3.12", "@types/semver@^7.5.0":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
@@ -23241,6 +23255,11 @@ typescript-json-schema@^0.63.0:
     typescript "~5.1.0"
     yargs "^17.1.1"
 
+typescript-language-server@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/typescript-language-server/-/typescript-language-server-4.3.3.tgz#b52836fa0ec7a9c05007af44d5a49605f5fe72e0"
+  integrity sha512-3QLj57Ru9S6zv10sa4z1pA3TIR1Rdkd04Ke0EszbO4fx5PLdlYhlC/PMxwlyxls9wrZs7wPCME1Ru0s1Gabz4Q==
+
 typescript@5.4.2:
   version "5.4.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"