DEV Community: BinaryGarge.dev

RouteWise AI

BinaryGarge.dev — Sun, 26 Oct 2025 16:43:43 +0000

RouteWise AI - Auth0 for AI Agents Challenge Submission

This is a submission for the Auth0 for AI Agents Challenge

What I Built

RouteWise AI is an intelligent rideshare platform that revolutionizes the transportation experience through AI-powered agents that work seamlessly with Auth0 for AI Agents security. The platform addresses real-world challenges in ride-sharing by providing personalized, secure, and intelligent transportation services.

Core Problem Solved

Traditional rideshare platforms lack personalization and intelligent decision-making. RouteWise AI solves this by:

Intelligent Ride Matching: AI agents analyze passenger preferences and driver capabilities to optimize matches
Personalized Experience: AI agents curate music, climate, and conversation preferences for each ride
Safety Monitoring: Continuous AI-powered safety analysis throughout the journey
Secure Multi-Role Authentication: Role-based access control for passengers, drivers, and AI agents

Key Features

🤖 Multi-Agent AI System: Specialized AI agents for different aspects of the ride experience
🔐 Secure Authentication: Auth0 for AI Agents manages user authentication and agent permissions
🎵 Smart Personalization: AI agents access Spotify, weather, and maps APIs on user's behalf
📊 Real-time Analytics: AI agents monitor ride safety and performance metrics
🌍 Multi-Service Integration: Seamless integration with Google Maps, OpenAI, Spotify, and weather services

Demo

Live Application: https://routewise-ai.vercel.app

Demo Credentials:

Login: driver@sample.com / Driver1234

Repository: https://github.com/binarygaragedev/RouteWise

Screenshots

1. Authentication Flow

Secure multi-role authentication powered by Auth0 for AI Agents

2. Passenger Experience

Passenger can set detailed preferences that AI agents use for personalization

3. AI Agent Preferences

Comprehensive preference system where AI agents learn user behavior

4. Driver Interface

Drivers can view AI-generated insights about passenger preferences and ride optimization

5. AI Agent in Action

Real-time view of AI agents making decisions and accessing APIs securely

How I Used Auth0 for AI Agents

1. User Authentication Security

RouteWise implements Auth0's robust authentication to secure the humans interacting with the platform:

// Multi-role authentication setup
export const authConfig = {
  domain: process.env.AUTH0_ISSUER_BASE_URL,
  clientId: process.env.AUTH0_CLIENT_ID,
  clientSecret: process.env.AUTH0_CLIENT_SECRET,
  baseURL: process.env.AUTH0_BASE_URL,
  secret: process.env.AUTH0_SECRET
};

Role-Based Access Control:

Passengers: Access to booking, preferences, and ride history
Drivers: Access to ride assignments, passenger insights, and earnings
Admin: Full system access and AI agent management

2. Token Vault for API Access Control

The platform leverages Auth0's Token Vault to securely manage which APIs each AI agent can access:

// Token Vault integration for secure API access
class TokenVault {
  async getSecureToken(userId: string, service: string) {
    const response = await fetch(`${process.env.AUTH0_ISSUER_BASE_URL}/oauth/token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        client_id: process.env.AUTH0_MANAGEMENT_CLIENT_ID,
        client_secret: process.env.AUTH0_MANAGEMENT_CLIENT_SECRET,
        audience: process.env.AUTH0_AUDIENCE,
        grant_type: 'client_credentials'
      })
    });
    return response.json();
  }
}

Controlled API Access:

Spotify API: AI agents access music preferences only with user consent
Google Maps API: Location services restricted by user privacy settings
Weather API: Environmental data access for comfort optimization
OpenAI API: LLM access controlled by user interaction permissions

3. AI Agent Authorization Framework

Each AI agent operates within strict authorization boundaries:

Consent Negotiation Agent

export class ConsentNegotiationAgent extends BaseAgent {
  async negotiateAPIAccess(userId: string, requestedAPIs: string[]) {
    // Check user permissions through Auth0 Token Vault
    const permissions = await this.tokenVault.getUserPermissions(userId);

    // Only request access to APIs user has consented to
    const allowedAPIs = requestedAPIs.filter(api => 
      permissions.includes(api)
    );

    return this.createSecureAPISession(userId, allowedAPIs);
  }
}

Safety Monitoring Agent

export class SafetyMonitoringAgent extends BaseAgent {
  async monitorRide(rideId: string) {
    // Access location data only if user granted permission
    const hasLocationPermission = await this.checkPermission(
      rideId, 'location_monitoring'
    );

    if (hasLocationPermission) {
      return this.analyzeRideSafety(rideId);
    }
  }
}

4. Fine-Grained RAG Authorization

The platform implements authorization directly in the RAG pipeline:

// Authorized knowledge retrieval for AI agents
class AuthorizedRAG {
  async retrieveUserContext(userId: string, query: string) {
    // Check what user data the agent is authorized to access
    const dataPermissions = await this.auth0.getUserDataPermissions(userId);

    // Filter knowledge base by permissions
    const authorizedData = await this.vectorDB.query(query, {
      userId,
      permissions: dataPermissions,
      exclude: ['sensitive_personal_data', 'payment_info']
    });

    return authorizedData;
  }
}

5. Passenger Preference System

Passengers can set detailed preferences that AI agents use securely:

Music Preferences:

Spotify integration through Token Vault
Genre preferences (Jazz, Rock, Classical, etc.)
Energy level settings (Low, Medium, High)
Artist preferences with secure API access

Climate Preferences:

Preferred temperature settings
AC preferences (Auto, On, Off)
Weather-based adjustments through authorized weather API

Conversation Preferences:

Interaction levels (Silent, Minimal, Friendly, Chatty)
Topic preferences for AI agent conversations
Privacy boundaries for personal data sharing

6. Driver Insights Dashboard

Drivers receive AI-generated insights while respecting passenger privacy:

Authorized Information:

General comfort preferences (temperature, music genre)
Estimated ride duration and route optimization
Safety scores and trip analytics
Non-identifying preference patterns

Protected Information:

Specific personal details remain encrypted
Location history protected by Auth0 permissions
Payment information completely isolated

Lessons Learned and Takeaways

Technical Challenges and Solutions

1. Multi-Agent Coordination Security

Challenge: Managing multiple AI agents accessing different APIs securely
Solution: Implemented Auth0 Token Vault to create isolated permission scopes for each agent
Learning: Fine-grained permissions are crucial for AI agent security

2. Real-time Permission Management

Challenge: Users changing permissions while AI agents are active
Solution: Built reactive permission system that updates agent capabilities in real-time
Learning: Auth0's webhook system enables seamless permission updates

3. RAG Pipeline Authorization

Challenge: Ensuring AI agents only access authorized user data in vector databases
Solution: Implemented permission-based filtering at the vector query level
Learning: Security must be built into every layer of the AI pipeline

Key Insights

Authentication is Foundation, Not Afterthought
Building security with Auth0 for AI Agents from the start created a robust foundation. Retrofitting security would have been significantly more complex.

Token Vault Enables True AI Agent Autonomy
The Token Vault allows AI agents to work independently while maintaining strict security boundaries. This enables sophisticated automation while preserving user control.

User Trust Through Transparency
Showing users exactly what permissions each AI agent has builds trust. The preference system makes AI behavior predictable and user-controlled.

Performance vs Security Balance
Implementing proper authorization checks adds latency, but Auth0's optimized token management keeps the impact minimal while maintaining security.

Advice for Other Developers

Start with Security Architecture: Design your AI agent permissions before building features
Use Token Vault Early: Integrate the Token Vault pattern from the beginning rather than retrofitting
Implement Granular Permissions: Fine-grained control is essential for AI agent trust
Build Permission UI: Users need clear visibility into what AI agents can access
Test Edge Cases: Permission changes, expired tokens, and network failures need robust handling

Real-World Impact

RouteWise AI demonstrates how Auth0 for AI Agents solves critical real-world problems:

Transportation Safety: AI agents monitor rides while respecting privacy
Personalization at Scale: Secure access to user preferences enables mass customization
Service Integration: Multiple APIs work together through controlled agent access
User Empowerment: Users maintain control over their data while benefiting from AI automation

The platform proves that secure AI agent authentication isn't just possible—it's essential for building trust in AI-powered services that handle sensitive user data and real-world interactions.

Built with: Next.js 14, TypeScript, Auth0 for AI Agents, Supabase, OpenAI, Google Maps API, Spotify API, Vercel

Team: @binarygaragedev

The Deployment Trinity: Next.js + GCP + Pulumi

BinaryGarge.dev — Wed, 02 Apr 2025 21:27:27 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Fast Static Website Deployment

What I Built

I've created a guide documents that descirbe complete journey of setting up a Next.js static website and deploying it to Google Cloud Platform (GCP) using Pulumi for infrastructure as code. I've covered everything from initial setup to final deployment, sharing insights and best practices along the way.

Live Demo Link

https://storage.googleapis.com/my-awesome-site-dev-1743613395568-18d8d7c/index.html

Project Repo

https://github.com/binarygaragedev/pulumi

My Journey

Using Pulumi

This guide documents the complete journey of setting up a Next.js static website and deploying it to Google Cloud Platform (GCP) using Pulumi for infrastructure as code. I'll cover everything from initial setup to final deployment, sharing insights and best practices along the way.

Why Next.js and Pulumi?
Prerequisites
Setting Up the Development Environment
Creating a Next.js Project
Configuring Next.js for Static Export
Setting Up Pulumi
Writing the Pulumi Infrastructure Code
Deploying to Google Cloud
Setting Up a Custom Domain
Implementing CI/CD
Performance Optimization
Monitoring and Maintenance
Lessons Learned and Best Practices

Why Next.js and Pulumi?

Next.js

I chose Next.js for this project because it offers:

Static Site Generation (SSG): Perfect for content-focused websites
Performance optimization: Built-in image optimization and code splitting
Developer experience: Hot reloading, TypeScript support, and intuitive routing
Scalability: Easy to grow from a simple static site to a more complex application if needed

Pulumi

Pulumi is my infrastructure as code tool of choice because:

Native language support: Write infrastructure code in TypeScript/JavaScript (matching our frontend)
Immutable infrastructure: Ensures consistent environments
Easy integration with CI/CD: Automates deployments
State management: Tracks infrastructure changes over time
Multi-cloud support: If we decide to change cloud providers later, the transition will be easier

Prerequisites

Before starting, ensure you have the following:

Node.js (v14.x or later)
npm or yarn
Google Cloud Platform account
Pulumi CLI
Google Cloud SDK (gcloud CLI)
A code editor (VS Code recommended)

Setting Up the Development Environment

First, we need to prepare development environment:

# Install Node.js and npm if not already installed
# On macOS with Homebrew:
brew install node

# On Windows with Chocolatey:
choco install nodejs

# On Ubuntu/Debian:
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

# Install Pulumi CLI
# On macOS with Homebrew:
brew install pulumi

# On Windows with Chocolatey:
choco install pulumi

# On Linux:
curl -fsSL https://get.pulumi.com | sh

# Install Google Cloud SDK
# Follow instructions at: https://cloud.google.com/sdk/docs/install

# Verify installations
node --version
npm --version
pulumi version
gcloud --version

Creating a Next.js Project

Now lets create a new Next.js project:

# Create a new Next.js app
npx create-next-app@latest my-awesome-site
cd my-awesome-site

# Install dependencies for static site
npm install --save-dev prettier

Add some essential files to the project:

# Create a .prettierrc file for consistent code formatting
echo '{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}' > .prettierrc

Configuring Next.js for Static Export

Next, we will configure the Next.js project for static site generation:

Update next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: 'export',
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
}

export default nextConfig

Create my static site awesome content in pages/index.js:

export default function Home() {
  return (
    <div>
      <style jsx global>{`
        :root {
            --primary: #4f46e5;
            --primary-dark: #4338ca;
            --secondary: #06b6d4;
            --dark: #1e293b;
            --light: #f8fafc;
            --accent: #f97316;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 80%);
            transform: rotate(-15deg);
        }

        .header-content {
            position: relative;
            z-index: 2;
            padding: 4rem 0;
            text-align: center;
        }

        h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            background: linear-gradient(90deg, white, #c7d2fe);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .sub-heading {
            font-size: 1.5rem;
            max-width: 600px;
            margin: 0 auto 2rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .cta-button {
            display: inline-block;
            padding: 1rem 2.5rem;
            background-color: var(--accent);
            color: white;
            font-weight: 600;
            font-size: 1.1rem;
            text-decoration: none;
            border-radius: 50px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            background-color: #ea580c;
        }

        .features {
            padding: 5rem 0;
            background-color: white;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 4rem;
            color: var(--dark);
            font-weight: 700;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
        }

        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            border-color: rgba(79, 70, 229, 0.2);
        }

        .feature-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            font-size: 1.8rem;
            border-radius: 20px;
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
        }

        .feature-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            font-weight: 600;
            color: var(--dark);
        }

        .how-it-works {
            padding: 5rem 0;
            background-color: #f1f5f9;
        }

        .timeline {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 4px;
            background: linear-gradient(to bottom, var(--primary), var(--secondary));
            transform: translateX(-50%);
            border-radius: 2px;
        }

        .timeline-item {
            display: flex;
            justify-content: center;
            padding: 3rem 0;
            position: relative;
        }

        .timeline-content {
            width: 45%;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            position: relative;
        }

        .timeline-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        .timeline-content::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            background: white;
            transform: rotate(45deg) translateY(-50%);
        }

        .timeline-item:nth-child(odd) .timeline-content::after {
            right: -10px;
        }

        .timeline-item:nth-child(even) .timeline-content::after {
            left: -10px;
        }

        .timeline-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .timeline-dot i {
            color: var(--primary);
            font-size: 1.2rem;
        }

        .timeline-step {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--primary);
        }

        .get-started {
            padding: 5rem 0;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            color: white;
            text-align: center;
        }

        .get-started h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }

        .get-started p {
            max-width: 600px;
            margin: 0 auto 2rem;
            font-size: 1.2rem;
            opacity: 0.9;
        }

        footer {
            background-color: var(--dark);
            color: white;
            padding: 3rem 0;
            text-align: center;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background-color: var(--primary);
            transform: translateY(-3px);
        }

        .copyright {
            opacity: 0.7;
            font-size: 0.9rem;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animated {
            animation: fadeIn 0.8s ease forwards;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }

            .sub-heading {
                font-size: 1.2rem;
            }

            .timeline::before {
                left: 30px;
            }

            .timeline-item {
                flex-direction: row !important;
                justify-content: flex-start;
            }

            .timeline-content {
                width: calc(100% - 80px);
                margin-left: 80px;
            }

            .timeline-item:nth-child(odd) .timeline-content::after,
            .timeline-item:nth-child(even) .timeline-content::after {
                left: -10px;
                right: auto;
            }

            .timeline-dot {
                left: 30px;
            }
        }
      `}</style>

      <header>
        <div className="container">
          <div className="header-content animated">
            <h1>Next.js + GCP + Pulumi</h1>
            <p className="sub-heading">The ultimate stack for building and deploying lightning-fast static websites</p>
            <a href="https://github.com/binarygaragedev/pulumi" className="cta-button">Get Started Now</a>
          </div>
        </div>
      </header>

      <section className="features">
        <div className="container">
          <h2 className="section-title">Why Choose Next.js + GCP + Pulumi?</h2>
          <div className="features-grid">
            <div className="feature-card animated" style={{animationDelay: "0.1s"}}>
              <div className="feature-icon">
                <i className="fab fa-react"></i>
              </div>
              <h3 className="feature-title">Next.js Power</h3>
              <p>Build with React, benefit from SSG, image optimization, and the best developer experience.</p>
            </div>

            <div className="feature-card animated" style={{animationDelay: "0.2s"}}>
              <div className="feature-icon">
                <i className="fas fa-cloud"></i>
              </div>
              <h3 className="feature-title">GCP Infrastructure</h3>
              <p>Google Cloud Platform provides enterprise-grade reliability, scalability, and global reach.</p>
            </div>

            <div className="feature-card animated" style={{animationDelay: "0.3s"}}>
              <div className="feature-icon">
                <i className="fas fa-code-branch"></i>
              </div>
              <h3 className="feature-title">Pulumi IaC</h3>
              <p>Infrastructure as Code in your favorite language, making deployments reproducible and versioned.</p>
            </div>

            <div className="feature-card animated" style={{animationDelay: "0.4s"}}>
              <div className="feature-icon">
                <i className="fas fa-globe"></i>
              </div>
              <h3 className="feature-title">Global CDN</h3>
              <p>GCP&apos;s Cloud CDN delivers your Next.js static content at blazing speeds worldwide.</p>
            </div>

            <div className="feature-card animated" style={{animationDelay: "0.5s"}}>
              <div className="feature-icon">
                <i className="fas fa-lock"></i>
              </div>
              <h3 className="feature-title">Enterprise Security</h3>
              <p>Benefit from Google&apos;s world-class security infrastructure and compliance certifications.</p>
            </div>

            <div className="feature-card animated" style={{animationDelay: "0.6s"}}>
              <div className="feature-icon">
                <i className="fas fa-tachometer-alt"></i>
              </div>
              <h3 className="feature-title">Performance Optimized</h3>
              <p>Next.js&apos;s optimizations combined with GCP&apos;s infrastructure deliver sub-second page loads.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="how-it-works">
        <div className="container">
          <h2 className="section-title">How It Works</h2>
          <div className="timeline">
            <div className="timeline-item">
              <div className="timeline-content animated">
                <h3 className="timeline-step">Step 1</h3>
                <p>Create your Next.js project and build stunning static pages with React components.</p>
              </div>
              <div className="timeline-dot">
                <i className="fab fa-react"></i>
              </div>
            </div>

            <div className="timeline-item">
              <div className="timeline-content animated" style={{animationDelay: "0.2s"}}>
                <h3 className="timeline-step">Step 2</h3>
                <p>Set up your Google Cloud Platform project and configure your cloud resources.</p>
              </div>
              <div className="timeline-dot">
                <i className="fas fa-cloud"></i>
              </div>
            </div>

            <div className="timeline-item">
              <div className="timeline-content animated" style={{animationDelay: "0.4s"}}>
                <h3 className="timeline-step">Step 3</h3>
                <p>Define your infrastructure as code with Pulumi using TypeScript, JavaScript, or Python.</p>
              </div>
              <div className="timeline-dot">
                <i className="fas fa-code-branch"></i>
              </div>
            </div>

            <div className="timeline-item">
              <div className="timeline-content animated" style={{animationDelay: "0.6s"}}>
                <h3 className="timeline-step">Step 4</h3>
                <p>Deploy with a single command: &quot;pulumi up&quot; and watch your site go live on GCP in minutes.</p>
              </div>
              <div className="timeline-dot">
                <i className="fas fa-rocket"></i>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="get-started" id="get-started">
        <div className="container">
          <h2>Ready to Build with Next.js + GCP + Pulumi?</h2>
          <p>Join forward-thinking teams leveraging this powerful stack for lightning-fast static websites with enterprise reliability.</p>
          <a href="https://github.com/binarygaragedev/pulumi" className="cta-button">Start Your Next.js Project</a>
        </div>
      </section>

      <footer>
        <div className="container">
          <div className="social-links">
            <a href="#"><i className="fab fa-github"></i></a>
            <a href="#"><i className="fab fa-twitter"></i></a>
            <a href="#"><i className="fab fa-linkedin"></i></a>
            <a href="#"><i className="fab fa-youtube"></i></a>
          </div>

          <p className="copyright">© 2025 Fast Static Website Deployment. All rights reserved.</p>
        </div>
      </footer>

      <script dangerouslySetInnerHTML={{
        __html: `
          // Simple animation on scroll
          document.addEventListener('DOMContentLoaded', () => {
            const observer = new IntersectionObserver((entries) => {
              entries.forEach(entry => {
                if (entry.isIntersecting) {
                  entry.target.style.opacity = 1;
                  entry.target.style.transform = 'translateY(0)';
                }
              });
            }, { threshold: 0.1 });

            document.querySelectorAll('.animated').forEach(el => {
              el.style.opacity = 0;
              el.style.transform = 'translateY(20px)';
              el.style.transition = 'all 0.6s ease';
              observer.observe(el);
            });
          });
        `
      }} />
    </div>
  );
}

Test the static export:

# Build and export the static site
npm run build

# This will generate a folder named 'out' with the static files

Setting Up Pulumi

Now lets set up Pulumi for infrastructure as code:

# Create a new Pulumi project
mkdir -p infra
cd infra
pulumi new gcp-typescript

# This will prompt for:
# - Project name: my-awesome-site-infra
# - Project description: Infrastructure for my static site
# - Stack name: dev (for development environment)
# - GCP Project ID: your-gcp-project-id
# - GCP Region: us-central1 (or your preferred region)

Configure Google Cloud authentication:

# Log in to Google Cloud
gcloud auth login

# Set the active project
gcloud config set project your-gcp-project-id

# Create application default credentials
gcloud auth application-default login

Writing the Pulumi Infrastructure Code

Now update the index.ts file created by Pulumi to define our infrastructure:

import * as pulumi from "@pulumi/pulumi";
import * as gcp from "@pulumi/gcp";

// Get configuration
const config = new pulumi.Config();
const projectName = config.require("projectName") || "my-awesome-site";
const stackName = pulumi.getStack();

// Create a unique storage bucket name
const bucketName = `${projectName}-${stackName}-${Date.now()}`;

// Create a storage bucket for our static website
const bucket = new gcp.storage.Bucket(bucketName, {
  location: "US",
  website: {
    mainPageSuffix: "index.html",
    notFoundPage: "404.html",
  },
  uniformBucketLevelAccess: true,
  forceDestroy: true,
});

// Make the bucket publicly readable
const bucketIAMBinding = new gcp.storage.BucketIAMBinding("bucket-iam-binding", {
  bucket: bucket.name,
  role: "roles/storage.objectViewer",
  members: ["allUsers"],
});

// Create a backend bucket for the load balancer
const backendBucket = new gcp.compute.BackendBucket("backend-bucket", {
  bucketName: bucket.name,
  enableCdn: true,
});

// Reserve a static IP address
const staticIp = new gcp.compute.GlobalAddress("static-ip", {});

// Create a URL map
const urlMap = new gcp.compute.URLMap("url-map", {
  defaultService: backendBucket.selfLink,
});

// Create an HTTPS certificate (we'll use a self-signed one for demo purposes)
// In production, you should use a managed certificate or your own certificate
const sslCertificate = new gcp.compute.ManagedSslCertificate("ssl-certificate", {
  managed: {
    domains: [`${projectName}.example.com`], // Replace with your domain
  },
});

// Create a target HTTPS proxy
const targetHttpsProxy = new gcp.compute.TargetHttpsProxy("target-https-proxy", {
  urlMap: urlMap.selfLink,
  sslCertificates: [sslCertificate.selfLink],
});

// Create a global forwarding rule for HTTPS
const httpsForwardingRule = new gcp.compute.GlobalForwardingRule("https-forwarding-rule", {
  target: targetHttpsProxy.selfLink,
  portRange: "443",
  ipAddress: staticIp.address,
  loadBalancingScheme: "EXTERNAL",
});

// Create a target HTTP proxy for redirecting HTTP to HTTPS
const targetHttpProxy = new gcp.compute.TargetHttpProxy("target-http-proxy", {
  urlMap: urlMap.selfLink,
});

// Create a global forwarding rule for HTTP
const httpForwardingRule = new gcp.compute.GlobalForwardingRule("http-forwarding-rule", {
  target: targetHttpProxy.selfLink,
  portRange: "80",
  ipAddress: staticIp.address,
  loadBalancingScheme: "EXTERNAL",
});

// Export the bucket name and website URL
export const websiteBucket = bucket.name;
export const websiteUrl = pulumi.interpolate`https://${staticIp.address}`;
export const bucketWebsiteUrl = bucket.websiteEndpoint;

Next we need to create a script to upload the static site to the bucket after deployment:

// Create this as upload.ts in the infra directory
import * as pulumi from "@pulumi/pulumi";
import * as gcp from "@pulumi/gcp";
import * as fs from "fs";
import * as path from "path";
import * as mime from "mime";

// Get outputs from the main stack
const stack = new pulumi.StackReference(`${pulumi.organization}/${pulumi.project}/${pulumi.getStack()}`);
const bucketName = stack.getOutput("websiteBucket");

// Function to upload files recursively
async function uploadDirectory(bucketName: string, directoryPath: string, prefix: string = "") {
  const files = fs.readdirSync(directoryPath);

  for (const file of files) {
    const filePath = path.join(directoryPath, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      await uploadDirectory(bucketName, filePath, path.join(prefix, file));
    } else {
      const objectName = path.join(prefix, file);
      const contentType = mime.getType(filePath) || "application/octet-stream";

      new gcp.storage.BucketObject(objectName, {
        bucket: bucketName,
        source: new pulumi.asset.FileAsset(filePath),
        name: objectName,
        contentType: contentType,
        cacheControl: "public, max-age=3600", // 1 hour cache
      });

      console.log(`Uploaded: ${objectName}`);
    }
  }
}

// Path to the Next.js static export directory (relative to this script)
const staticSitePath = "../out";

// Upload the static site to the bucket
bucketName.apply(async (name) => {
  if (name) {
    console.log(`Uploading static site to bucket: ${name}`);
    await uploadDirectory(name, staticSitePath);
  }
});

Deploying to Google Cloud

Now we are ready to deploy the infrastructure and the static site:

# Install required dependencies for the upload script
cd infra
npm install --save mime @types/mime

# Preview the infrastructure changes
pulumi preview

# Deploy the infrastructure
pulumi up

# After successful deployment, run the upload script
npx ts-node upload.ts

Optional steps

Setting Up a Custom Domain

To use a custom domain with our static site:

Get the IP address from Pulumi outputs:

pulumi stack output staticIpAddress

Add DNS records for the domain:
- Create an A record pointing the domain to the static IP
- Create a CNAME record for www subdomain
Update the SSL certificate in the Pulumi code to use the actual domain name.

Implementing CI/CD

For continuous deployment, we can set up a GitHub Actions workflow:

# Create this file as .github/workflows/deploy.yml
name: Deploy Static Site

on:
  push:
    branches: [ master ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm ci

      - name: Build static site
        run: npm run build

      - name: Setup Pulumi
        uses: pulumi/actions@v3
        with:
          command: preview
          stack-name: dev
          comment-on-pr: true
          github-token: ${{ secrets.GITHUB_TOKEN }}
        env:
          PULUMI_ACCESS_TOKEN: ${{ secrets.PULUMI_ACCESS_TOKEN }}
          GOOGLE_CREDENTIALS: ${{ secrets.GOOGLE_CREDENTIALS }}

      - name: Deploy infrastructure
        uses: pulumi/actions@v3
        with:
          command: up
          stack-name: dev
          github-token: ${{ secrets.GITHUB_TOKEN }}
        env:
          PULUMI_ACCESS_TOKEN: ${{ secrets.PULUMI_ACCESS_TOKEN }}
          GOOGLE_CREDENTIALS: ${{ secrets.GOOGLE_CREDENTIALS }}

      - name: Upload static site
        run: cd infra && npx ts-node upload.ts
        env:
          PULUMI_ACCESS_TOKEN: ${{ secrets.PULUMI_ACCESS_TOKEN }}
          GOOGLE_CREDENTIALS: ${{ secrets.GOOGLE_CREDENTIALS }}

Performance Optimization

To optimize the performance of our static site:

Enable compression and caching in the Pulumi code:

// Update the BucketObject creation in upload.ts
new gcp.storage.BucketObject(objectName, {
  bucket: bucketName,
  source: new pulumi.asset.FileAsset(filePath),
  name: objectName,
  contentType: contentType,
  cacheControl: "public, max-age=86400", // 24 hour cache for static assets
});

// Use a different cache policy for HTML files
if (contentType === "text/html") {
  objectArgs.cacheControl = "public, max-age=3600"; // 1 hour cache for HTML
}

Add a Content-Security-Policy header for better security:

// Add this to the bucket object creation
metadata: {
  "Content-Security-Policy": "default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline';"
}

Monitoring and Maintenance

For monitoring the deployed site:

Set up Google Cloud Monitoring:

// Add this to index.ts
const alertPolicy = new gcp.monitoring.AlertPolicy("error-alert-policy", {
  displayName: "HTTP 5xx Error Rate",
  conditions: [{
    displayName: "HTTP 5xx Error Rate",
    conditionThreshold: {
      filter: `resource.type="https_lb_rule" AND resource.labels.url_map_name="${urlMap.name}" AND metric.type="loadbalancing.googleapis.com/https/request_count" AND metric.labels.response_code_class="500"`,
      aggregations: [{
        alignmentPeriod: "60s",
        perSeriesAligner: "ALIGN_RATE",
        crossSeriesReducer: "REDUCE_SUM",
      }],
      comparison: "COMPARISON_GT",
      thresholdValue: 0.01,
      duration: "60s",
    },
  }],
  alertStrategy: {
    autoClose: "604800s",
  },
  notificationChannels: [
    // Add your notification channels here
  ],
});

Set up logging and regular maintenance tasks:

// Add this to index.ts to enable logging
const logBucket = new gcp.logging.LogBucket("log-bucket", {
  location: "global",
  retentionDays: 30,
});

const logSink = new gcp.logging.ProjectSink("log-sink", {
  destination: pulumi.interpolate`logging.googleapis.com/projects/${gcp.config.project}/locations/global/buckets/${logBucket.name}`,
  filter: `resource.type="http_load_balancer" AND resource.labels.url_map_name="${urlMap.name}"`,
  uniqueWriterIdentity: true,
});

Lessons Learned and Best Practices

After completing this deployment journey, here are the key learnings and best practices:

Infrastructure as Code

Keep configuration separate: Store environment-specific values in Pulumi config
Use stack references: They allow separating infrastructure into manageable pieces
Version everything: Infrastructure code should be versioned alongside application code

Security

Use HTTPS exclusively: Always redirect HTTP to HTTPS
Implement CSP headers: Protect against XSS and other injection attacks
Regular updates: Keep all dependencies up to date

Performance

CDN caching: Enable Cloud CDN for edge caching
Proper cache headers: Different cache policies for different content types
Image optimization: Use Next.js built-in image optimization

Maintainability

Documentation: Comment code and maintain a README
CI/CD automation: Automate all deployment steps
Monitoring and alerts: Set up alerts for critical issues

Cost Optimization

Right-sizing: Use appropriate instance types for your traffic
Budget alerts: Set up billing alerts to avoid surprises
Clean up unused resources: Regularly audit and remove unused resources

Conclusion

This journey has taken me from a simple Next.js project to a fully deployed, optimized, and monitored static website on Google Cloud Platform using Pulumi for infrastructure as code. While there's always room for improvement, this architecture provides a solid foundation for a high-performance, secure, and maintainable static website.

For larger sites or more complex requirements, consider these potential next steps:

Implementing A/B testing capabilities
Setting up feature flags
Adding a headless CMS integration
Implementing security scanning in the CI/CD pipeline
Adding automated testing for infrastructure code

Blockchain Insight Hub: Visualizing the Digital Ledger Universe

BinaryGarge.dev — Tue, 18 Mar 2025 21:02:32 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I developed a Blockchain Transaction Visualizer that allows users to explore and analyze transaction data across multiple blockchain networks (Bitcoin, Ethereum, Cardano, and Solana). This interactive dashboard provides insights into transaction trends, block sizes, and network activities using various visualizations and interactive elements.
The application features a clean, user-friendly interface with multiple tabs for different functionalities:

Transaction Explorer for viewing and sorting transaction data
Transaction Metrics for analyzing trends and distributions
Address Tracker for monitoring specific wallet addresses
Learn Blockchain for educational content about blockchain technology

Each section leverages KendoReact components to create an intuitive, responsive user experience that helps both blockchain newcomers and experienced users gain insights from transaction data.

Demo

https://blockchain-transaction-visualizer.vercel.app/

Screenshots:

GitHub Repository:
https://github.com/binarygaragedev/BlockchainTransactionVisualizer

KendoReact Experience

My Blockchain Transaction Visualizer makes extensive use of KendoReact Free Components, incorporating 10 of the free components available:

Grid: Powers the transaction list with sorting, filtering, and pagination capabilities
Button: Used throughout the app for actions like refreshing data and viewing transaction details
DropDownList: Implemented for blockchain network selection
DatePicker: Allows users to select date ranges for transaction filtering
TabStrip: Organizes the application into logical sections for better UX
Dialog: Displays detailed transaction information in a modal overlay
Notification: Provides feedback on user actions and system events
Form: Handles user input for the address tracking feature
Label: Provides accessible text labels for form controls
Tooltip: Offers contextual help and explanations for blockchain concepts

The integration of these components was seamless, and I was particularly impressed with the Grid component's capabilities for displaying and manipulating transaction data. The components worked together harmoniously to create a cohesive user experience.

Agent AI as you personal gym trainer

BinaryGarge.dev — Tue, 21 Jan 2025 21:39:21 +0000

This is a submission for the Agent.ai Challenge: Full-Stack Agent (See Details)
It also apply to Challenge Assembly of Agents.

What I Built

I've crated intelligent fitness ecosystem that leverages artificial intelligence to create and deliver personalized workout experiences. The system consists of three interconnected AI agents, each serving a specific purpose in the user's fitness journey.

Core Workout Planning Agent

The primary AI agent analyzes user-provided data to create customized workout plans. This agent considers various factors including:
Personal fitness goals
Current fitness level
Time constraints

The agent processes this information to generate workout plans that are both challenging and achievable, adapting to the user's progress over time. The agent send a weekly plan to user email. It use google spreedsheet to store all needed data.

Weekly Plan Distribution Agent

This automated agent manages the delivery of workout plans to users on a weekly basis. This agent use previously sotred in google spreedsheet data to generate and sent weekly report. This agent has been scheduled weekly, it shouldn't be run manually.

Daily Motivation Agent

The third AI agent focuses on maintaining user engagement through daily motivational communications including:
Personalized motivational messages
Daily fitness tips and reminders
Recovery and wellness recommendations
This agent has been scheduled daily, it shouldn't be run manually.

Demo

https://agent.ai/agent/gym-plan-generator
https://agent.ai/agent/daily-motivator
https://agent.ai/agent/weekly-plan

Video:

https://vimeo.com/1048619319/9cb5407383

Agent.ai Experience

My experience with Builder and AI Agents has been fantastic. The platform made creating AI agents surprisingly accessible and straightforward, which I really appreciated as someone exploring this technology.
What delighted me most was how intuitive the process felt - the platform enabled me to create an AI agent without getting overwhelmed by technical complexities. The available video tutorials and supportive community were valuable resources throughout my journey.
One specific improvment that I would suggest is string variable manipulation - while this can be accomplished through ChatGPT, having native string manipulation capabilities within Builder would enhance both performance and cost-efficiency. Additionally, while the existing resources are helpful, having more detailed tutorials covering advanced topics would be beneficial for users looking to build more sophisticated agents.
To summarize, I absolutely loved the overall experience. This was my first time creating an AI agent, and the positive experience has definitely motivated me to create more in the future. The platform's approachability and functionality have convinced me that this won't be my last venture into AI agent development.

SkyGreen: Your Flight's Carbon Footprint Calculator

BinaryGarge.dev — Sat, 11 Jan 2025 20:18:30 +0000

This is a submission for the GitHub Copilot Challenge : Fresh Starts

What I Built

SkyGreen is a web application that empowers users to calculate and understand the carbon footprint of their flights. By providing flight details such as origin, destination, number of passengers, cabin class, and aircraft type, users can quickly estimate the CO2 emissions associated with their travel.

Demo

https://flight-carbon-calculator.onrender.com/

Repo

https://github.com/binarygaragedev/fcc

Copilot Experience

I leveraged Copilot's AI-powered code completion and generation capabilities extensively while building SkyGreen. Some key ways Copilot assisted me:

Code Autocomplete:

As I started typing code, Copilot provided intelligent autocomplete suggestions based on the context. This saved time and reduced typos.
It accurately suggested variable names, function calls, and commonly used patterns, maintaining consistency with my coding style.

Generating Code Snippets:

When I needed to implement certain functionalities, I provided Copilot with concise natural language descriptions or comments.
Copilot generated relevant code snippets based on my prompts, often providing multiple variations to choose from.
For example, when creating the flight distance calculation, I described the Haversine formula and Copilot generated the corresponding JavaScript implementation.

Editing and Refactoring:

Copilot assisted in editing and refactoring code by suggesting improvements and optimizations.
It identified potential bugs, security vulnerabilities, and performance issues, providing fixes and best practices.
When I needed to update the UI components, Copilot offered suggestions to streamline the JSX code and apply appropriate styling classes.

Contextual Understanding:

Copilot demonstrated strong contextual understanding of the project's requirements and dependencies.
It provided recommendations that aligned with the React framework, Tailwind CSS utility classes, and the data structures used in the app.
Copilot's suggestions took into account the existing code base, ensuring consistency and compatibility.

Chat and Collaboration:

I engaged in conversations with Copilot using natural language to discuss implementation approaches, clarify requirements, and brainstorm ideas.
Copilot provided thoughtful responses, code examples, and explanations to guide me in making informed decisions.
It acted as a knowledgeable coding assistant, offering insights and best practices throughout the development process.

Data Gathering for Aircrafts and Airports:

Copilot played a crucial role in gathering data about various aircraft types and airports worldwide.
When I needed information about specific aircraft models, Copilot provided detailed data such as emission factors, seating configurations, and fuel efficiency.
It assisted in compiling a comprehensive list of airports, including their IATA codes, cities, countries, and geographical coordinates.
Copilot's vast knowledge base and ability to retrieve relevant information greatly simplified the process of collecting and integrating accurate data into the SkyGreen app.

UI/UX design

As a backend developer, designing user interfaces has always been a challenge for me. However, GitHub Copilot's AI-powered code generation capabilities revolutionized my workflow and made UI development a breeze. With Copilot, I could simply describe how I wanted the user interface to look and function using natural language, and it would generate the corresponding code for me. For example, when I needed a form for users to input their flight details, I described the layout, input fields, and styling preferences to Copilot. It then generated clean and semantic HTML markup, complete with Tailwind CSS utility classes for styling. Copilot's ability to understand my natural language descriptions and translate them into functional UI components saved me countless hours of struggling with frontend code. It allowed me to focus on the backend logic and data processing while still delivering a polished and user-friendly interface. Copilot's assistance in UI development was a game-changer, empowering me as a backend developer to create visually appealing and intuitive user experiences with ease.

GitHub Models

I haven't use any GitHub models

Conclusion

Overall, GitHub Copilot was an invaluable tool throughout the development of SkyGreen. It accelerated the coding process, provided intelligent suggestions, and acted as a knowledgeable coding assistant. Copilot's contextual understanding, code generation capabilities, and collaborative features greatly enhanced my productivity and code quality. It allowed me to focus on the high-level design and user experience while efficiently handling the implementation details.

Quantum Feature flags

BinaryGarge.dev — Sun, 22 Dec 2024 15:21:57 +0000

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

I built a quantum-themed feature flag visualization tool that brings an innovative twist to feature flag management by using quantum mechanics principles. The main concept is treating feature flags like quantum particles - they exist in multiple states simultaneously (both enabled and disabled) until they are "observed."

Key Features:

Feature flags start in "quantum superposition" - a state of both enabled and disabled
Users can "observe" individual flags, causing them to randomly collapse into a definite state
A "Collapse All Flags" function simulates quantum wavefunction collapse for all flags at once
Integration with DevCycle for real-world feature flag management
Visual animations showing the quantum uncertainty of unobserved flags
Ability to reset flags back to superposition state
The app provides a playful yet practical way to manage feature flags by:

Making feature flag states visually intuitive through quantum-inspired animations
Using randomization to simulate quantum collapse when observing flags
Providing clear visual feedback about flag states
Leveraging DevCycle's platform for robust feature flag control
This project reimagines how we interact with feature flags, making the process more engaging while maintaining practical functionality for real-world use.

Technical Stack:

React for UI components
DevCycle SDK for feature flag management
Tailwind CSS for styling
Vite for build tooling
Lucide icons for clean, modern iconography
The end result is a unique blend of quantum physics concepts and practical feature flag management, creating an engaging and memorable way to handle feature toggles.

Demo

https://feature-flag-contest.onrender.com/

My Code

https://github.com/binarygaragedev/feature_flag_contest

My DevCycle Experience

The integration of DevCycle into the Quantum Feature Flag Demo provided valuable insights into modern feature flag management. Here's my experience with DevCycle's technology:

DevCycle's React SDK proved to be straightforward to implement:

Quick setup with the DevCycleProvider component
Intuitive hooks for feature flag management
Clear documentation for React integration
Seamless user context management

Additional Prize Categories

OpenFeature Aficionado

SpeechCraft: AI-Powered Speech Analysis for Better Communication

BinaryGarge.dev — Sun, 24 Nov 2024 20:18:54 +0000

This is a submission for the AssemblyAI Challenge : Really Rad Real-Time.

What I Built

SpeechCraft 🎙️ - Real-time Speech Analytics Platform

Overview

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Key Features

1. Real-Time Transcription 📝

Instant speech-to-text conversion
High-accuracy transcription
Support for natural conversation flow

2. Advanced Speech Metrics 📊

Speaking Pace Analysis

Real-time words-per-minute tracking
Optimal pace guidance
Speed variation detection

Clarity Measurement

Filler word detection
Sentence structure analysis
Pronunciation clarity scoring

Fluency Assessment

Speech flow analysis
Transition word usage tracking
Pause pattern analysis

Speech Rhythm

Sentence length variation
Speaking pattern analysis
Rhythm consistency scoring

Vocabulary Analysis

Word variety measurement
Complex word usage tracking
Vocabulary richness scoring

3. Visual Analytics 📈

Real-time metric visualization
Progress tracking
Performance trend analysis

Applications

Public Speaking

Speech practice and improvement
Real-time feedback
Performance analytics

Education

Language learning assistance
Speaking skill development
Pronunciation training

Professional Development

Presentation skills enhancement
Communication training
Interview preparation

Content Creation

Podcast transcription
Video content analysis
Speech quality improvement

Benefits

For Users

Instant feedback on speaking performance
Comprehensive speech analytics
Objective performance metrics
Personal development tracking

For Organizations

Communication skills training
Quality assurance for speakers
Standardized assessment tools
Data-driven improvement strategies

Future Enhancements

Advanced sentiment analysis
Multi-language support
Custom metric configuration
Speech pattern recognition
Integration with learning management systems

Impact

SpeechCraft represents a significant advancement in speech analytics technology, providing users with powerful tools for improving their communication skills through real-time feedback and comprehensive analysis.

Demo

https://speechcraft.onrender.com/

Journey

Core Implementation 🚀

Server-Side Token Management

// Secure proxy server for token generation
app.get('/get-token', async (req, res) => {
    const response = await fetch('https://api.assemblyai.com/v2/realtime/token', {
        method: 'POST',
        headers: { 'Authorization': ASSEMBLY_AI_TOKEN }
    });
    res.json(await response.json());
});

Real-time Audio Processing Pipeline

// Audio capture with optimized settings
const stream = await navigator.mediaDevices.getUserMedia({ 
    audio: {
        channelCount: 1,
        sampleRate: 16000,
        echoCancellation: true
    }
});

// WebSocket connection for real-time streaming
wsRef.current = new WebSocket(`wss://api.assemblyai.com/v2/realtime/ws?sample_rate=16000&token=${token}`);

// Send audio chunks every 250ms
mediaRecorder.ondataavailable = async (event) => {
    if (event.data.size > 0) {
        const base64Audio = await convertToBase64(event.data);
        wsRef.current.send(JSON.stringify({ audio_data: base64Audio }));
    }
};

Real-time Transcript Processing

wsRef.current.onmessage = (message) => {
    const data = JSON.parse(message.data);
    if (data.message_type === 'FinalTranscript') {
        updateTranscription(data.text);
        updateMetrics(data.text);
    }
};

Key Features ⚡

Real-time audio streaming with optimized chunk size (250ms)
Secure WebSocket connection with token authentication
Automatic audio format handling
Error recovery and reconnection logic
Resource cleanup and memory management

Technical Highlights 🔧

Sample rate: 16kHz mono audio
WebSocket protocol for low-latency communication
Base64 encoding for efficient data transmission
Automatic handling of partial and final transcripts
Integration with React state management

Credits:

Solution has been proudly provided by binarygarage.dev using assemblyai.com. For further information please contact contact@binarygarage.dev

DEV Community: BinaryGarge.dev

RouteWise AI

RouteWise AI - Auth0 for AI Agents Challenge Submission

What I Built

Core Problem Solved

Key Features

Demo

Screenshots

1. Authentication Flow

2. Passenger Experience

3. AI Agent Preferences

4. Driver Interface

5. AI Agent in Action

How I Used Auth0 for AI Agents

1. User Authentication Security

2. Token Vault for API Access Control

3. AI Agent Authorization Framework

Consent Negotiation Agent

Safety Monitoring Agent

4. Fine-Grained RAG Authorization

5. Passenger Preference System

6. Driver Insights Dashboard

Lessons Learned and Takeaways

Technical Challenges and Solutions

Key Insights

Advice for Other Developers

Real-World Impact

The Deployment Trinity: Next.js + GCP + Pulumi

What I Built

Live Demo Link

Project Repo

My Journey

Using Pulumi

Table of Contents

Why Next.js and Pulumi?

Next.js

Pulumi

Prerequisites

Setting Up the Development Environment

Creating a Next.js Project

Configuring Next.js for Static Export

Setting Up Pulumi

Writing the Pulumi Infrastructure Code

Deploying to Google Cloud

Optional steps

Setting Up a Custom Domain

Implementing CI/CD

Performance Optimization

Monitoring and Maintenance

Lessons Learned and Best Practices

Infrastructure as Code

Security

Performance

Maintainability

Cost Optimization

Conclusion

Blockchain Insight Hub: Visualizing the Digital Ledger Universe

What I Built

Demo

KendoReact Experience

Agent AI as you personal gym trainer

What I Built

Core Workout Planning Agent

Weekly Plan Distribution Agent

Daily Motivation Agent

Demo

Video:

Agent.ai Experience

SkyGreen: Your Flight's Carbon Footprint Calculator

What I Built

Demo

Repo

Copilot Experience

GitHub Models

Conclusion

Quantum Feature flags

What I Built

Demo

My Code

My DevCycle Experience