InfraBunny

• 

  Admin panel

• 

  Demo app

• 

  web landing page

Inspiration

We wanted leadership and engineering teams to see cloud infrastructure instantly without digging through consoles or Terraform state, plus detect drift from manual console changes for a polished hackathon demo without cloud costs.

What it does

InfraBunny visualizes cloud resources in an interactive, nested diagram (VPC → subnets → resources), tracks versioned changes, highlights diffs, and surfaces drift alerts. It also simulates CI/CD deployments and manual drifts for demo-friendly storytelling.

How we built it

• Next.js 14 + TypeScript for the full-stack app and API routes
  
• React Flow for architecture diagrams and dependency arrows
  
• Tailwind CSS for the modern UI/landing page
  
• Prisma ORM with PostgreSQL/Supabase (SQLite locally) for snapshots and drift events
  
• Vercel for deployment
• Mock Terraform state JSONs to avoid cloud costs
  
• Admin panel to simulate CI/CD deployments and drift events
  
• Deployment templates and a parser to ingest/mock Terraform state into versioned snapshots

Challenges we ran into

• Ensuring arrows and nesting stayed accurate (VPC, subnets, SGs, ALB, DB) while resizing containers dynamically
  
• Handling state resets when switching projects to avoid stale comparisons
  
• Vercel build quirks (dynamic API routes, prisma generate) and Supabase connection tuning
  
• Showing drift details reliably and guarding against API/array parsing errors in production

Accomplishments that we're proud of

• A polished landing page plus a fully functional demo dashboard
  
• Accurate nested visualization with auto dependency mapping and change highlighting
  
• Simulated drift detection and CI/CD snapshotting without touching real cloud infra
  
• Clean UX touches: loading states, dynamic legend, header drift badge, admin gear, custom logo

What we learned

• React Flow quirks for nested layouts and edge positioning matter a lot for clarity
  
• Clear state resets prevent cross-project leakage in complex dashboards
  
• Marking Next.js API routes as dynamic avoids build-time surprises on Vercel
  
• Simulating infra (terraform-like states) is powerful for demos and testing

What's next for InfraBunny

• Real AWS integration: ingest live Terraform state/Terraform Cloud runs; CloudTrail-based drift signals
  
• Notifications (Slack/email) and richer audit trails
  
• Cost overlays and budget alerts
  
• Multi-cloud support (Azure/GCP) and SSO/RBAC for enterprise teams
  
• More deployment templates and reversible drift auto-remediation

Built With

• javascript
• next.js
• node.js
• npm
• postgresql
• prisma
• react
• react-flow
• sqlite
• supabase
• tailwind-css
• typescript
• vercel