Smart List Demo

This repository contains a lightweight demo stack that pairs a Sinatra-based Ruby API with a React (Vite) frontend. The goal is to keep the backend service simple while enabling the React app to fetch data from it during local development.

Project Layout

• backend/ – Sinatra API service with a couple of placeholder endpoints
• frontend/ – React app bootstrapped with Vite and configured to proxy API calls to the backend during development
• backend/.env.example – template for environment variables required to talk to Rollout

Prerequisites

• Ruby 3.1+ with Bundler
• Node.js 18+ with npm

Backend (Sinatra)

cd backend
bundle install
# export $(grep -v '^#' .env | xargs) # optional helper once you copy .env.example -> .env
export ROLLOUT_CLIENT_ID=your_client_id
export ROLLOUT_CLIENT_SECRET=your_client_secret
bundle exec ruby app.rb

The server listens on http://127.0.0.1:4567 by default. Available routes:

• GET /api/health – health check
• GET /api/items – placeholder data (kept for reference)
• GET /api/rollout/token – returns a short-lived JWT for authenticating Rollout Link
• POST /api/rollout/smart-lists – proxies smart list creation calls to the Rollout CRM API
• POST /api/rollout/people – proxies person creation calls to the Rollout CRM API

Optional: Auto-reloading during development

If you installed the rerun gem (included in the Gemfile), you can start the server with automatic reloads on file changes:

bundle exec rerun -- ruby app.rb

Frontend (React + Vite)

cd frontend
npm install
npm install @rollout/link-react
npm run dev

Vite serves the app on http://127.0.0.1:5173 by default and proxies /api requests to the backend. You can override the proxy target by setting the BACKEND_URL environment variable when running Vite, or set VITE_API_BASE_URL to make the frontend call a different API URL directly.

The frontend fetches credentials directly from Rollout's universal API when booting; override VITE_ROLLOUT_CREDENTIALS_URL if you need to target a different environment.

Developing Together

1. Start the backend server (bundle exec ruby app.rb).
   • Ensure the environment variables ROLLOUT_CLIENT_ID and ROLLOUT_CLIENT_SECRET are set before launching.
   • Optionally override ROLLOUT_API_BASE_URL if you need to point at a different Rollout environment.
2. Start the frontend dev server (npm run dev).
3. Visit http://127.0.0.1:5173 in your browser. The frontend will request a token from /api/rollout/token, mount the Rollout Link UI (scoped to the Follow Up Boss Advanced connector), and let you create smart lists against the selected credential.

Feel free to expand the Sinatra routes and React components as you iterate on the smart list experience.