DevAngel

Inspiration

When incidents hit production, engineers often scramble across multiple dashboards and log files trying to find the root cause. We wanted to create a unified platform that gives engineers clarity during chaos real-time, AWS-powered incident dashboard that visualizes metrics, highlights impacted files, and even suggests next actions. DevAngel is your guardian angel for DevOps.

What It Does

DevAngel consolidates logs, metrics, and deployment information into one smart interface. It:

Visualizes error spikes using a custom SVG timeline graph.
Maps which files contributed most to the incident.
Summarizes incidents in readable, human-like language.
Displays real-time error alerts in a bottom popup.
Lets engineers refresh live data, toggle dark/light mode, and open GitHub PRs directly.

How We Built It

We combined a full AWS toolchain with a lightweight React frontend:

Frontend: React.js
Hosting / CI-CD: EC2
Monitoring: AWS CloudWatch Logs Insights — source of all incident and error data
Storage: Amazon S3 (for storing historical data.json snapshots)
backend automation: AWS Lambda and Step Functions (for state machines)
Agent: Amazon Q for GitHub

Everything runs serverlessly, so updates deploy and scale automatically.

Challenges We Ran Into

Fixing AWS Amplify build failures caused by npm lockfile mismatches.
Handling CORS and fetch paths between local testing and Amplify hosting.
Designing a layout that fills all screen space elegantly without overwhelming users.
Getting SVG scaling and labeling correct across both dark and light themes.
Balancing professional aesthetics with fast load performance.

Accomplishments That We’re Proud Of

A fully deployed Amplify dashboard with CI/CD integration.
Real-time data visualization without any third-party charting libraries.
A responsive, AWS-branded UI that works in both dark and light mode.
A single, cohesive view for incidents, file impact, error insights, and deployments.
Integrated live popup alerts that don’t block user flow.

What We Learned

Deep understanding of AWS Amplify’s build pipelines and custom YAML configs.
How to structure React apps for data-driven dashboards.
Using CloudWatch Logs Insights effectively for real-time observability.
The importance of clear UX — the faster you can interpret an incident, the faster you recover.
Best practices for branch management and CI/CD automation with GitHub.

What’s Next for DevAngel

Integrate AWS Bedrock or OpenAI API for LLM-powered root-cause summaries.
Add live CloudWatch streaming via Lambda + API Gateway.
Implement rollback orchestration through Step Functions and GitHub Actions.
Expand to multi-service dashboards for enterprise-scale monitoring.
Add Slack, SES, and webhook integrations for incident notifications.