Add a new "Project Ideas" content type where users build real infrastructure from scratch based on an architecture diagram and requirements list. No step-by-step instructions. Hints available if stuck. Multiple valid solutions.
---
title: "Build a Monitoring Stack for a 3-Tier Web App"
slug: "monitoring-stack"
difficulty: "intermediate"
estimatedTime: "2-3 days"
category: "Observability"
technologies: ["Prometheus", "Grafana", "Alertmanager", "Node Exporter"]
architectureImage: "/images/projects/monitoring-stack.svg"
tags: ["monitoring", "prometheus", "grafana", "alerting"]
---
## The Scenario
Your team just launched a web application with a React frontend,
a Node.js API, and a PostgreSQL database. Users are reporting
intermittent slowness but nobody can tell where the bottleneck is.
Your job: build the monitoring infrastructure.
## Architecture

## Requirements
### Must Have
- Monitor CPU, memory, disk, and network for all 3 services
- Dashboard showing request latency (p50, p95, p99)
- Alert when error rate exceeds 5% for more than 2 minutes
- Alert when disk usage exceeds 80%
### Nice to Have
- Log aggregation with search
- Distributed tracing across services
- Uptime monitoring with status page
## Constraints
- Must run on a single machine (or Docker Compose)
- Budget: $0 (open source tools only)
- Must survive service restarts
## Hints
<details>
<summary>Hint 1: Where to start</summary>
Start with Prometheus for metrics collection...
</details>
<details>
<summary>Hint 2: Service discovery</summary>
Use static targets in prometheus.yml to start...
</details>
<details>
<summary>Hint 3: Alerting</summary>
Alertmanager handles routing alerts to Slack/email...
</details>
## Suggested Approach (collapsed by default)
<details>
<summary>One possible approach</summary>
1. Set up Docker Compose with all services
2. Add Prometheus with static scrape targets
3. Configure Grafana dashboards
4. Set up Alertmanager rules
5. Add Node Exporter for system metrics
</details>
## Share Your Solution
Built something? Share it:
- Link your GitHub repo
- Post on X with #DevOpsDaily
content/projects/*.md # Project markdown files
public/images/projects/*.svg # Architecture diagrams
app/projects/page.tsx # Index page
app/projects/[slug]/page.tsx # Detail page
components/projects/ # UI components
Overview
Add a new "Project Ideas" content type where users build real infrastructure from scratch based on an architecture diagram and requirements list. No step-by-step instructions. Hints available if stuck. Multiple valid solutions.
How It Differs from Existing Content
Content Structure
Architecture Diagrams
Generated as SVGs (same pipeline as the book diagrams):
public/images/projects/Example Project Ideas (15-20 to start)
Beginner (1-2 days)
Intermediate (2-3 days)
Advanced (3-5 days)
Implementation
File Structure
Page Design
Borrows from Advent of DevOps
Phases
Phase 1
/create-projectskillPhase 2
Phase 3