Logo

dev-resources.site

for different kinds of informations.

Code Feeds for GitHub - AI Generated Instagram-style feeds

Published at
1/15/2025
Categories
devchallenge
githubchallenge
webdev
ai
Author
vignaesh_ram
Author
12 person written this
vignaesh_ram
open
Code Feeds for GitHub - AI Generated Instagram-style feeds

This is a submission for the GitHub Copilot Challenge : New Beginnings and Fresh Starts

What I Built

πŸš€ Code Feeds for GitHub is a fun and engaging VS Code extension that brings the latest changes to your favorite GitHub repositories (the ones you've ⭐ Starred) directly to your editor. Visualize those pull requests and code changes like never before – in a trendy, Instagram-style feed format complete with catchy captions! πŸŽ‰

Because boring changelogs are so yesterday. ✨

🌟 Features

  • πŸ“Έ Instagram-Styled Feed: View recent pull requests from your starred repositories in a visually engaging feed.
  • πŸ’¬ Catchy Captions: Let the AI (powered by GPT-4o) generate fun, trendy, and insightful captions for every code update.
  • πŸ”’ Top 10 Updates: Get a snapshot of the 10 most recent pull requests and stay up-to-date.
  • πŸ” Quick Browsing: Look at specific repositories' feed to manage your coding focus with flair.
  • 🚦 AI Insights: Powered by GitHub Copilot's GPT-4o model, giving life to your code updates with human-like creativity.

Demo

Link to VS Code Extension Code Feeds for GitHub VS Code Extension

AI Generated Code Feeds
AI Generated Code Feeds

GIF Demo - part 1
GIF Demo - part 1

GIF Demo - part 2
GIF Demo - part 2

Repo

GitHub Repo : codefeed-github

Copilot Experience

I used chat, inline prompts & autocomplete throughout my development process. I didn't have a need to use Model switcher.

1. Getting Started with Tree View

  • I began by cloning the vscode-extension-samples/tree-view-sample repository to use as a foundation for implementing a Tree View in my VS Code extension.
  • GitHub Copilot assisted me in understanding the Tree View-related code, suggesting edits and optimizations to tailor it for my needs.

2. Leveraging Language Model API for Captions & Snippets

  • The extension uses the VS Code Language Model API to send prompts to the GPT-4o model and receive JSON responses containing captions and code snippets. Copilot assisted in building the code that constructs these prompts and processes the responses seamlessly.

3. Integrating GitHub REST APIs

  • Copilot guided me in modifying the Tree View base code to interact with GitHub REST APIs. It suggested specific API endpoints and provided code snippets to handle authentication, data fetching, and API responses efficiently.

4. Building the UI with Bootstrap

  • For displaying the feed-like UI, Copilot helped me integrate Bootstrap into the extension. It provided code suggestions for creating responsive layouts, styling components, and implementing user-friendly design elements.

5. Refactoring API Pagination Code

  • To handle paginated data from GitHub APIs, I relied on Copilot to refactor and improve my pagination logic.

6. Dynamic UI Rendering for Light and Dark Themes

  • Copilot was instrumental in creating CSS and logic for dynamically adapting the UI to VS Code’s light and dark themes. It suggested theme-aware styles and conditional rendering logic.

GitHub Models

Prompt Tuning for Captions & Code Snippets

  • I used GitHub Models (OpenAI GPT-4o model) to fine-tune my prompts for generating captions and code snippets dynamically.
  • The "Improve Prompt" feature was instrumental in enhancing my prompts with each iteration, helping me frame precise and effective queries.

JSON Response Handling

  • The iterative process enabled me to design prompts that consistently returned AI-generated responses in a well-structured JSON string, which was critical for seamless integration into my extension.

README File Content Generation

  • I also utilized GitHub Models to generate the initial draft of my README file.
  • The output was refined and repurposed for this contest submission, saving time and ensuring clarity in documenting the project.

By leveraging GitHub Models, I was able to prototype and integrate LLM capabilities efficiently, enhancing both the development process and the final application.

Conclusion

Completing this project in just 12-14 hours, from analysis and approach definition to implementation, was a rewarding experience. While my prior experience in developing VS Code extensions provided a strong foundation, GitHub Copilot proved to be a game-changer, amplifying my productivity and accelerating development by at least 3x.

I’m excited about the potential this extension offersβ€”a fresh, intuitive way for developers to stay updated on GitHub repositories. This is just the beginning; I’m already brainstorming new features and improvements to make it even more engaging and useful. I hope this tool resonates with developers and inspires innovative workflows in their projects!

devchallenge Article's
30 articles in total
Favicon
Join us for the Agent.ai Challenge: $10,000 in Prizes!
Favicon
The Great Failure of 2024
Favicon
Boost Your Productivity with Momentum Builder: A Web App to Overcome Procrastination and Track Progress
Favicon
ReadOnePage - Spend more time reading and learning, and less time in social media
Favicon
πŸ“βœ¨ClearText
Favicon
Daily JavaScript Challenge #JS-74: Convert Hexadecimal to Binary
Favicon
Habit Tracker: A Web Application to Track Your Daily Habits
Favicon
Impostor syndrome website: Copilot 1-Day Build Challenge
Favicon
GitHub Copilot Challenge: Building a Habit Tracker App
Favicon
Just git it!
Favicon
Planning for 2025
Favicon
Navigating 2025: My Tech Predictions
Favicon
Evolution By Sound
Favicon
Weekly Planner - API
Favicon
Amazon Product Finder
Favicon
My Journey to 2025: Reflections, Plans, and Predictions
Favicon
Finding the Perfect Destination in 24 Hours: My GitHub Copilot 1-Day Build Challenge Experience
Favicon
GitHub Copilot One Day Build Challenge: New Beginnings: An Integrated Productivity System
Favicon
Code Feeds for GitHub - AI Generated Instagram-style feeds
Favicon
πŸš€ Weekly Angular Challenge: Two Projects a Week!
Favicon
πŸš€ Weekly Angular Challenge: Two Projects a Week!
Favicon
Labels for any occasion
Favicon
Goal Setter App
Favicon
ZenFlow: Unlock Productivity with Work, Yoga, and Meditation
Favicon
Predicting 2025
Favicon
Compiling 2025
Favicon
SkillBytes - Gamified learning process using AI
Favicon
GitHub Copilot Challenge: Transitions and Transformations
Favicon
2024 Dev Rewind: Breaking Comfort Zones and Embracing the Unexpected
Favicon
Daily Reset - LordGeeOne

Featured ones: