Building AWS Services Dashboard: A Modular Architecture Journey with AI-Assisted Development

When engineering teams and cloud architects design solutions across AWS environments, they need real-time visibility into service availability across regions. This is the story of how strategic planning, modular serverless architecture, and AI-assisted development came together to create a production-ready monitoring platform—written 100% with Claude Code.

The Challenge: AWS Service Discovery at Scale

As organizations expand their AWS footprint across multiple accounts and regions, a common challenge emerges: How do you quickly confirm which services are available in specific regions? When designing new solutions or planning migrations, cloud architects and engineers need instant answers to questions like:

• Is AWS AppSync available in ap-southeast-3 for our new project?
• Which regions support Amazon Bedrock for our AI initiative?
• What's our current service distribution across all AWS accounts?
• How has our infrastructure footprint changed over time?

Traditional approaches involve manually checking AWS documentation or running CLI commands across multiple accounts—time-consuming and error-prone. We needed a real-time, visual solution that could aggregate this data automatically.

The Solution: Real-Time AWS Service Discovery and Visualization

The AWS Services Dashboard provides comprehensive visibility into your AWS infrastructure with:

• Real-time service monitoring across multiple AWS accounts and regions
• Regional deployment tracking with visual geographic distribution
• Geographic resource analysis showing service concentration patterns
• Excel report generation for stakeholder presentations and audits
• Infrastructure change monitoring to track deployment evolution
• Global CDN distribution for instant access from anywhere

Technology Stack: Modern, Scalable, Serverless

The platform leverages cutting-edge technologies optimized for performance and maintainability:

Frontend Technologies

• React 18 - Modern component architecture with concurrent features
• Vite - Lightning-fast build tool and dev server
• TanStack Query - Intelligent data fetching and caching
• Recharts - Interactive data visualizations
• Tailwind CSS - Utility-first responsive design
• React Router - Client-side navigation and routing

Backend & Infrastructure

• AWS Lambda - Serverless compute for data collection
• EventBridge - Scheduled automated data fetching
• S3 - Scalable storage for service data and static assets
• CloudWatch - Comprehensive monitoring and logging
• Terraform - Infrastructure as Code for repeatable deployments
• CloudFront CDN - Global content delivery with edge caching
• Route53 - DNS management and health checks
• GitHub Actions - CI/CD pipeline automation

Modular Architecture: The Key to Managing Complexity

Here's where the real learning happened. The project is split into four independent repositories, each with a clear separation of responsibilities. This modular approach combined with AWS serverless services creates a scalable, maintainable system:

1. aws-services-site (Frontend Dashboard)

The React-based user interface responsible solely for displaying data and user interactions. No backend logic, no data collection— just a clean, focused presentation layer.

2. aws-infrastructure-fetcher (Data Collection)

A Lambda function that runs on a schedule via EventBridge. Its single responsibility: fetch service data from AWS APIs and store it in S3. No UI concerns, no reporting logic.

3. nodejs-aws-reporter (Excel Report Generation)

An independent Node.js service that reads S3 data and generates formatted Excel reports. Completely isolated from the dashboard and data collection logic.

4. synepho-s3cf-site (Infrastructure Provisioning)

Terraform configurations that provision all AWS resources: S3 buckets, CloudFront distributions, Lambda functions, IAM roles, and more. Infrastructure concerns separated from application code.

Serverless Architecture Benefits

By leveraging AWS serverless services (Lambda, S3, EventBridge, CloudFront), this architecture provides:

• Zero server management - No EC2 instances to patch or maintain
• Automatic scaling - Handles traffic spikes without configuration
• Pay-per-use pricing - Only pay for actual execution time
• Built-in high availability - AWS manages redundancy and failover
• Global distribution - CloudFront CDN delivers content worldwide

Key Insight: Breaking the project into these distinct modular components wasn't just good architecture—it was essential for successful AI-assisted development. Each repository became a manageable, focused context that Claude Code could understand and work with effectively.

The AI Development Workflow: Plan First, Code Second

Every line of code in this project was written by Claude Code. But here's the crucial lesson I learned: AI agents are eager to help and quick to write code. Ask "Write me an application to do X" and you'll get code immediately. However, as projects grow complex, this approach leads to challenges:

• Context overload - AI agents struggle when too much code exists in one place
• Tangled dependencies - Changes become risky and unpredictable
• Lost in complexity - The AI can't maintain mental models of large codebases
• Regression risks - Updates break seemingly unrelated features
• Deployment nightmares - Monolithic codebases are hard to deploy incrementally

The Better Approach: Design Sessions Before Code Sessions

Instead of rushing to code, I spent significant time upfront on planning and design with Claude Code:

1. Define clear boundaries - What does each service do? What doesn't it do?
2. Map data flows - How does information move between services?
3. Establish contracts - What are the API interfaces and data formats?
4. Plan infrastructure - What AWS resources do we need and why?
5. Design for deployment - How will changes be tested and rolled out?

Only after these design sessions did we start writing code. And the difference was remarkable:

• Focused coding sessions - Each repository was a contained, manageable task
• Clearer instructions - I could give precise direction within defined boundaries
• Easier troubleshooting - Issues were isolated to specific services
• Confident changes - Updates in one repo didn't risk breaking others
• Independent deployments - Services could be updated on their own schedule

Pro Tip: When working with AI coding assistants, resist the urge to get code immediately. Spend time on design. The more complex your project, the more critical this upfront investment becomes.

Lessons from Traditional Software Development Still Apply

This experience reinforced a fundamental truth: whether you're working with AI agents or traditional development teams, the best projects have strong upfront planning and design sessions.

In traditional teams, you'd never start a complex project without:

• Architecture reviews
• Design documents
• API contracts
• Data flow diagrams
• Deployment strategies

The same principles apply to AI-assisted development. The AI is your pair programmer, not a magic solution that eliminates the need for good software engineering practices.

Benefits for Engineering Teams and Cloud Architects

The AWS Services Dashboard has become an invaluable tool for our engineering workflows:

For Cloud Architects

• Quickly verify service availability when designing multi-region solutions
• Identify regions supporting new AWS services for proof-of-concept work
• Visualize geographic distribution to optimize latency and compliance
• Generate reports for stakeholder presentations and compliance audits

For Engineering Teams

• Confirm regional service support before committing to implementation
• Monitor infrastructure evolution as teams deploy new resources
• Identify service sprawl and opportunities for consolidation
• Track adoption of new AWS services across the organization

For DevOps and Platform Teams

• Real-time visibility into multi-account AWS footprints
• Automated data collection eliminates manual inventory processes
• Historical tracking shows infrastructure growth patterns
• Excel exports integrate with existing reporting workflows

Deployment: Infrastructure as Code All the Way

The entire platform is deployed using Terraform and GitHub Actions, ensuring:

• Repeatable deployments - Infrastructure is versioned and reproducible
• Automated pipelines - Changes flow through CI/CD automatically
• Environment parity - Dev, staging, and production match exactly
• Disaster recovery - Complete rebuild from code in minutes
• Security compliance - All changes audited and approved via pull requests

Key Takeaways for Your AI-Assisted Projects

If you're working with AI coding assistants on complex projects, here are my recommendations:

1. Design before coding - Spend significant time on architecture and planning
2. Break it down - Split complex systems into focused, modular components
3. Define clear boundaries - Each component should have a single, well-defined responsibility
4. Document interfaces - API contracts and data formats are critical
5. Resist quick code - Just because AI can write code quickly doesn't mean it should
6. Maintain context size - Keep individual codebases manageable for AI comprehension
7. Apply traditional practices - Good software engineering principles still matter

Production Results

The numbers speak for themselves:

• 4 independent repositories - Each with focused purpose
• 100% AI-written code - All by Claude Code
• Sub-second load times - Thanks to CloudFront CDN
• Real-time data updates - Automated via EventBridge scheduler
• Multi-region monitoring - Across all 33+ AWS regions
• Zero-downtime deployments - Via GitHub Actions CI/CD

Try It Yourself

The AWS Services Dashboard is live and available for exploration:

• Live Demo: aws-services.synepho.com
• Source Code: GitHub Repository

Join the Conversation

I'd love to hear about your experiences with AI-assisted development and modular architecture:

• Have you faced similar challenges managing AI-generated code complexity?
• What design patterns have you found effective for AI pair programming?
• How do you balance rapid prototyping with long-term maintainability?
• What tools and strategies work best for your AI development workflows?

Share your thoughts, experiences, and lessons learned. Whether you're just starting with AI-assisted development or you're a seasoned practitioner, the community benefits from shared knowledge and experimentation.

Feel free to reach out via GitHub or LinkedIn. Let's build better software together—with or without AI assistance.