MultiCloud Website

Minimal single-page website for the MultiCloud container orchestration platform with an integrated cloud server catalog.

Design

Inspired by Context7.com, this website features a clean, minimal design with:

• Simple header with logo and login
• Hero section with title
• Interactive catalog table showing cloud servers from AWS, GCP, and Azure

Tech Stack

• Frontend: React 19, Next.js 15.5, TypeScript
• Styling: Tailwind CSS v4
• Table: AG Grid React
• Authentication: NextAuth.js with Keycloak (OpenID Connect)
• Analytics: Google Analytics 4 with Consent Mode v2 (GDPR/CCPA compliant)
• Containerization: Docker
• Testing: React Testing Library, Playwright

Quick Start

1. Install Dependencies

npm install

2. Configure Environment

Create a .env.local file with your configuration:

# Example .env.local
MULTICLOUD_API_URL=https://catalog-api.multicloud.io/api/v1/catalog/servers
MULTICLOUD_API_KEY=your-api-key-here
AUTH_SECRET=your-auth-secret-here
NEXTAUTH_URL=http://localhost:3000
KEYCLOAK_CLIENT_ID=your-keycloak-client-id
KEYCLOAK_CLIENT_SECRET=your-keycloak-client-secret
KEYCLOAK_ISSUER=https://your-keycloak-domain/realms/your-realm

# Optional: Google Analytics 4 tracking
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Required configuration:

• MULTICLOUD_API_URL: URL to the MultiCloud catalog API (default: https://api.multicloud.io/api/v1/catalog/servers)
• MULTICLOUD_API_KEY: API key for catalog access (required)
• AUTH_SECRET: Generate with openssl rand -base64 32
• Keycloak credentials (for authentication)
• NEXT_PUBLIC_GA_MEASUREMENT_ID: Optional Google Analytics 4 measurement ID

3. Run Development Server

npm run dev

Visit http://localhost:3000

4. Build for Production

npm run build
npm start

Project Structure

website/
├── app/
│   ├── api/
│   │   ├── auth/[...nextauth]/  # NextAuth.js routes
│   │   └── catalog/             # Catalog API proxy
│   ├── layout.tsx               # Root layout with GA & cookies
│   ├── page.tsx                 # Homepage
│   └── globals.css              # Global styles
├── components/
│   ├── Header.tsx               # Simple header with login
│   ├── Hero.tsx                 # Title section
│   ├── CatalogTable.tsx         # AG Grid catalog table
│   ├── GoogleAnalytics.tsx      # GA4 integration
│   └── CookieConsent.tsx        # Cookie consent banner
├── lib/
│   └── auth.ts                  # NextAuth configuration
└── types/
    └── next-auth.d.ts           # TypeScript definitions

Catalog API

The website connects to the MultiCloud catalog API at https://api.multicloud.io to fetch server data.

API Endpoint

GET /api/v1/catalog/servers

Query parameters:

• page: Page number (default: 1)
• per_page: Items per page (default: 20, max: 100)
• provider: Filter by cloud provider (optional)
• region: Filter by region (optional)

Headers:

• X-API-Key: API key (if required)

Example request:

curl "https://api.multicloud.io/api/v1/catalog/servers?page=1&per_page=100" \
  -H "X-API-Key: your-api-key"

Example response:

{
  "data": [
    {
      "provider": "aws",
      "serverType": "t3.micro",
      "region": "us-east-1",
      "vcpus": 2,
      "memoryGb": 1,
      "pricePerHour": 0.0104,
      ...
    }
  ],
  "metadata": {
    "total_results": 1500,
    "page_size": 100,
    "current_page": 1
  }
}

Docker Deployment

Using Docker Compose (Recommended)

# Set the required environment variables
export MULTICLOUD_API_KEY=your-api-key-here

# Optional: Set Google Analytics 4 tracking ID
export NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

# Start the application
docker-compose up -d

# View logs
docker-compose logs -f

# Stop the application
docker-compose down

Using Docker directly

# Build the image
docker build -t multicloud-website .

# Run with environment variables
docker run -p 3000:3000 \
  -e MULTICLOUD_API_KEY=your-api-key-here \
  -e MULTICLOUD_API_URL=https://api.multicloud.io/api/v1/catalog/servers \
  -e NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX \
  multicloud-website

# Or use an environment file
docker run -p 3000:3000 --env-file .env.local multicloud-website

Environment Variables for Docker

You can set environment variables in several ways:

1. Environment file: Create .env.local with your configuration
2. Command line: Use -e flags when running docker run
3. Docker Compose: Set in docker-compose.yml or use environment variables from your shell

Testing

# Unit tests
npm test

# E2E tests
npm run test:e2e

Environment Variables

Variable	Description	Required	Default
MULTICLOUD_API_URL	MultiCloud catalog API URL	Yes	https://api.multicloud.io/api/v1/catalog/servers
MULTICLOUD_API_KEY	API key for catalog access	Yes	-
AUTH_SECRET	NextAuth secret key	Yes	-
NEXTAUTH_URL	Application URL	Yes	-
KEYCLOAK_CLIENT_ID	Keycloak client ID	Yes	-
KEYCLOAK_CLIENT_SECRET	Keycloak client secret	Yes	-
KEYCLOAK_ISSUER	Keycloak issuer URL	Yes	-
NEXT_PUBLIC_GA_MEASUREMENT_ID	Google Analytics 4 ID	No	-

Features

• ✅ Minimal, clean design inspired by Context7
• ✅ Real-time catalog data from MultiCloud API
• ✅ Sortable and filterable AG Grid table
• ✅ Keycloak authentication
• ✅ Google Analytics 4 with Consent Mode v2
• ✅ Privacy-first cookie consent (GDPR/CCPA compliant)
• ✅ Server-side rendering
• ✅ Docker containerization
• ✅ Type-safe with TypeScript

Google Analytics Implementation

The website implements Google Analytics 4 with Consent Mode v2, which provides:

• Tag Verification: The GA script loads immediately, allowing Google to verify the tag
• Privacy Compliance: No data is collected until the user accepts cookies
• GDPR/CCPA Compliant: Consent mode signals are sent to Google based on user preferences
• Cookie Consent Integration: Automatically updates consent when user accepts/declines cookies

How It Works

1. Default State: GA script loads with analytics_storage: denied
2. User Accepts Cookies: Consent mode updates to analytics_storage: granted and tracking begins
3. User Declines Cookies: Analytics remain denied, no data collection occurs
4. Persistent Consent: User preferences are saved in localStorage and respected across sessions

This approach ensures the GA tag is always present for verification while maintaining full privacy compliance.

License

Copyright © 2025 MultiCloud. All rights reserved.