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! 👋
Top comments (2)
How did you do that, bro? That's impressive! 🤯
<3