Skip to content

Commit 7867c97

Browse files
leggetterleggetter
committed
feat(demos): add dashboard integration demo
Add a comprehensive Next.js dashboard demo that showcases seamless integration with Outpost event destinations management. Key Features: - User authentication with NextAuth.js and PostgreSQL - Auto-creation of Outpost tenants on user registration - Dashboard overview showing tenant statistics from Outpost API - Seamless redirect to Outpost portal for destination management - Support for deep linking to specific portal pages (/new, /destinations/{id}) - Clickable destinations list with navigation to individual destination details - Docker Compose setup with PostgreSQL, Redis, RabbitMQ, and Outpost services Technical Implementation: - Next.js 15 with App Router and TypeScript - Tailwind CSS for styling - NextAuth.js v5 with JWT tokens - Official Outpost TypeScript SDK integration - Middleware-based authentication and route protection - Catch-all route handlers for flexible portal path support This demo demonstrates how to integrate Outpost with an API platform or SaaS dashboard, providing users with a seamless experience between the main application and event destination management.
1 parent eb4e27e commit 7867c97

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+8727
-0
lines changed

‎examples/demos/dashboard-integration/.env.example‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Dashboard Application Configuration
2+
3+
# ============================== Dashboard Database ==============================
4+
DATABASE_URL=postgresql://dashboard:dashboard@localhost:5432/dashboard_integration
5+
6+
# ============================== Authentication ==============================
7+
NEXTAUTH_SECRET=your-secret-here-replace-with-long-random-string
8+
9+
# ============================== Outpost Integration ==============================
10+
OUTPOST_BASE_URL=http://localhost:3333
11+
OUTPOST_API_KEY=demo-api-key-change-in-production

‎examples/demos/dashboard-integration/.env.outpost.example‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Outpost Configuration
2+
# Copy this file to .env.outpost and update the values as needed
3+
4+
# ============================== Outpost API ==============================
5+
PORT=3333
6+
API_PORT=3333
7+
API_KEY=demo-api-key-change-in-production
8+
API_JWT_SECRET=demo-jwt-secret-change-in-production
9+
AES_ENCRYPTION_SECRET=demo-encryption-secret-change-in-production
10+
TOPICS=user.created,user.updated,user.deleted,order.completed,payment.processed
11+
12+
# ============================== Database ==============================
13+
# PostgreSQL (configured in docker-compose.yml)
14+
POSTGRES_URL=postgres://outpost:outpost@postgres:5432/outpost?sslmode=disable
15+
16+
# ============================== Redis ==============================
17+
# Redis (configured in docker-compose.yml)
18+
REDIS_HOST=redis
19+
REDIS_PORT=6379
20+
REDIS_PASSWORD=password
21+
REDIS_DATABASE=0
22+
23+
# ============================== Message Queue ==============================
24+
# RabbitMQ (configured in docker-compose.yml)
25+
RABBITMQ_SERVER_URL=amqp://guest:guest@rabbitmq:5672
26+
RABBITMQ_EXCHANGE=outpost
27+
RABBITMQ_DELIVERY_QUEUE=outpost-delivery
28+
RABBITMQ_LOG_QUEUE=outpost-log
29+
30+
# ============================== Portal Configuration ==============================
31+
PORTAL_ORGANIZATION_NAME=API Platform Demo
32+
PORTAL_REFERER_URL=http://localhost:3000
33+
PORTAL_FAVICON_URL=http://localhost:3000/favicon.ico
34+
35+
# ============================== Performance ==============================
36+
PUBLISHMQ_MAX_CONCURRENCY=1
37+
DELIVERYMQ_MAX_CONCURRENCY=1
38+
39+
# ============================== Development ==============================
40+
# Disable telemetry for demo
41+
DISABLE_TELEMETRY=true

‎examples/demos/dashboard-integration/.gitignore‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
!.env.example
36+
!.env.outpost.example
37+
38+
# docker volumes
39+
/data
40+
41+
# vercel
42+
.vercel
43+
44+
# typescript
45+
*.tsbuildinfo
46+
next-env.d.ts

‎examples/demos/dashboard-integration/.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": false
4+
}

‎examples/demos/dashboard-integration/README.md‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
# API Platform Dashboard Integration Demo
2+
3+
A Next.js application demonstrating how to integrate Outpost with an API platform or SaaS API dashboard. This example shows how API platforms can seamlessly embed Outpost's event destination management capabilities into their existing user dashboards.
4+
5+
## Features
6+
7+
- **API Platform Dashboard**: Complete user dashboard for an API/SaaS platform
8+
- **Integrated Event Management**: Seamless Outpost integration for webhook/event destinations
9+
- **Automatic Tenant Provisioning**: Users get Outpost tenants created automatically when they sign up
10+
- **Unified User Experience**: Event destination management feels like a native part of the platform
11+
- **Production-Ready Patterns**: Demonstrates real-world integration patterns for API platforms
12+
13+
## Prerequisites
14+
15+
- Node.js 18+
16+
- Docker and Docker Compose
17+
- Git
18+
19+
## Setup
20+
21+
1. **Clone and navigate to the project**:
22+
```bash
23+
cd examples/demos/dashboard-integration
24+
```
25+
26+
2. **Install dependencies**:
27+
```bash
28+
npm install
29+
```
30+
31+
3. **Set up environment variables**:
32+
```bash
33+
# Dashboard application configuration
34+
cp .env.example .env.local
35+
36+
# Outpost configuration
37+
cp .env.outpost.example .env.outpost
38+
```
39+
40+
The default configurations should work for local development. For production, update the secrets in both files.
41+
42+
4. **Start the complete stack** (PostgreSQL, Redis, RabbitMQ, and Outpost):
43+
```bash
44+
docker-compose up -d
45+
```
46+
47+
This will start:
48+
- `postgres` - PostgreSQL with separate databases for dashboard and Outpost (port 5432)
49+
- `redis` - Redis for Outpost (port 6379)
50+
- `rabbitmq` - Message queue for Outpost (port 5672, management UI on 15672)
51+
- `outpost-api` - Outpost API service (port 3333)
52+
- `outpost-delivery` - Outpost delivery service
53+
- `outpost-log` - Outpost log service
54+
55+
5. **Wait for services to be healthy**:
56+
```bash
57+
docker-compose ps
58+
```
59+
Wait until all services show "healthy" status. This may take 1-2 minutes on first startup.
60+
61+
6. **Run the dashboard application**:
62+
```bash
63+
npm run dev
64+
```
65+
66+
7. **Access the application**:
67+
- Dashboard: [http://localhost:4000](http://localhost:4000)
68+
- Outpost API: [http://localhost:3333](http://localhost:3333)
69+
- RabbitMQ Management: [http://localhost:15672](http://localhost:15672) (guest/guest)
70+
71+
## Usage
72+
73+
1. **Sign up for the API platform** - Register as a new user of the fictitious API platform
74+
2. **Access your platform dashboard** - View your API usage, account info, and available features
75+
3. **Manage Event Destinations** - Click "Event Destinations" to configure webhooks for your API events
76+
4. **Seamless Portal Experience** - Get redirected to Outpost's full-featured destination management interface
77+
78+
## Use Case
79+
80+
This demo represents a common integration scenario where:
81+
82+
- **API Platform**: Your SaaS provides APIs that generate events (user signups, payments, data processing, etc.)
83+
- **Customer Need**: Your customers need to receive these events via webhooks to their own systems
84+
- **Outpost Integration**: Instead of building webhook infrastructure from scratch, you integrate Outpost
85+
- **User Experience**: Your customers manage event destinations through what feels like your native platform
86+
87+
## Architecture
88+
89+
- **Platform Frontend**: Next.js application representing your API platform's dashboard
90+
- **User Management**: Auth.js with PostgreSQL for platform user accounts
91+
- **Outpost Integration**: Official TypeScript SDK for tenant and portal management
92+
- **Seamless Handoff**: Server-side route handlers for transparent portal access
93+
94+
## Environment Variables
95+
96+
### Dashboard Application (.env.local)
97+
98+
| Variable | Description | Example |
99+
|----------|-------------|---------|
100+
| `DATABASE_URL` | Dashboard PostgreSQL connection | `postgresql://dashboard:dashboard@localhost:5432/dashboard_integration` |
101+
| `NEXTAUTH_SECRET` | Auth.js secret key | `your-secret-here` |
102+
| `OUTPOST_BASE_URL` | Outpost base URL | `http://localhost:3333` |
103+
| `OUTPOST_API_KEY` | Outpost API key | `demo-api-key-change-in-production` |
104+
105+
### Outpost Configuration (.env.outpost)
106+
107+
| Variable | Description | Example |
108+
|----------|-------------|---------|
109+
| `API_KEY` | Outpost API key | `demo-api-key-change-in-production` |
110+
| `API_JWT_SECRET` | JWT signing secret | `demo-jwt-secret-change-in-production` |
111+
| `POSTGRES_URL` | Outpost PostgreSQL connection | `postgres://outpost:outpost@postgres:5432/outpost` |
112+
| `REDIS_HOST` | Redis hostname | `redis` |
113+
| `RABBITMQ_SERVER_URL` | RabbitMQ connection | `amqp://guest:guest@rabbitmq:5672` |
114+
| `PORTAL_ORGANIZATION_NAME` | Portal branding | `API Platform Demo` |
115+
116+
## Docker Services
117+
118+
The docker-compose.yml includes the complete stack:
119+
120+
- **postgres** (port 5432): Single PostgreSQL instance with separate databases for dashboard (`dashboard_integration`) and Outpost (`outpost`)
121+
- **redis** (port 6379): Redis for Outpost caching and sessions
122+
- **rabbitmq** (ports 5672, 15672): Message queue for Outpost event processing
123+
- **outpost-api** (port 3333): Outpost API service
124+
- **outpost-delivery**: Outpost delivery service for processing webhooks
125+
- **outpost-log**: Outpost log service for event logging
126+
127+
## Development
128+
129+
- `npm run dev` - Start development server
130+
- `npm run build` - Build for production
131+
- `npm run start` - Start production server
132+
- `npm run lint` - Run ESLint
133+
- `docker-compose up -d` - Start all services
134+
- `docker-compose down` - Stop all services
135+
- `docker-compose logs [service]` - View logs for a specific service
136+
137+
## Troubleshooting
138+
139+
### Services not starting
140+
```bash
141+
# Check service status
142+
docker-compose ps
143+
144+
# View logs for a specific service
145+
docker-compose logs outpost-api
146+
docker-compose logs dashboard-postgres
147+
148+
# Restart services
149+
docker-compose restart
150+
```
151+
152+
### Database connection issues
153+
```bash
154+
# Check PostgreSQL is ready
155+
docker-compose exec postgres pg_isready -U dashboard -d dashboard_integration
156+
docker-compose exec postgres pg_isready -U outpost -d outpost
157+
```
158+
159+
### Outpost API not responding
160+
```bash
161+
# Check if Outpost API is healthy
162+
curl http://localhost:3333/healthz
163+
164+
# View Outpost logs
165+
docker-compose logs outpost-api
166+
```
167+
168+
## Integration Points
169+
170+
1. **User Onboarding** → Platform user registration automatically provisions Outpost tenant
171+
2. **Dashboard Overview** → Display event/webhook statistics from Outpost API in platform dashboard
172+
3. **Destination Management** → "Event Destinations" nav item seamlessly redirects to Outpost portal
173+
4. **Branded Experience** → Users experience webhook management as part of your platform, not a separate tool
174+
175+
## Key Integration Patterns
176+
177+
This demo illustrates several important patterns for API platform integration:
178+
179+
- **Transparent Tenant Management**: Outpost tenants are created automatically and hidden from users
180+
- **Single Sign-On Experience**: Users don't need separate Outpost accounts
181+
- **Embedded Navigation**: Event destinations appear as a natural part of the platform navigation
182+
- **Contextual Data Display**: Platform dashboard shows relevant Outpost data (destination counts, recent events)
183+
- **Seamless Handoff**: Clicking "Event Destinations" feels like navigating to another page in your app

0 commit comments

Comments
 (0)