CloudCtrl Center

Multi-cloud management dashboard for monitoring AWS, Azure, and GCP resources in one place.

Built this as a learning project to understand how cloud provider APIs work and how to build a full-stack application with React and Node.js.

Features

Dashboard

• Unified overview of all cloud resources and costs
• Real-time data with auto-refresh
• Currency conversion (USD, EUR, GBP, INR, etc.)
• Dark/light theme support

AWS Integration

• Cost Explorer with daily/monthly breakdown
• EC2 instances (view, start, stop)
• S3 buckets
• Lambda functions
• RDS databases
• DynamoDB tables
• CloudFront distributions
• Route 53 zones
• API Gateway
• CloudWatch alarms
• CloudTrail logs
• VPCs

Azure Integration

• Virtual Machines (view, start, stop, deallocate)
• Storage Accounts
• Resource Groups
• SQL and PostgreSQL databases
• Cost Management

GCP Integration

• Compute Engine instances
• Cloud Storage buckets
• Cloud SQL instances
• Billing data

Security

• Client-side AES-GCM encryption for credentials using Web Crypto API
• Credentials never sent to backend unencrypted
• Google OAuth support

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for dev server and build
• Tailwind CSS for styling
• shadcn/ui components (Radix UI based)
• React Query for data fetching and caching
• Recharts for charts
• Framer Motion for animations
• React Router for navigation
• Zod for validation

Backend

• Node.js with Express
• TypeScript
• AWS SDK v3 (Cost Explorer, EC2, S3, Lambda, RDS, DynamoDB, CloudFront, Route 53, API Gateway, CloudWatch, CloudTrail)
• Azure SDK (@azure/identity, @azure/arm-compute, @azure/arm-storage, etc.)
• Google APIs (googleapis, google-auth-library)
• Prisma ORM
• JWT authentication
• Rate limiting with express-rate-limit
• Security headers with Helmet

Setup

git clone https://github.com/ashishkrshaw/multicloud-management-dashboard.git
cd multicloud-management-dashboard/cloudctrl-center

# Install frontend dependencies
npm install

# Install backend dependencies
npm install --prefix server

# Create environment file
cp server/.env.example server/.env

Edit server/.env with your credentials:

PORT=4000
NODE_ENV=development

# AWS
AWS_REGION=us-east-1
AWS_ACCESS_KEY_ID=your_key
AWS_SECRET_ACCESS_KEY=your_secret

# Azure (optional)
AZURE_TENANT_ID=your_tenant
AZURE_CLIENT_ID=your_client_id
AZURE_CLIENT_SECRET=your_secret
AZURE_SUBSCRIPTION_ID=your_subscription

# GCP (optional)
GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account.json

Running

# Terminal 1 - Frontend (port 8081)
npm run dev

# Terminal 2 - Backend (port 4000)
npm run server:dev

Open http://localhost:8081

Project Structure

cloudctrl-center/
├── src/                          # React frontend
│   ├── components/
│   │   ├── dashboard/            # MetricCard, CostChart, ResourceTable, UsageBreakdown
│   │   ├── credentials/          # CredentialsManager for storing cloud keys
│   │   ├── auth/                 # Login, AuthGuard
│   │   ├── assistant/            # AI assistant (experimental)
│   │   ├── layout/               # Header, navigation
│   │   └── ui/                   # shadcn components
│   ├── context/
│   │   ├── AuthContext.tsx       # Authentication state
│   │   ├── CredentialsContext.tsx # Encrypted credential storage
│   │   └── CurrencyContext.tsx   # Currency conversion
│   ├── hooks/
│   │   ├── use-aws-cost-summary.ts
│   │   ├── use-aws-ec2.ts
│   │   ├── use-aws-s3.ts
│   │   ├── use-aws-services.ts   # Lambda, RDS, DynamoDB, etc.
│   │   ├── use-azure-overview.ts
│   │   ├── use-gcp-overview.ts
│   │   └── use-unified-overview.ts
│   ├── pages/
│   │   ├── Index.tsx             # Main dashboard
│   │   ├── AwsPage.tsx           # AWS details (1200+ lines)
│   │   ├── AzurePage.tsx         # Azure details
│   │   └── GcpPage.tsx           # GCP details
│   └── lib/
│       ├── api.ts                # API client
│       └── crypto.ts             # AES-GCM encryption
│
└── server/                       # Express backend
    └── src/
        ├── index.ts              # Server setup, middleware
        ├── routes/
        │   ├── aws.ts            # /api/aws/*
        │   ├── azure.ts          # /api/azure/*
        │   ├── gcp.ts            # /api/gcp/*
        │   ├── overview.ts       # /api/overview
        │   ├── credentials.ts    # /api/credentials
        │   └── auth.ts           # /auth (OAuth)
        ├── services/
        │   ├── costExplorer.ts
        │   ├── ec2.ts
        │   ├── s3.ts
        │   ├── lambda.ts
        │   ├── rds.ts
        │   ├── dynamodb.ts
        │   ├── cloudfront.ts
        │   ├── route53.ts
        │   ├── apigateway.ts
        │   ├── cloudwatch.ts
        │   ├── cloudtrail.ts
        │   ├── vpc.ts
        │   ├── azure/
        │   └── gcp/
        └── middleware/
            ├── auth.ts
            └── security.ts

API Endpoints

GET  /api/health                    # Health check
GET  /api/aws/cost/summary          # Cost Explorer data
GET  /api/aws/ec2/instances         # EC2 list
POST /api/aws/ec2/start/:instanceId # Start EC2
POST /api/aws/ec2/stop/:instanceId  # Stop EC2
GET  /api/aws/s3/buckets            # S3 buckets
GET  /api/aws/lambda/functions      # Lambda functions
GET  /api/aws/rds/instances         # RDS databases
GET  /api/aws/dynamodb/tables       # DynamoDB tables
GET  /api/azure/overview            # Azure resources
GET  /api/gcp/overview              # GCP resources
GET  /api/overview/unified          # All providers combined

What I Learned

• Working with AWS SDK v3 and its modular structure
• Azure SDK authentication with service principals
• GCP authentication with service accounts
• React Query for caching and refetching
• Client-side encryption with Web Crypto API
• Building a proxy server to handle cloud API calls
• Vite proxy configuration for development

Known Issues

• Azure and GCP integrations require valid credentials to show real data
• AI assistant needs OpenAI API key
• Some AWS services may need specific IAM permissions

License

MIT

---

Built by Ashish Kumar Shaw - https://github.com/ashishkrshaw