> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userboo.st/llms.txt
> Use this file to discover all available pages before exploring further.

# Advanced Examples

> Advanced integration patterns and real-world use cases for UserBoost

## Looking for Quick Setup?

For getting started quickly, check out our streamlined integration guides:

<CardGroup cols={3}>
  <Card title="Backend APIs" icon="server" href="/quick-start/backend-apis">
    **Server-side tracking** for Node.js, Python, Go, PHP, Ruby and any language with HTTP support.
  </Card>

  <Card title="Web Apps" icon="globe" href="/quick-start/web-apps">
    **Universal web integration** that works with React, Next.js, Vue, Angular, and vanilla JS.
  </Card>

  <Card title="Mobile Apps" icon="mobile" href="/quick-start/mobile-apps">
    **Native mobile integration** for React Native and Flutter applications.
  </Card>
</CardGroup>

***

## Advanced Integration Patterns

For developers who need more complex implementations and real-world patterns:

<CardGroup cols={2}>
  <Card title="Node.js Server Examples" icon="nodejs" href="/examples/nodejs">
    **Advanced server-side patterns** including webhooks, background jobs, and API middleware integration.
  </Card>

  <Card title="React Patterns" icon="react" href="/examples/react">
    **Advanced React patterns** with custom hooks, TypeScript, context providers, and testing strategies.
  </Card>

  <Card title="Next.js Full-Stack" icon="nextjs" href="/examples/nextjs">
    **Complete Next.js integration** with API routes, middleware, SSR tracking, and performance monitoring.
  </Card>

  <Card title="Coming Soon" icon="clock">
    **Vue, Angular, and more** advanced patterns coming soon. Use our universal web guide in the meantime.
  </Card>
</CardGroup>

***

## Quick Reference

### Universal Installation

All UserBoost integrations follow the same pattern:

<Tabs>
  <Tab title="NPM Package">
    ```bash theme={null}
    npm install @userboost/sdk
    ```

    ```javascript theme={null}
    import { UserBoost } from '@userboost/sdk';
    UserBoost.init({ apiKey: 'your_key' });
    ```
  </Tab>

  <Tab title="Script Tag">
    ```html theme={null}
    <script src="https://cdn.userboo.st/js/latest/userboost.min.js"></script>
    <script>
      ub.init({ apiKey: 'your_key' });
    </script>
    ```
  </Tab>

  <Tab title="REST API">
    ```bash theme={null}
    curl -X POST https://api.userboo.st/v1/event \
      -H "Authorization: Bearer your_key" \
      -H "Content-Type: application/json" \
      -d '{"event": "user_action", "user": {"id": "123"}}'
    ```
  </Tab>
</Tabs>

### Common Event Patterns

```javascript theme={null}
// User actions
ub.event('button_clicked', {
  user: { id: 'user_123' },
  properties: { button: 'signup', location: 'header' }
});

// Page/screen views
ub.event('page_viewed', {
  user: { id: 'user_123' },
  properties: { page: '/dashboard', referrer: document.referrer }
});

// Onboarding steps
ub.event('onboarding_step_completed', {
  user: { id: 'user_123' },
  properties: { step: 'profile_setup', completion: 75 }
});
```

***

## Need Help?

<CardGroup cols={2}>
  <Card title="API Reference" icon="book" href="/api/rest-examples">
    Complete API documentation with all available endpoints and parameters.
  </Card>

  <Card title="Event Tracking Guide" icon="activity" href="/tracking/events">
    Learn how to effectively track user actions and build meaningful funnels.
  </Card>
</CardGroup>