How to Use GitHub Copilot to Code a Simple App in 1 Hour
How to Use GitHub Copilot to Code a Simple App in 2026
If you’ve ever felt overwhelmed by the idea of coding an app from scratch, you’re not alone. As builders, we often find ourselves staring at a blank screen, unsure of where to start. Enter GitHub Copilot, an AI-powered coding assistant that can take the edge off this daunting task. In this guide, I’ll walk you through using GitHub Copilot to build a simple app in about an hour. Spoiler: it’s not magic, but it can definitely speed things up.
Time Estimate
You can finish this project in about 1 hour if you have a basic understanding of JavaScript and React.
Prerequisites
Before we dive in, make sure you have the following:
- A GitHub account (free)
- Visual Studio Code installed (free)
- GitHub Copilot subscription: $10/month after a free trial
- Node.js installed (free)
Step-by-Step Guide
1. Set Up Your Environment
First, create a new directory for your app:
mkdir my-simple-app
cd my-simple-app
Then, initialize a new React app using Create React App:
npx create-react-app .
This should only take a few minutes. Once it's done, open the project in Visual Studio Code.
2. Install GitHub Copilot
If you haven’t already, install the GitHub Copilot extension in Visual Studio Code. You can find it in the Extensions marketplace. Once installed, sign in with your GitHub account and start your free trial.
3. Start Coding with Copilot
In your src folder, create a new file called App.js. Here’s where Copilot shines. Begin typing a comment to describe what you want your app to do. For instance:
// Create a simple counter app
As you type, Copilot will suggest code snippets. Accept the suggestions by pressing Tab. In our experience, it’s often spot on, but you may need to tweak some lines for your specific needs.
4. Building Features
Let’s add some basic functionality. You could write:
// Add a button to increment the counter
Copilot will likely suggest a function to handle the button click and update the state. Here’s an example of what it might generate:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
}
export default App;
5. Testing Your App
Once you've added all the features you want, run your app to see it in action:
npm start
This should open your app in your default web browser. You can test the counter functionality, and it should work without any issues.
6. Troubleshooting Common Issues
If you encounter any errors, here are a few common troubleshooting tips:
- Module not found: Ensure you have installed all necessary dependencies.
- Syntax errors: Review the code Copilot suggested; sometimes it might misinterpret your intent.
- React version: Make sure you’re running a compatible version of React.
7. What’s Next
Now that you have a basic app up and running, consider the following next steps:
- Add more features (like decrementing the counter).
- Style your app using CSS or a library like Tailwind CSS.
- Deploy your app on platforms like Netlify or Vercel.
Conclusion
If you’re looking to quickly prototype or build a simple app, GitHub Copilot can be a valuable ally. While it won’t replace your coding skills, it can certainly help you get unstuck and accelerate your development process. Just remember, it’s essential to review and understand the code it generates.
What We Actually Use
For serious projects, we still rely on a combination of Copilot for quick iterations and traditional coding practices for fine-tuning. If you’re looking for something more robust, check out tools like Replit or CodeSandbox, but for quick builds, Copilot is our go-to.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.