🚀 Airbyte Embedded Widget Demo

Experience the power of Airbyte's Embedded Widget in action!

This is a Turborepo-powered monorepo containing the Airbyte Embedded Widget demo with multiple frontend implementations:

• Vanilla JavaScript + Server
• React
• Next.js

⚡ 2-Minute Quick Start

🔧 Setup (All Apps)

# Clone and install dependencies for all apps
git clone https://github.com/airbytehq/embedded-demoapp.git
cd embedded-demoapp
npm install

# Configure server environment
cd apps/server
cp .env.example .env
# Edit .env with your credentials

🚀 Run All Apps

# From root directory - starts all apps simultaneously
npm run dev

→ Server & Vanilla JS: http://localhost:3000
→ Next.js: http://localhost:3001
→ React: http://localhost:3002

🎯 Run Individual Apps

# Run only the server
npm run dev --filter=@airbyte-demoapp/server

# Run only React app  
npm run dev --filter=@airbyte-demoapp/reactjs

# Run only Next.js app
npm run dev --filter=@airbyte-demoapp/nextjs

🎮 Demo Flow

1. 🔐 Enter Demo Password: Protects the demo from public access
2. 👤 Create User Account: Simple email-based authentication
3. 🔗 Connect Your Data: Launch the Airbyte Embedded Widget

Get Your Credentials

1. Contact Airbyte: Reach out to [email protected] or [email protected] for Embedded access
2. Get Your Keys: You'll receive your organization ID, client ID, and client secret
3. Update Config: Add them to your .env file:

# server/.env
SONAR_AIRBYTE_WEBAPP_PASSWORD=your_demo_password
SONAR_AIRBYTE_ALLOWED_ORIGIN=http://localhost:3000
SONAR_AIRBYTE_ORGANIZATION_ID=your_organization_id
SONAR_AIRBYTE_CLIENT_ID=your_client_id
SONAR_AIRBYTE_CLIENT_SECRET=your_client_secret

🛠️ Technical Details

Prerequisites

• Node.js 18+ (uses native fetch API)
• Modern browser (Chrome, Firefox, Safari, Edge)

Turborepo Structure

📁 embedded-test/
├── 📁 apps/
│   ├── 🔧 server/           # Express.js backend (@airbyte-demoapp/server)
│   ├── ⚛️ reactjs/          # React app (@airbyte-demoapp/reactjs)  
│   └── 🚀 nextjs/           # Next.js app (@airbyte-demoapp/nextjs)
├── 📁 packages/             # Shared packages (empty for now)
├── 📄 package.json          # Root workspace configuration
├── 📄 turbo.json            # Turborepo configuration
└── 📖 README.md             # You are here!

Available Commands

• npm run dev - Start all apps in development
• npm run build - Build all apps for production
• npm run lint - Lint all apps
• npm run clean - Clean build artifacts and node_modules
• npm run test - Run tests across all apps

🎨 Customization Examples

Change Theme Colors

/* In any version's CSS file */
:root {
  --accent-primary: #your-brand-color;
  --bg-primary: #your-background;
}

Add Your Logo

// Replace octavia-sonar.png with your logo
<img src="/your-logo.png" alt="Your Brand" className="logo" />

🚀 Deployment Guide

🌐 Complete Vercel Deployment (Recommended)

Deploy the server with one-click button (includes environment variable setup):

Manual server deploy:

cd apps/server && npx vercel

⚙️ Environment Configuration

Required Environment Variables:

Airbyte Configuration:

SONAR_AIRBYTE_WEBAPP_PASSWORD=your_demo_password
SONAR_AIRBYTE_ALLOWED_ORIGIN=https://your-deployed-app.vercel.app
SONAR_AIRBYTE_ORGANIZATION_ID=your_organization_id
SONAR_AIRBYTE_CLIENT_ID=your_client_id
SONAR_AIRBYTE_CLIENT_SECRET=your_client_secret

Optional Services:

# Redis for user session persistence (optional - falls back to local filesystem)
REDIS_URL=redis://your-redis-url

💡 Tip: The one-click Vercel button above will prompt you to enter all these variables during deployment!

📚 Detailed Guides

• 🔧 Server documentation: apps/server/README.md
• ⚛️ React documentation: apps/nextjs/README.md
• 🚀 Next.js documentation: apps/reactjs/README.md

🤝 Contributing

Found a bug? Want to add a feature? PRs welcome!

1. Fork the repo
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Support

• Technical Issues: Open a GitHub issue
• Airbyte Embedded Access: Reach out to [email protected] or [email protected]
• General Questions: Check the Airbyte Documentation

---

🎉 Happy data moving! Built with ❤️ by the Airbyte team.