How I Vibe-Coded an App to Explore GitHub Topics and Trending Repositories

JustAlternate — Sun, 09 Mar 2025 11:45:31 +0000

TL;DR: Ever felt overwhelmed exploring GitHub topics? Check out my app, GitHub Topic Explorer, and discover a new way to visualize connections between Computer Science concepts! 🚀 Read how I built it only using vibe-coding!

Introduction to Vibe Coding

Vibe coding is a revolutionary AI-powered development methodology that's changing the way I build software. 🌟 By using conversational language, you can describe the desired outcomes in natural language, and an AI tool generates the appropriate code. 💻

My Challenge: Turn GitHub Topics into an Explore-able Graph

The challenge was to create a comprehensive GitHub topic explorer that could visualize connections between Computer Science concepts and find trending repositories. 📊 To achieve this, I needed to:

Create a frontend with smooth graph manipulation to display the complex network of GitHub topics
Develop a backend that could make API calls to GitHub to fetch topic data and to LLaMA 3.3 70B to generate subtopics 🤖
Deploy the application on a Virtual Private Server (VPS) using infrastructure as code (IAC) 📁

The Frontend

For the frontend, I had no prior experience, so I relied entirely on Claude's capabilities. 🙏 Claude generated the entire frontend in pure JavaScript, HTML, and CSS, and even added Bootstrap to it. This not only saved me a significant amount of time but also made my application responsive and visually appealing.

As for creating the dynamic graph, I simply described my requirements to Claude, and it implemented everything using Vis for network graph visualization.

The Backend

Given my experience with Go, I asked Claude 3.7 Sonnet to create all the backend API routes and logic using Go and the Gorilla Mux framework. 🚀 This allowed me to leverage my existing knowledge and skills while still benefiting from the efficiency and accuracy of vibe coding.

Claude also created the IAC for deploying the app on Hetzner, using Terraform as the configuration tool. I only had to provide my Hetzner API key for VPS resource provisioning and my Cloudflare API key for domain name DNS entry management. 🌐

Lastly, I utilized Claude 3.7's extensive thinking capabilities to implement metrics and monitoring for my application. Claude helped me set up Prometheus on the VPS to collect metrics and Grafana for visualization and monitoring. 📈 This enabled me to gain valuable insights into my application's performance and make data-driven decisions to improve it.

Now that you've read my story, I invite you to check out my app, GitHub Topic Explorer Please try it out and don't hesitate providing your feedback.

Thank you for reading, and I look forward to hearing your thoughts! 👋

DEV Community: JustAlternate

How I Vibe-Coded an App to Explore GitHub Topics and Trending Repositories

Introduction to Vibe Coding

My Challenge: Turn GitHub Topics into an Explore-able Graph

The Frontend

The Backend