How to Use GitHub Copilot to Code a Simple Web App in 1 Hour

If you're a solo founder or indie hacker, you know that time is your most precious resource. The idea of building a web app in just one hour sounds almost too good to be true, right? Well, with GitHub Copilot's help, it's not only possible but also a practical way to jumpstart your project. In this guide, I’ll walk you through using GitHub Copilot to create a simple web app, sharing my personal experiences, limitations, and tips along the way.

Prerequisites

Before we dive in, here’s what you need to get started:

1. Basic knowledge of JavaScript and HTML: You'll need to understand the fundamentals.
2. GitHub account: Sign up for free if you don’t have one.
3. Visual Studio Code (VS Code): Download and install it.
4. GitHub Copilot subscription: Currently priced at $10/mo or $100/year. Free trial available for new users.

Step-by-Step Guide

Step 1: Set Up Your Environment (10 minutes)

1. Install VS Code: If you haven't already, get VS Code from here.
2. Install GitHub Copilot: Open VS Code, go to Extensions, and search for "GitHub Copilot." Click Install.
3. Create a New Project Folder: Create a folder named simple-web-app on your local machine.

Step 2: Initialize Your Web App (10 minutes)

1. Open your project folder in VS Code.
2. Create a new file called index.html and another called app.js.
3. Add basic HTML structure: Start typing <!DOCTYPE html> in index.html, and Copilot will suggest the rest.

Expected output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Web App</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

Step 3: Create Basic Functionality (20 minutes)

1. Define a simple function in app.js to display a greeting message.
2. Start typing function greet() and let Copilot suggest the implementation.

Expected output:

function greet() {
    alert("Welcome to your simple web app!");
}
greet();

Step 4: Style Your App (10 minutes)

1. Create a new file called styles.css.
2. Add a simple CSS rule to style the body. Start with body { and watch Copilot fill in the rest.

Expected output:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 0;
    padding: 50px;
}

3. Link the CSS file in index.html by adding: <link rel="stylesheet" href="styles.css"> in the <head> section.

Step 5: Testing Your Web App (10 minutes)

1. Open index.html in a browser: Right-click the file and select "Open with Live Server" if you have the extension installed.
2. Test the greeting: You should see the alert message when the page loads.

Troubleshooting Common Issues

• Copilot isn’t suggesting code: Ensure you're logged into GitHub and have Copilot enabled in settings.
• Code doesn’t work as expected: Check for typos or syntax errors. You can always ask Copilot for help by commenting on what you want to achieve.

What's Next?

Now that you have a simple web app running, think about expanding its functionality. You could add features like user input, API calls, or even integrate a backend. GitHub Copilot can assist you in these tasks as well—just keep iterating!

Conclusion

Using GitHub Copilot to code a simple web app in an hour is not only feasible but can also be a game-changer for indie hackers. While there are limitations—like Copilot not always understanding your unique context or project requirements—it offers a significant boost in productivity.

Start here: If you’re new to Copilot, I highly recommend diving in with a simple project like this. It’s a great way to familiarize yourself with the tool while building something tangible.