Cleanup for the quickstart guides (#884)

Aviatorscode2 · web-flow · commit 9fca9e1b2d94 · 2025-07-23T15:37:57.000+05:30
diff --git a/content/docs/platform/quickstart/angular.mdx b/content/docs/platform/quickstart/angular.mdx
@@ -10,6 +10,8 @@ import {
   Library,
   Workflow
 } from 'lucide-react';
+import { CodeTemplateBlock } from '@/components/quickstart/inbox-code';
+
 
 This guide walks you through integrating Novu’s Inbox into your Angular application for real time in-app notifications, from setup to triggering your first notification. By the end, you'll have a working notification inbox.
 
@@ -20,27 +22,24 @@ This guide walks you through integrating Novu’s Inbox into your Angular applic
 <Steps>
   <Step>
   ### Create a Novu account
-    [Create a Novu account](https://dashboard-v2.novu.co/auth/sign-up) or [sign in](https://dashboard-v2.novu.co/auth/sign-in) to an existing account.
+    <a href="https://dashboard.novu.co/auth/sign-up" target="_blank" rel="noopener noreferrer">Create a Novu account</a> or <a href="https://dashboard.novu.co/auth/sign-in" target="_blank" rel="noopener noreferrer">sign in</a> to access the Novu dashboard.
   </Step>
 
     <Step>
-  ### Create an Angular application
-    Create a new Angular app with [angular cli](https://angular.dev/tools/cli) using the command below. Skip this step if you already have an existing project:
+    ### Create an Angular application
+    Run the following command to create a new Angular app using <a href="https://angular.dev/tools/cli/setup-local#install-the-angular-cli" target="_blank" rel="noopener noreferrer">angular cli</a>:
 
     ```bash
     ng new novu-inbox-angular
-    ```
-
-    Navigate to the newly created project:
-
-    ```bash
     cd novu-inbox-angular
     ```
   </Step>
 
   <Step>
-  ### Install the required package
-  Run the command below to install [Novu Javascript SDK](/platform/sdks/javascript), which provides required component for Inbox UI:
+  ### Install `@novu/js`
+  The [Novu JavaScript SDK](/platform/sdks/javascript) gives you access to the Inbox component.
+
+  Run the following command to install the SDK:
 
     ```package-install
     npm install @novu/js
@@ -50,45 +49,11 @@ This guide walks you through integrating Novu’s Inbox into your Angular applic
 
   <Step>
   ### Add the Inbox component
-  Update the `src/app/app.component.ts` file to add the Inbox component passing :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}:
-
-```ts title="src/app/app.component.ts"
-import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { NovuUI } from '@novu/js/ui';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
-})
-export class AppComponent implements AfterViewInit {
-  @ViewChild('novuInbox') novuInbox!: ElementRef<HTMLElement>;
-  title = 'inbox-angular';
-
-  ngAfterViewInit() {
-    const novu = new NovuUI({
-      options: {
-        applicationIdentifier: 'YOUR_APPLICATION_IDENTIFIER',
-        subscriberId: 'YOUR_SUBSCRIBER_ID',
-      },
-    });
-
-    novu.mountComponent({
-      name: 'Inbox',
-      props: {},
-      element: this.novuInbox.nativeElement,
-    });
-  }
-}
-```
-    <div className="text-sm text-gray-500 text-center mt-[-12px]">
-      [Sign in](https://dashboard-v2.novu.co/auth/sign-up) to get your own API keys
-    </div>
-
-     If you’re signed in to your Novu account, then the :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."} are automatically entered in the code sample above. Otherwise, you can manually retrieve them:
+  Update the `src/app/app.ts` file to add the Inbox component. You'll need to provide your :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}:
+
+  <CodeTemplateBlock templateId="angular-inbox" />
+
+  If you’re signed in to your Novu account, then the :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."} are automatically entered in the code sample above. Otherwise, you can manually retrieve them:
     * `applicationIdentifier` - In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
     * `subscriberId` - This represents a user in your system (typically the user's ID in your database). For quick start purposes, an auto-generated subscriberId is provided for your Dashboard user.
 
@@ -100,20 +65,22 @@ export class AppComponent implements AfterViewInit {
 
   <Step>
   ### Add the Inbox component to your application
-  Add a `#novuInbox` reference to your application in the starting of the `src/app/app.component.html` file:
+  Add a `#novuInbox` reference to your application in the starting of the `src/app/app.html` file:
 
-  ```html title="src/app/app.component.html"
+  ```html title="src/app/app.html"
   <div #novuInbox></div>
   ```
   </Step>
 
   <Step>
+
   ### Run Your Application
   Start your development server:
 
   ```package-install
   npm run start
   ```
+
   Once the application is running, a bell icon will appear on the top left side of the screen. Clicking it opens the notification inbox UI.
 
   Currently, there are no notifications. Let’s trigger one!
diff --git a/content/docs/platform/quickstart/nextjs.mdx b/content/docs/platform/quickstart/nextjs.mdx
@@ -29,12 +29,21 @@ Learn how to integrate Novu’s Inbox for real-time in-app notifications in your
 <Steps>
   <Step>
   ### Create a Novu account
-    [Create a Novu account](https://dashboard.novu.co/auth/sign-up) or [sign in](https://dashboard.novu.co/auth/sign-in) to access the Novu dashboard.
+    <a href="https://dashboard.novu.co/auth/sign-up" target="_blank" rel="noopener noreferrer">Create a Novu account</a> or <a href="https://dashboard.novu.co/auth/sign-in" target="_blank" rel="noopener noreferrer">sign in</a> to access the Novu dashboard.
   </Step>
 
+  <Step>
+  ### Create a new Next.js application
+  Run the following command to <a href="https://nextjs.org/docs/app/getting-started/installation" target="_blank">create a new Next.js application</a>:
+
+  ```package-install
+  npm create next-app@latest
+  ```
+  </Step>
+  
   <Step>
   ### Install `@novu/nextjs`
-  In your Next.js project, run the following command to install the Novu Inbox SDK:
+  Run the following command to install the Next.js Novu SDK:
   
   ```package-install
   npm install @novu/nextjs
diff --git a/content/docs/platform/quickstart/react.mdx b/content/docs/platform/quickstart/react.mdx
@@ -21,28 +21,34 @@ import {
   Palette,
   Workflow
 } from 'lucide-react';
+import { CodeTemplateBlock } from '@/components/quickstart/inbox-code';
 
 This guide walks you through integrating Novu’s Inbox into your React application for in-app notifications in real-time, from setup to triggering your first notification. By the end, you'll have a working notification inbox.
 
 <Steps>
   <Step>
   ### Create a Novu account
-    [Create a Novu account](https://dashboard.novu.co/auth/sign-up) or [sign in](https://dashboard.novu.co/auth/sign-in) to an existing account.
+    <a href="https://dashboard.novu.co/auth/sign-up" target="_blank" rel="noopener noreferrer">Create a Novu account</a> or <a href="https://dashboard.novu.co/auth/sign-in" target="_blank" rel="noopener noreferrer">sign in</a> to access the Novu dashboard.
   </Step>
 
   <Step>
-  ### Create a React application
-    Create a new React app with [Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project) using the command below. Skip this step if you already have an existing project:
+  ### Create a React app using Vite
+    Run the following command to create a new React app using [Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project):
 
     ```package-install
-    npm create vite@latest my-app -- --template react-ts
+    npm create vite@latest novu-inbox-react -- --template react-ts
+    cd novu-inbox-react
+    npm install
+    npm run dev
     ```
 
   </Step>
 
   <Step>
-  ### Install the required packages
-  Run the command below to install [Novu React SDK](/platform/sdks/react), which provides React components for building notification UIs and React Router Dom:
+  ### Install `@novu/react`
+  The [Novu React SDK](/platform/sdks/react) gives you access to the Inbox component.
+
+  Run the following command to install the SDK and  React Router Dom:
 
     ```package-install
     npm install @novu/react react-router-dom
@@ -54,29 +60,9 @@ This guide walks you through integrating Novu’s Inbox into your React applicat
   ### Create the Inbox component
   In the `src` directory, create a `components/notification-center.tsx` file and use the <Method href="/platform/inbox/react/components/inbox">{`<Inbox />`}</Method> component, passing :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}:
 
-    ```tsx title="src/components/notification-center.tsx"
-    import React from 'react';
-    import { Inbox } from '@novu/react';
-    import { useNavigate } from 'react-router';
-
-    export function NotificationCenter() {
-      const navigate = useNavigate();
-
-      return (
-        <Inbox
-          applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-          subscriber="YOUR_SUBSCRIBER_ID"
-          routerPush={(path: string) => navigate(path)}
-        />
-      );
-    }
-    ```
-
-    <div className="text-sm text-gray-500 text-center mt-[-12px]">
-      [Sign in](https://dashboard.novu.co/auth/sign-up) to get your own API keys
-    </div>
+  <CodeTemplateBlock templateId="react-inbox" />
 
-     If you’re signed in to your Novu account, then the :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."} are automatically entered in the code sample above. Otherwise, you can manually retrieve them:
+  If you’re signed in to your Novu account, then the :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."} are automatically entered in the code sample above. Otherwise, you can manually retrieve them:
     * `applicationIdentifier` – In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
     * `subscriberId` – This represents a user in your system (typically the user's ID in your database). For quick start purposes, an auto-generated subscriberId is provided for your Dashboard user.
 
diff --git a/content/docs/platform/quickstart/remix.mdx b/content/docs/platform/quickstart/remix.mdx
@@ -21,18 +21,19 @@ import {
   Palette,
   Workflow
 } from 'lucide-react';
+import { CodeTemplateBlock } from '@/components/quickstart/inbox-code';
 
 This guide walks you through integrating Novu’s Inbox into your Remix application for in-app notifications in real-time, from setup to triggering your first notification. By the end, you'll have a working notification inbox.
 
 <Steps>
   <Step>
   ### Create a Novu account
-    [Create a Novu account](https://dashboard.novu.co/auth/sign-up) or [sign in](https://dashboard.novu.co/auth/sign-in) to an existing account
+    <a href="https://dashboard.novu.co/auth/sign-up" target="_blank" rel="noopener noreferrer">Create a Novu account</a> or <a href="https://dashboard.novu.co/auth/sign-in" target="_blank" rel="noopener noreferrer">sign in</a> to access the Novu dashboard.
   </Step>
 
   <Step>
   ### Create a Remix application
-    Create a new Remix app using the command below. Skip this step if you already have an existing project:
+    Run the following command to create a new Remix app:
 
     ```package-install
     npx create-remix@latest
@@ -41,7 +42,11 @@ This guide walks you through integrating Novu’s Inbox into your Remix applicat
   </Step>
 
   <Step>
-  ### Install Novu’s inbox package
+  ### Install `@novu/react`
+  The [Novu React SDK](/platform/sdks/react) gives you access to the Inbox component.
+
+  Run the following command to install the SDK:
+  
   ```package-install
   npm install @novu/react
   ```
@@ -51,27 +56,7 @@ This guide walks you through integrating Novu’s Inbox into your Remix applicat
   ### Create an Inbox component
   In the `app` directory, create a `components/notification-center.tsx` file and use the <Method href="/platform/inbox/react/components/inbox">{`<Inbox />`}</Method> component, passing :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}:
       
-    ```tsx title="app/components/notification-center.tsx"
-    import React from 'react';
-    import { Inbox } from '@novu/react';
-    import { useNavigate } from '@remix-run/react';
-    
-    export function NotificationCenter() {
-      const navigate = useNavigate();
-      
-      return (
-        <Inbox
-          applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-          subscriber="YOUR_SUBSCRIBER_ID"
-          routerPush={(path: string) => navigate(path)}
-        />
-      );
-    }
-    ```
-
-    <div className="text-sm text-gray-500 text-center mt-[-12px]">
-      [Sign in](https://dashboard.novu.co/auth/sign-up) to get your own API keys
-    </div>
+  <CodeTemplateBlock templateId="remix-inbox" />
 
     If you’re signed in to your Novu account, then the :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."} are automatically entered in the code sample above. Otherwise, you can manually retrieve them:
     * `applicationIdentifier` – In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
diff --git a/content/docs/platform/quickstart/vue.mdx b/content/docs/platform/quickstart/vue.mdx
diff --git a/src/components/quickstart/inbox-code.tsx b/src/components/quickstart/inbox-code.tsx
