Ticket Dashboard

A full-stack support ticket dashboard built on Databricks, using FastAPI + React + Lakebase + Genie Conversation API. Scaffolded with ai-dev-kit.

Stack

• Backend: FastAPI with psycopg connection pool
• Frontend: React + Vite + TailwindCSS + TypeScript
• Database: Databricks Lakebase (managed PostgreSQL)
• Analytics: Genie Conversation API (natural language SQL)
• Hosting: Databricks Apps
• Auth: Databricks SDK Config() with auto-injected service principal

Project Structure

ticket-dashboard/
├── app.yaml                # Databricks Apps deployment config
├── app.py                  # FastAPI entrypoint (serves React SPA)
├── requirements.txt        # Python dependencies
├── server/
│   ├── config.py           # Dual-mode auth (local vs. deployed)
│   ├── db.py               # Lakebase connection pool with OAuth
│   ├── models.py           # Pydantic models
│   └── routes/
│       ├── tickets.py      # CRUD endpoints
│       └── genie.py        # Genie Conversation API proxy
└── frontend/
    ├── package.json
    ├── vite.config.ts       # Proxies /api to FastAPI for local dev
    ├── src/
    │   ├── App.tsx
    │   ├── api.ts
    │   ├── types.ts
    │   └── components/
    │       ├── TicketTable.tsx
    │       ├── CreateTicketForm.tsx
    │       ├── GenieChat.tsx
    │       ├── StatusBadge.tsx
    │       └── PriorityBadge.tsx
    └── dist/                # Built output (included in deployment)

Prerequisites

1. Databricks workspace with Lakebase and Apps enabled
2. Databricks CLI v0.285.0+ authenticated: databricks auth login --host <url> --profile <name>
3. Node.js 18+ and uv (Python package manager)
4. ai-dev-kit installed: bash <(curl -sL https://raw.githubusercontent.com/databricks-solutions/ai-dev-kit/main/install.sh)

Local Development

# Terminal 1: Start FastAPI backend
export DATABRICKS_PROFILE=my-profile
uv run uvicorn app:app --reload --port 8000

# Terminal 2: Start React dev server (hot reload)
cd frontend
npm install
npm run dev    # Runs on :5173, proxies /api to :8000

Deployment

# Build the React frontend
cd frontend && npm run build && cd ..

# Create the app
databricks apps create ticket-dashboard -p my-profile

# Upload source code (node_modules excluded)
databricks workspace mkdirs /Workspace/Users/<email>/apps/ticket-dashboard
databricks workspace import-dir . /Workspace/Users/<email>/apps/ticket-dashboard -p my-profile

# Deploy
databricks apps deploy ticket-dashboard \
  --source-code-path /Workspace/Users/<email>/apps/ticket-dashboard -p my-profile

After the first deploy, add resources in the Databricks UI:

1. Go to Compute > Apps > ticket-dashboard
2. Add Lakebase database resource
3. Add SQL warehouse resource
4. Add Genie space resource
5. Redeploy to pick up the new environment variables

API Endpoints

Method	Path	Description
GET	/api/tickets	List all tickets
POST	/api/tickets	Create a ticket
PUT	/api/tickets/{id}	Update a ticket
DELETE	/api/tickets/{id}	Delete a ticket
POST	/api/ask	Ask Genie a natural language question

ai-dev-kit Skills Used

• databricks-app-python - FastAPI scaffold, OAuth, app.yaml, deployment
• databricks-lakebase-autoscale - Lakebase connection pool, OAuthConnection pattern
• databricks-genie - Genie space creation, Conversation API integration

Related

• Article: I Built a Full-Stack Databricks App in Five Prompts
• ai-dev-kit