Rubber Duck Thursday!

Key Concepts

• GitHub Copilot: An AI pair programmer that offers code suggestions and autocompletions.
• GitHub MCP Server: A server that provides LLMs access to GitHub data and tools.
• Agent Mode: A mode in GitHub Copilot that allows for more interactive and iterative coding.
• Prompt Engineering: The process of crafting effective prompts to guide AI models.
• Skills Exercise: A guided tutorial within GitHub Learn to teach specific development skills.
• Code Space: A cloud-based development environment within GitHub.
• React: A JavaScript library for building user interfaces.
• Django: A high-level Python web framework.
• Front-end/Back-end: Front-end refers to the user interface, while back-end refers to the server-side logic and database.
• Pull Request (PR): A request to merge code changes into a main branch.
• Custom Instructions: Instructions provided to Copilot to tailor its behavior to a specific project or coding style.

Remote GitHub MCP Server Generally Available

• Key Improvement: The official GitHub remote MCP server is now generally available.
• Premium Tools: Includes Copilot coding agent, secret scanning with push protection, and code scanning alerts.
• Additional Features: Security advisory subissue management, pull request workflow improvements, enhanced gist and discussion support, and improved session management and pagination.
• Significance: Provides LLMs with access to a full suite of GitHub tools and information.
• Usage: Install via the GitHub repository.
• Popularity: The GitHub MCP server is the most popular MCP server on GitHub.

Building an OctoFit App with GitHub Copilot

Project Overview

• Goal: To build a competitive fitness tracker app called "OctoFit" for Mrington High School using GitHub Copilot.
• Repository: A public repository guides users through the process.
• Tech Stack: Django (back-end), React (front-end).

Back-end Development (Recap from Previous Stream)

• API Endpoints: Users, teams, activities, workouts, and leaderboard.
• Error Handling: Using Copilot to fix errors by pasting screenshots of error messages.
• Prompt Files: Using prompt files to define the structure and requirements of the app.
• Mona the Action: A background process that validates the code changes.

Front-end Development

• Installation: Installing the React framework using create-react-app in the "OctoFit-frontend" directory.
• Custom Instructions: Using custom instructions to guide Copilot to use specific directories and commands.
• Components: Creating React components for activities, leaderboard, teams, users, and workouts.
• Styling: Using Bootstrap for styling and React Router DOM for routing.
• Debugging: Addressing issues with data duplication and formatting.
• Model Selection: Experimenting with different AI models (GPT-4 and Claude Sonnet 4) to achieve desired results.
• Clean Chat: Starting a new chat with Copilot for each step to ensure better responses.

Step-by-Step Process

1. Install React Framework: Use npx create-react-app OctoFit-frontend to install React.
2. Update Components: Create and update React components for different sections of the app.
3. Start the App: Run the React front-end on port 3000.
4. Iterate on Styling: Use Copilot to improve the styling and layout of the app.
5. Add Icon: Add the OctoFit icon to the app.

Prompting Techniques

• General Goal: Start with a general goal and then break it down into smaller steps.
• Bullet Points: Use bullet points to list the steps in a specific order.
• Explicit Instructions: Provide explicit instructions to Copilot, such as specifying the directory and commands to use.
• Context: Add relevant files to the context to help Copilot understand the task.

Pull Request and Code Review

• Creating a Pull Request: Creating a pull request to merge the code changes into the main branch.
• Copilot PR Review: Using Copilot to review the pull request and identify potential issues.
• Automatic Code Review: Setting up a rule to have Copilot automatically review all pull requests.
• PR Description: Using Copilot to generate a detailed pull request description.
• Custom Instructions: Using custom instructions to guide Copilot's code review.

Example Prompts

• "Install the React framework in the OctoFit-frontend directory."
• "Create React components for activities, leaderboard, teams, users, and workouts."
• "Show all data for all components in a table format instead of JSON."
• "Add the OctoFit icon to the app."

Key Arguments and Perspectives

• Value of Mistakes: There is value in seeing the mistakes that are made and then having agent mode fix those for you.
• Importance of Model Selection: The model you choose really dictates the output, and you can get different outputs from different models.
• Benefits of Copilot PR Review: Copilot can help identify subtle issues and improve the quality of code.

Notable Quotes

• "The GitHub MCP server is the most popular MCP server on GitHub." - Cadesha
• "Start with a general goal and then you may also I like to always like if I'm doing something in an order, I like to bullet them in an order." - Ari
• "I really love the the PR description feature of GitHub Copilot and uh the summary and the overview because the summary is just like a quick thing, but the overview gives you the details of all the files that you worked in. It's so good. I just click click click click click." - Ari

Technical Terms and Concepts

• npm: A package manager for JavaScript.
• node modules: A directory containing the dependencies for a Node.js project.
• package.json: A file that contains metadata about a Node.js project.
• CSS: Cascading Style Sheets, a style sheet language used for describing the presentation of a document written in HTML or XML.
• Colon Root: A pseudo-class selector in CSS that represents the root element of the document.

Logical Connections

• The stream builds upon the previous week's stream, which focused on the back-end development of the OctoFit app.
• The front-end development process is broken down into smaller steps, each with its own prompt and instructions.
• The pull request and code review process is presented as a way to improve the quality of the code and ensure that it meets the requirements.

Data and Statistics

• Only 40% of people fill in their pull requests.

Synthesis/Conclusion

The stream demonstrates how to build a full-stack application using GitHub Copilot, highlighting the benefits of using AI to automate tasks, improve code quality, and accelerate the development process. It emphasizes the importance of prompt engineering, model selection, and code review in achieving desired results. The OctoFit app serves as a practical example of how Copilot can be used to build real-world applications. The use of different AI models and the iterative approach to development showcase the flexibility and power of GitHub Copilot as a development tool.