Project: Creative Apps - Code2Vibe: Translate Code into Musical Satire

Track

Creative Apps (GitHub Copilot)

Project Name

Code2vibe

GitHub Username

@alejhomoreno

Repository URL

https://github.com/alejhomoreno/code2vibe.git

Project Description

🚀 Project Information
Project Name: Code2Vibe 🎶

Track: Battle #1 - Creative Apps with GitHub Copilot

Repository Link: https://github.com/alejhomoreno/code2vibe.git

💡 Project Description
Code2Vibe is a full-stack, AI-powered web application that turns the daily grind of software development into a satirical, multimedia experience. Have you ever wondered what the "vibe" of your code sounds like?

By analyzing the user's source code using the gemini-2.5-flash model, Code2Vibe acts as an expert developer and music critic. Instead of generic responses, it generates:

🎧 A specific, relatable 3-minute song recommendation (with a dynamically generated YouTube search link).

📖 A dramatic, 2-sentence satirical story about the struggles of the developer who wrote that code.

It’s designed to bring humor to code reviews and turn debugging into entertainment.

🤖 How I used GitHub Copilot
GitHub Copilot acted as my lead architect and pair programmer throughout the hackathon:

Rapid Scaffolding: I leveraged Agent Mode to quickly generate the initial Node.js/Express server logic and build a sleek, responsive, dark-themed frontend from scratch.

Critical Debugging: When migrating to the Google Gen AI SDK, Copilot helped me troubleshoot a 404 Not Found API error by correctly identifying deprecated models and suggesting the update to gemini-2.5-flash.

Logic Refinement & Resilience: Copilot was instrumental in writing the exact Regex needed to clean unpredictable Markdown formatting (```json) from the AI's responses, ensuring the JSON.parse() method never crashed the server.

🛠️ Tech Stack
Frontend: Vanilla HTML5, CSS3, JavaScript (Fetch API).

Backend: Node.js, Express.js.

AI Integration: Google Gemini API (@google/generative-ai).

Security: Dotenv (Ensuring API keys are protected and never pushed to the repo).

Demo Video or Screenshots

Primary Programming Language

Other

Key Technologies Used

Frontend: Vanilla HTML5, CSS3, JavaScript (Fetch API)
Backend: Node.js, Express.js
AI Integration: Google Gen AI SDK (@google/generative-ai) using the gemini-2.5-flash model
AI Assistant: GitHub Copilot (Chat & Agent Mode for scaffolding and debugging)
Security: Dotenv for environment variable management

Submission Type

Individual

Team Members

No response

Submission Requirements

• My project meets the track-specific challenge requirements
• My repository includes a comprehensive README.md with setup instructions
• My code does not contain hardcoded API keys or secrets
• I have included demo materials (video or screenshots)
• My project is my own work with proper attribution for any third-party code
• I agree to the Code of Conduct
• I have read and agree to the Disclaimer
• My submission does NOT contain any confidential, proprietary, or sensitive information
• I confirm I have the rights to submit this content and grant the necessary licenses

Quick Setup Summary

Clone the repository and run npm install in the terminal.
Create a .env file in the root directory and add your API key: GEMINI_API_KEY=your_key_here.
Start the backend by running node server.js.
Open index.html in any modern web browser.
Paste any code snippet into the text area and click "Analyze Vibe".

Technical Highlights

I am most proud of the seamless integration between the AI's natural language processing and the frontend's dynamic UI. An interesting technical decision was forcing the Gemini model to return strict, raw JSON containing specific keys (song_title, artist, emotion, story). Instead of just displaying text, the backend dynamically constructs a YouTube search URL based on the AI's satirical song recommendation, turning a simple text analysis into an interactive, multimedia experience. I also prioritized resilience by implementing regex to clean unexpected Markdown formatting from the AI's response before parsing it.

Challenges & Learnings

Challenges: My initial implementation used a different AI provider, but I quickly ran into a 429 Quota Exceeded error. I had to pivot rapidly and migrate the entire backend to use the Google Gemini SDK. Additionally, I faced the challenge of AI "hallucinations" where the model would wrap the JSON response in Markdown code blocks, crashing the parser.

Learnings: I learned how to effectively use GitHub Copilot not just to write code, but to debug specific API errors (like updating deprecated model versions to gemini-2.5-flash). I also learned the critical importance of security best practices, specifically using .gitignore and .env files to protect API keys before pushing to a public repository.

Contact Information

www.linkedin.com/in/alejandro-moreno-alarcon

Country/Region

Colombia

No newcomer task, target change, or acceptance criteria are specified. The submission mentions README.md, server.js, and index.html; start by reviewing those files and the repository linked in the issue, but no concrete definition of done is provided beyond the existing project and submission requirements.