Variant System Overview

What Are Variants?

World Monitor uses a variant system that packages the same codebase with different configurations, data sources, and UI themes to create specialized dashboards for different use cases:

Variant	Domain	Focus Area
World Monitor (full)	worldmonitor.app	Geopolitics, military, conflicts, infrastructure
Tech Monitor	tech.worldmonitor.app	Startups, AI/ML, cloud, cybersecurity
Finance Monitor	finance.worldmonitor.app	Global markets, trading, central banks, Gulf FDI
Happy Monitor	happy.worldmonitor.app	Good news, positive trends, uplifting stories

All four variants run from a single codebase — the build system configures features, data sources, and styling based on the VITE_VARIANT environment variable.

How Variants Work

Build-Time Configuration

Variants are configured at build time via the VITE_VARIANT environment variable in vite.config.ts:

vite.config.ts

const activeVariant = process.env.VITE_VARIANT || 'full';
const activeMeta = VARIANT_META[activeVariant] || VARIANT_META.full;

Each variant has metadata defining:

SEO metadata: title, description, keywords, Open Graph tags
URLs: canonical URL and live demo link
Categories: PWA manifest categories (e.g., ['news', 'productivity'])
Features: list of available features for the variant

Variant Metadata (vite.config.ts:40-144)

World Monitor (full)
Tech Monitor
Finance Monitor
Happy Monitor

{
  title: 'World Monitor - Real-Time Global Intelligence Dashboard',
  description: 'Real-time global intelligence dashboard with live news, markets, military tracking, infrastructure monitoring, and geopolitical data.',
  url: 'https://worldmonitor.app/',
  siteName: 'World Monitor',
  shortName: 'WorldMonitor',
  categories: ['news', 'productivity'],
  features: [
    'Real-time news aggregation',
    'Stock market tracking',
    'Military flight monitoring',
    'Ship AIS tracking',
    'Earthquake alerts',
    'Protest tracking',
    'Power outage monitoring',
    'Oil price analytics',
    'Government spending data',
    'Prediction markets',
    'Infrastructure monitoring',
    'Geopolitical intelligence',
  ]
}

{
  title: 'Tech Monitor - Real-Time AI & Tech Industry Dashboard',
  description: 'Real-time AI and tech industry dashboard tracking tech giants, AI labs, startup ecosystems, funding rounds, and tech events worldwide.',
  url: 'https://tech.worldmonitor.app/',
  siteName: 'Tech Monitor',
  shortName: 'TechMonitor',
  categories: ['news', 'business'],
  features: [
    'Tech news aggregation',
    'AI lab tracking',
    'Startup ecosystem mapping',
    'Tech HQ locations',
    'Conference & event calendar',
    'Cloud infrastructure monitoring',
    'Datacenter mapping',
    'Tech layoff tracking',
    'Funding round analytics',
    'Tech stock tracking',
    'Service status monitoring',
  ]
}

{
  title: 'Finance Monitor - Real-Time Markets & Trading Dashboard',
  description: 'Real-time finance and trading dashboard tracking global markets, stock exchanges, central banks, commodities, forex, crypto, and economic indicators worldwide.',
  url: 'https://finance.worldmonitor.app/',
  siteName: 'Finance Monitor',
  shortName: 'FinanceMonitor',
  categories: ['finance', 'news'],
  features: [
    'Real-time market data',
    'Stock exchange mapping',
    'Central bank monitoring',
    'Commodity price tracking',
    'Forex & currency news',
    'Crypto & digital assets',
    'Economic indicator alerts',
    'IPO & earnings tracking',
    'Financial center mapping',
    'Sector heatmap',
    'Market radar signals',
  ]
}

{
  title: 'Happy Monitor - Good News & Global Progress',
  description: 'Curated positive news, progress data, and uplifting stories from around the world.',
  url: 'https://happy.worldmonitor.app/',
  siteName: 'Happy Monitor',
  shortName: 'HappyMonitor',
  categories: ['news', 'lifestyle'],
  features: [
    'Curated positive news',
    'Global progress tracking',
    'Live humanity counters',
    'Science breakthrough feed',
    'Conservation tracker',
    'Renewable energy dashboard',
  ]
}

Switching Between Variants

In Production (Web)

Each variant is deployed to its own subdomain. The header bar displays clickable links to other variants:

🌍 World  |  💻 Tech  |  📈 Finance  |  ☀️ Good News

Clicking a variant link navigates to that variant’s live deployment:

worldmonitor.app → tech.worldmonitor.app
finance.worldmonitor.app → happy.worldmonitor.app

In Desktop App

The desktop app (Tauri) allows in-app variant switching without navigating to a different URL:

Click any variant in the header bar (🌍 World, 💻 Tech, 📈 Finance)
The app stores the selection in localStorage as worldmonitor-variant
On next reload, the app loads the selected variant

Code reference: src/config/variant.ts:1-12

export const SITE_VARIANT: string = (() => {
  const env = import.meta.env.VITE_VARIANT || 'full';
  // Build-time variant (non-full) takes priority — each deployment is variant-specific.
  // Only fall back to localStorage when env is 'full' (allows desktop app variant switching).
  if (env !== 'full') return env;
  if (typeof window !== 'undefined') {
    const stored = localStorage.getItem('worldmonitor-variant');
    if (stored === 'tech' || stored === 'full' || stored === 'finance' || stored === 'happy') return stored;
  }
  return env;
})();

In Development

Use npm scripts to launch specific variants:

World Monitor
Tech Monitor
Finance Monitor
Happy Monitor

npm run dev
# or explicitly:
npm run dev:full

npm run dev:tech

npm run dev:finance

npm run dev:happy

Building Variants

Production Builds

Each variant has its own build script in package.json:

World Monitor
Tech Monitor
Finance Monitor
Happy Monitor

npm run build:full
# Sets VITE_VARIANT=full

npm run build:tech
# Sets VITE_VARIANT=tech

npm run build:finance
# Sets VITE_VARIANT=finance

npm run build:happy
# Sets VITE_VARIANT=happy

Desktop Builds

Desktop apps are built with variant-specific Tauri configurations:

World Monitor
Tech Monitor
Finance Monitor

npm run desktop:build:full
# Uses src-tauri/tauri.conf.json

npm run desktop:build:tech
# Uses src-tauri/tauri.tech.conf.json

npm run desktop:build:finance
# Uses src-tauri/tauri.finance.conf.json

Variant-Specific Features

UI Theme Customization

The Happy Monitor variant uses a warm cream theme instead of the default dark theme:

src/styles/happy-theme.css:9-100

:root[data-variant="happy"],
:root[data-variant="happy"][data-theme="light"] {
  --bg: #FAFAF5;  /* Warm cream background */
  --text: #2c2c2c;
  --panel-bg: #ffffff;
  /* ... 90+ more color variable overrides */
}

The variant is detected via the data-variant attribute on the root element.

RSS Feed Selection

Each variant loads a curated set of RSS feeds:

World Monitor: 150+ geopolitical, defense, and energy feeds
Tech Monitor: 100+ tech news, AI labs, startup, and cybersecurity feeds
Finance Monitor: 120+ market news, trading, central bank, and economic feeds
Happy Monitor: 40+ positive news, science breakthrough, and conservation feeds

Code reference: RSS feed configuration is defined in variant-specific feed lists

Map Layers

Variants enable/disable map layers based on relevance:

Layer	World	Tech	Finance	Happy
Military bases	✅	❌	❌	❌
Nuclear facilities	✅	❌	❌	❌
Tech HQs	❌	✅	❌	❌
Datacenters	✅	✅	❌	❌
Stock exchanges	✅	❌	✅	❌
Central banks	❌	❌	✅	❌
Positive events	❌	❌	❌	✅

Analytics & Tracking

Variant switches are tracked for analytics:

src/services/analytics.ts:78,303

wm_variant_switched: new Set(['from', 'to']),

trackEventBeforeUnload('wm_variant_switched', { from, to });

This allows monitoring user preferences for variant selection.

Next Steps

World Monitor

Full geopolitical intelligence variant

Tech Monitor

AI & tech industry variant

Finance Monitor

Markets & trading variant

Happy Monitor

Positive news variant

Get Started

Core Features

Data & Intelligence

Variants

Configuration

Development

Deployment

What Are Variants?

How Variants Work

Build-Time Configuration

Variant Metadata (vite.config.ts:40-144)

Switching Between Variants

In Production (Web)

In Desktop App

In Development

Building Variants

Production Builds

Desktop Builds

Variant-Specific Features

UI Theme Customization

RSS Feed Selection

Map Layers

Analytics & Tracking

Next Steps

World Monitor

Tech Monitor

Finance Monitor

Happy Monitor

​What Are Variants?

​How Variants Work

​Build-Time Configuration

​Variant Metadata (vite.config.ts:40-144)

​Switching Between Variants

​In Production (Web)

​In Desktop App

​In Development

​Building Variants

​Production Builds

​Desktop Builds

​Variant-Specific Features

​UI Theme Customization

​RSS Feed Selection

​Map Layers

​Analytics & Tracking

​Next Steps

World Monitor

Tech Monitor

Finance Monitor

Happy Monitor

What Are Variants?

How Variants Work

Build-Time Configuration

Variant Metadata (vite.config.ts:40-144)

Switching Between Variants

In Production (Web)

In Desktop App

In Development

Building Variants

Production Builds

Desktop Builds

Variant-Specific Features

UI Theme Customization

RSS Feed Selection

Map Layers

Analytics & Tracking

Next Steps