Skip to main content

​
Overview

This example app shows how to fetch integrations from your Databite server and use @databite/connect to create connections from the frontend.

​
Repository

The example web app is available in our open-source repository:

View on GitHub

Explore the complete implementation with source code, tests, and deployment configuration

​
Features Demonstrated

​
Connector Integration

  • Use @databite/connect modal for authentication
  • Type-safe integration with the Databite SDK

​
Connection Management

  • Connection UI: Pre-built React components for connection management
  • Status Tracking: Real-time connection status and health monitoring
  • Error Handling: Robust error handling and user feedback

​
Data Synchronization

  • Optional scheduled syncs via @databite/engine

​
Flow Execution

  • The modal guides users through authentication

​
Project Structure

example-webapp/
├── app/                    # Next.js app directory
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── components/             # React components
├── lib/                    # Utility functions
    └── utils.ts
├── __tests__/              # Test files
    ├── App.test.tsx
    ├── setup.ts
    └── utils.test.ts
├── package.json
├── tsconfig.json
├── next.config.ts
└── README.md

​
Getting Started

​
Prerequisites

  • Node.js >= 16.0.0
  • npm, yarn, pnpm, or bun

​
Installation

# Clone the repository
git clone https://github.com/DatabiteDev/databite.git
cd databite/packages/example-webapp

# Install dependencies
npm install

# Or with other package managers
yarn install
pnpm install
bun install

​
Development

Start the development server: 
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.

​
Key Implementation Examples

​
Basic Connector Setup

import { ConnectModal } from "@databite/connect";

function IntegrationConnect() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <ConnectModal
      open={isOpen}
      onOpenChange={setIsOpen}
      integrationId="your-integration-id"
      baseUrl={process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001"}
      onAuthSuccess={async (integration, config) => {
        await fetch("/api/save-connection", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ integrationId: integration.id, config }),
        });
      }}
    />
  );
}

​
Configuration

​
Environment Variables

Create a .env.local file in the root directory: 
# Slack Integration
NEXT_PUBLIC_SLACK_CLIENT_ID=your-slack-client-id
SLACK_CLIENT_SECRET=your-slack-client-secret

# Trello Integration
NEXT_PUBLIC_TRELLO_API_KEY=your-trello-api-key
TRELLO_API_TOKEN=your-trello-api-token

# Database
DATABASE_URL=your-database-url

# Authentication
NEXTAUTH_SECRET=your-nextauth-secret
NEXTAUTH_URL=http://localhost:3000

​
Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform:
  1. Push your code to GitHub
  2. Connect your repository to Vercel
  3. Set your environment variables in the Vercel dashboard
  4. Deploy!

​
Other Platforms

This application can be deployed to any platform that supports Next.js:
  • Netlify: Use the Next.js build command
  • Railway: Deploy directly from GitHub
  • Docker: Use the included Dockerfile
  • AWS/GCP/Azure: Use their respective deployment services

​
Contributing

We welcome contributions to the example web app! Please see our Contributing Guide for details.