How to Use GitHub Copilot to Code a Full Web App in 2 Hours
How to Use GitHub Copilot to Code a Full Web App in 2 Hours
If you're like many indie hackers and solo founders, you probably feel overwhelmed by the amount of coding required to build a web app. You want to ship quickly, but the learning curve can be steep. Enter GitHub Copilot, a powerful AI tool that can help you write code faster and more efficiently. In this guide, I'll walk you through how to leverage GitHub Copilot to build a full web app in just 2 hours.
Prerequisites
Before diving in, you'll need a few things set up:
- GitHub Account: You'll need this to use Copilot.
- Visual Studio Code (VS Code): This is the code editor where you'll be writing your app.
- GitHub Copilot Subscription: Copilot costs $10/month (as of May 2026) for individual users.
- Basic Knowledge of JavaScript/HTML/CSS: While Copilot can help you with suggestions, understanding the basics will help you guide it.
What We’re Building
For this tutorial, we’ll create a simple task manager web app that allows users to add, view, and delete tasks. The expected output is a fully functional web app with a backend using Node.js and a frontend using HTML and JavaScript.
Step-by-Step Guide
Step 1: Set Up Your Project
-
Create a new directory for your app:
mkdir task-manager cd task-manager -
Initialize a new Node.js project:
npm init -y -
Install Express:
npm install express
Step 2: Create the Basic Server
-
Create a file named
server.jsand let Copilot help you set up a basic server:const express = require('express'); const app = express(); const PORT = 3000; app.use(express.json()); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); -
Ask Copilot for help: As you type, Copilot will suggest code. If it suggests a correct function, just hit "Tab" to accept.
Step 3: Add Task Management Functionality
- Create a simple in-memory array to store tasks. Ask Copilot to help you:
let tasks = []; app.post('/tasks', (req, res) => { const task = req.body.task; tasks.push(task); res.status(201).send({ task }); }); app.get('/tasks', (req, res) => { res.send(tasks); }); app.delete('/tasks/:index', (req, res) => { const index = req.params.index; tasks.splice(index, 1); res.send({ message: 'Task deleted' }); });
Step 4: Create the Frontend
-
Create an
index.htmlfile and ask Copilot to help you set up a simple UI:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Task Manager</title> <script src="app.js" defer></script> </head> <body> <h1>Task Manager</h1> <input type="text" id="taskInput" placeholder="Add a new task"> <button id="addTaskBtn">Add Task</button> <ul id="taskList"></ul> </body> </html> -
Create
app.jsto handle frontend logic and let Copilot guide you:document.getElementById('addTaskBtn').addEventListener('click', async () => { const taskInput = document.getElementById('taskInput'); const task = taskInput.value; await fetch('/tasks', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ task }) }); taskInput.value = ''; loadTasks(); }); async function loadTasks() { const response = await fetch('/tasks'); const tasks = await response.json(); const taskList = document.getElementById('taskList'); taskList.innerHTML = ''; tasks.forEach((task, index) => { const li = document.createElement('li'); li.textContent = task; const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Delete'; deleteBtn.onclick = async () => { await fetch(`/tasks/${index}`, { method: 'DELETE' }); loadTasks(); }; li.appendChild(deleteBtn); taskList.appendChild(li); }); } loadTasks();
Step 5: Run Your App
-
Start your server:
node server.js -
Open your browser and navigate to
http://localhost:3000. You should see your task manager!
Troubleshooting
- Common Issue: If your server doesn't start, double-check your code for syntax errors. Copilot is helpful, but it’s not perfect.
- No tasks showing: Ensure you have the correct routes and that your fetch requests are hitting the right endpoints.
What’s Next?
Now that you have a basic task manager, consider adding features like user authentication, database integration, or deploying your app using platforms like Heroku or Vercel.
Conclusion
Using GitHub Copilot, you can build a functional web app in just 2 hours, given you have the right prerequisites and understanding of the basics. It’s a great tool to accelerate your coding process, but remember that it’s not infallible.
Start Here: If you’re new to coding, practice building small projects to get comfortable. Once you’re ready, jump into GitHub Copilot to help you scale your coding efforts.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.