TyloTech Hub
White-label client portal and internal command center. Built per the TyloTech Hub
product brief — a premium, dark, mobile-first SaaS that re-skins to each client's brand.
Notion-meets-Linear-meets-luxury-agency-portal. Gold & Black by default; every client
gets their own theme.
Tech stack
- Next.js 14 (App Router) + TypeScript + Tailwind CSS
- Supabase (Postgres, Auth, RLS, Realtime, Storage) — graceful mock fallback when unconfigured
- Anthropic Claude for AI tools — graceful demo fallback when unconfigured
- Recharts for charts, Framer Motion for interactions, lucide-react icons
Getting started
npm install
cp .env.example .env.local # optional — app runs on mock data without keys
npm run dev # http://localhost:3000
The app is fully demoable with zero config (mock data + AI demo mode). Add keys to
.env.local to switch to live Supabase + Claude with no code changes.
Screens (per brief)
| # | Screen | Route |
|---|
| 1 | Login (white-label aware) | /login |
| 2 | Client Dashboard (KPIs, charts, updates, projects) | /dashboard |
| 3 | Performance (trends, channels, exportable) | /performance |
| 4 | AI Tools (grid + locked/upgrade states) | /ai-tools |
| 4b | AI tool runner (Content Generator, Ad Copy) | /ai-tools/[slug] |
| 5 | Chat & Updates (realtime-ready + timeline) | /chat |
| 6 | Documents (filterable list) | /documents |
| 7 | Internal Hub (MRR, clients, team, pipeline) | /internal |
A floating "Message TyloTech" widget is available on every portal page.
White-label system
The killer feature. Each client stores { primary_color, secondary_color, logo_url, company_name }. At runtime ThemeProvider converts that into RGB-channel CSS variables
consumed by Tailwind, so the entire UI re-skins with zero component changes.
- Default: TyloTech Gold
#C9A84C / Black
- Demo themes: Nordic Estate (sky blue), Velform Fitness (rose)
- Try it live via the White-label switcher in the top bar.
Add a real client theme in src/lib/theme/themes.ts.
Backend
supabase/migrations/0001_init.sql — full schema + multi-tenant Row Level Security
(a client can never read another client's data; staff/admin see all).supabase/seed.sql — demo clients, AI tools, KPIs.src/lib/supabase/{client,server}.ts — SSR-safe clients, no-op when env is absent.
Scaling & reliability
How the app stays fast and correct as partners, users and data grow (Vercel = many
short-lived, stateless instances in fra1; Supabase Postgres = the one source of truth).
| Concern | Where | What |
|---|
| Stateless servers | src/lib/rate-limit.ts, migration 0044 | Rate limits live in a shared store — Upstash Redis if UPSTASH_REDIS_REST_* is set, otherwise Postgres (rate_limit_hit(), unlogged table). In-memory only as a fail-open fallback. |
| Asynchronism | src/lib/background.ts | Slow side effects run after the response (waitUntil): push + email delivery, message translation, step-assignment emails. The durable write (message, in-app notification) happens first. |
| Caching | listStaff() in src/lib/workflows.ts | Cache-aside with unstable_cache (5 min) + revalidateTag(STAFF_TAG) on team changes. Only data that is identical for every staff member is cached across requests — never anything tenant-specific. Translations are stored on the message (computed once). |
| Database | migrations 0042–0044 | Indexes for the hot paths (chat inbox, unread counts, search incl. translated text, leads per owner). Aggregation runs in SQL (chat_inbox()), not in the app. |
| Pagination | CHAT_PAGE in src/lib/data.ts | Chats load the newest 500 messages; older ones on demand. Mobile loads 100. |
| Retries | src/lib/http.ts | Calls to Meta, Google and Resend retry 429/5xx/network errors with exponential backoff + jitter; emails carry an idempotency key so a retry never sends twice. |
| Degradation | src/lib/ai/translate.ts | Translation falls through Google Cloud → free Google routes → Claude, with a cool-down for a provider that is throttled or out of credit. |
| Background jobs | vercel.json, pg_cron | Daily sync + monthly reports (Vercel Cron); response-time alerts every 15 min (pg_cron in Postgres). |
| Health | GET /api/health | 200 when the database answers within 3 s, else 503 — point an uptime monitor at it. |
| Security | RLS, next.config.mjs | Tenant isolation in Postgres (RLS); writes to sensitive tables only through API routes; security headers (frame, nosniff, permissions incl. microphone only for our own pages, COOP). |
AI tools
POST /api/ai/generate { tool, inputs, brand } — server-only Claude calls (key never
reaches the browser). Prompt templates live in src/lib/ai/prompts.ts, mirroring the
editable ai_tools.prompt_template DB column. Falls back to demo output without a key.
Model: claude-sonnet-4-20250514 (override via ANTHROPIC_MODEL).
Project structure
src/
app/
login/ # Screen 1
(portal)/ # Authed shell: dashboard, performance, ai-tools, chat, documents, internal
api/ai/generate/ # Claude endpoint
components/
ui/ charts/ layout/ theme/ chat/
lib/
theme/ supabase/ ai/ mock/ nav.ts status.ts utils.ts
types/
