AeThex Mission Control

Real-time infrastructure and analytics dashboard for monitoring AeThex Trinity (Foundation, Corporation, Labs) operations.

Features

4-Quadrant Dashboard

1. Infrastructure Health - Railway services, database status, uptime monitoring
2. Growth Signals - User metrics, Twitter engagement, signup trends
3. Development Velocity - GitHub commits, PRs, CI/CD status
4. Strategic Context - Revenue projections, partnerships, milestones

Auto-Refresh Intervals

• Infrastructure: 30 seconds
• Growth: 2 minutes
• Development: 3 minutes
• Strategic: 5 minutes

Quick Start

1. Install Dependencies

npm install

2. Environment Setup

cp .env.example .env

Edit .env with your actual credentials:

• RAILWAY_API_TOKEN - Get from Railway dashboard
• DATABASE_URL - Your PostgreSQL connection string
• GITHUB_TOKEN - Create at github.com/settings/tokens
• TWITTER_BEARER_TOKEN - Get from developer.twitter.com

3. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

4. Full-Screen on TV Laptop

Press F11 in your browser to enter full-screen mode.

Deployment to Railway

Option 1: Railway CLI

# Install Railway CLI
npm i -g @railway/cli

# Login
railway login

# Initialize project
railway init

# Add environment variables
railway variables set RAILWAY_API_TOKEN=xxx
railway variables set DATABASE_URL=xxx
# ... add all other variables

# Deploy
railway up

Option 2: GitHub Integration

1. Push to GitHub
2. Connect repo in Railway dashboard
3. Add environment variables in Railway UI
4. Deploy automatically on push

Railway Configuration

Create railway.json:

{
  "build": {
    "builder": "NIXPACKS"
  },
  "deploy": {
    "startCommand": "npm start",
    "restartPolicyType": "ON_FAILURE"
  }
}

Connecting Real Data

Infrastructure API (app/api/infrastructure/route.ts)

Railway Services:

const response = await fetch('https://backboard.railway.app/graphql/v2', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.RAILWAY_API_TOKEN}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: `{
      projects {
        edges {
          node {
            services {
              edges {
                node {
                  name
                  deployments(first: 1) {
                    edges {
                      node {
                        status
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }`
  })
});

Database Health:

import { Pool } from 'pg';

const pool = new Pool({ connectionString: process.env.DATABASE_URL });
const result = await pool.query('SELECT NOW()');

Growth API (app/api/growth/route.ts)

User Metrics:

import { Pool } from 'pg';

const pool = new Pool({ connectionString: process.env.DATABASE_URL });
const totalUsers = await pool.query('SELECT COUNT(*) FROM users');
const activeToday = await pool.query(
  'SELECT COUNT(*) FROM user_sessions WHERE last_active >= NOW() - INTERVAL \'24 hours\''
);

Twitter API:

const response = await fetch(
  'https://api.twitter.com/2/users/me?user.fields=public_metrics',
  {
    headers: { 'Authorization': `Bearer ${process.env.TWITTER_BEARER_TOKEN}` }
  }
);
const data = await response.json();
const followers = data.data.public_metrics.followers_count;

Development API (app/api/development/route.ts)

GitHub Commits:

const response = await fetch(
  `https://api.github.com/users/${process.env.GITHUB_USERNAME}/events`,
  {
    headers: {
      'Authorization': `token ${process.env.GITHUB_TOKEN}`,
      'Accept': 'application/vnd.github.v3+json'
    }
  }
);
const events = await response.json();
const commits = events.filter(e => e.type === 'PushEvent');

Strategic API (app/api/strategic/route.ts)

Store this data in your PostgreSQL database:

CREATE TABLE revenue_projections (
  id SERIAL PRIMARY KEY,
  conservative INTEGER,
  moderate INTEGER,
  aggressive INTEGER,
  current INTEGER,
  updated_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE partnerships (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255),
  status VARCHAR(50),
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE milestones (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255),
  deadline DATE,
  progress INTEGER,
  created_at TIMESTAMP DEFAULT NOW()
);

Customization

Changing Colors

Edit tailwind.config.js:

colors: {
  aethex: {
    primary: '#00D9FF',    // Change main accent
    secondary: '#7B2CBF',  // Change secondary
    dark: '#0A0E27',       // Change background
  },
}

Adjusting Refresh Rates

Edit refresh intervals in app/page.tsx:

useSWR('/api/infrastructure', fetcher, { 
  refreshInterval: 30000 // milliseconds
});

Adding New Metrics

1. Add type to types/index.ts
2. Create API route in app/api/
3. Add useSWR hook in app/page.tsx
4. Create UI component in quadrant

Tech Stack

• Next.js 14 - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS - Styling
• SWR - Data fetching with auto-refresh
• Recharts - Charts (if you add visualizations)
• Lucide React - Icons

Performance

• Server-side rendering for initial load
• Client-side data fetching with caching
• Automatic revalidation on focus
• Error boundaries for failed requests

Troubleshooting

Dashboard not updating:

• Check browser console for errors
• Verify API routes return valid JSON
• Check environment variables are set

Railway deployment fails:

• Ensure all dependencies in package.json
• Check build logs in Railway dashboard
• Verify start command is correct

API rate limits:

• Implement Redis caching
• Increase refresh intervals
• Use Railway cron jobs for expensive calls

Next Steps

1. Connect real Railway API
2. Add PostgreSQL queries
3. Integrate GitHub API
4. Set up Twitter API
5. Deploy to Railway
6. Configure custom domain
7. Add alert notifications (email/Slack)
8. Implement historical data charts

Support

For issues or questions about AeThex infrastructure, contact anderson@aethex.com