DevOpsBoard

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

DevOpsBoard is a fully frontend-only intranet dashboard designed specifically for DevOps and Cloud teams. It simulates a real-world internal workspace where engineers can track CI/CD pipelines, monitor incidents, view cloud cost breakdowns, see deployment schedules, read logs, and access tools — all using just HTML, CSS, and JavaScript.

Rather than creating a generic corporate intranet, I built something developer-focused, giving teams a space to interact with data they care about: builds, environments, uptime, incidents, logs, and workflows.

🧩 Key Features

• ✅ CI/CD Pipeline Simulation (Frontend / Backend / Infra)
• ⚠️ Incident & Alert Center with Modal Details
• ☁️ Cloud Resource Usage + Cost Tracker (AWS / Azure / GCP simulation)
• 📅 Deployment Calendar with Color Tags
• 📈 DevOps Metrics (Uptime, MTTR, CFR, Deployment Frequency)
• ⌨️ Terminal-style Live Log Feed
• 🛠️ Tool Panel: DevOps Tips & Tools (Docker, Terraform, K8s, AWS)
• 👥 Team Activity Feed (GitHub-style)
• 📚 Knowledge Base & CLI Cheatsheet
• 🧪 Test Coverage Snapshot (Fake trends)
• 🌗 Light/Dark Mode ("Day Ops" / "Night Watch")
• 🔀 Drag-and-Drop Widget Layout (experimental)

Demo

🔗 Live Site: https://devopsboard.netlify.app/

Here are some screenshots of DevOpsBoard in action:

Journey

As a DevOps enthusiast, I’m always thinking about how engineering dashboards can feel more human, more useful, and more engaging. Most dashboards today are either too technical or bland. With DevOpsBoard, I wanted to give it life — with animations, real-time simulation, and a focus on team productivity and visibility.

What I Learned

• Simulating real-time pipelines and logs using only vanilla JavaScript
• Creating accessible, readable, and responsive UI without a framework
• Making the UI DevOps-friendly: CLI themes, logs, metrics, and tools
• Building multiple sections using reusable CSS layout techniques (Grid, Flex)

This project helped me sharpen my frontend DOM skills and taught me how to present complex DevOps content through creative and intuitive visualizations — all without a single backend call.

Thanks to Axero and DEV for organizing this awesome challenge — it gave me the opportunity to merge my passion for Cloud + DevOps + Frontend Design into a meaningful project.