Pipeline Monitor: Real-Time CI/CD Dashboard

Overview

Pipeline Monitor is a real-time CI/CD pipeline monitoring dashboard that eliminates notification fatigue for development teams managing AWS CodePipeline deployments. Built with Next.js 14 and AWS SDK v3, this application centralizes pipeline status monitoring across Dev, Training, and Production environments.

The Problem

Development teams were overwhelmed by AWS SNS email notifications. Every pipeline execution—regardless of relevance—triggered emails to the entire team, creating:

• Email overload with dozens of daily notifications
• Time wasted manually checking AWS console pages
• Lack of centralized visibility across environments
• Reduced productivity from constant interruptions

The Solution

A centralized, real-time web dashboard that:

• Auto-refreshes every 45 seconds with pipeline status updates
• Groups pipelines by status (Succeeded, InProgress, Failed) for quick scanning
• Provides detailed views with stage-by-stage execution information
• Supports multiple environments (Dev, Training, Production) in one view
• Secures access with GitHub OAuth authentication

Technical Implementation

Tech Stack

• Frontend: Next.js 14 (App Router), React, Tailwind CSS
• Backend: Next.js API Routes, AWS SDK v3
• Authentication: NextAuth.js with GitHub OAuth
• Architecture: Service layer separation, intelligent caching (10s TTL)

Key Features

• Environment-specific AWS credential management
• Credential-based pipeline discovery (no name filtering needed)
• Priority-based pipeline status derivation from stage states
• Responsive design for desktop, tablet, and mobile
• Real-time updates with manual refresh option

Results

• Eliminated 100% of pipeline-related email notifications
• Reduced status check time from 2–3 minutes to <5 seconds
• 90% reduction in AWS API calls through intelligent caching
• Improved team productivity with centralized visibility
• Better debugging with quick access to detailed execution info

Architecture Highlights

The application uses a clean separation of concerns:

• Frontend React components for UI
• Next.js API routes as thin controllers
• Backend service layer for business logic
• AWS SDK v3 for CodePipeline integration
• In-memory caching to optimize API calls

Key Challenges Solved

1. Multi-Account Credential Management: Implemented environment-specific credential handling with client caching
2. Pipeline Status Derivation: Created priority-based algorithm to derive status from stage states
3. API Rate Limiting: Intelligent caching reduces API calls by 90% while maintaining freshness
4. Inconsistent Naming: Credential-based discovery eliminates need for name-based filtering

Lessons Learned

The project demonstrated the value of:

• Service layer separation for better code organization
• Intelligent caching strategies for cost optimization
• User-centric design focused on solving real pain points
• Progressive enhancement with iterative feature development

---

Status: Production Ready
Project Type: Full-Stack Web Application
Technologies: Next.js, React, AWS SDK, NextAuth.js, Tailwind CSS