How to Use GitHub Copilot to Build a Full-Stack App in 2 Hours

If you've ever felt overwhelmed by the prospect of building a full-stack app, you're not alone. The complexity can be daunting, especially if you're a solo founder or indie hacker juggling multiple projects. But what if I told you that with GitHub Copilot, you can significantly streamline the process and get a functional app up and running in just two hours? You might be skeptical, but let me walk you through how we did it and what you need to know.

Prerequisites: What You'll Need

Before diving in, make sure you have the following:

• GitHub Copilot: You'll need a subscription. Pricing is currently $10/month for individuals.
• Node.js: Ensure you have Node.js installed (version 16 or higher recommended).
• A code editor: Visual Studio Code is ideal and integrates well with GitHub Copilot.
• Basic understanding of JavaScript and React: Familiarity with these technologies will help you leverage Copilot's suggestions effectively.

Step-by-Step Guide to Building Your App

1. Set Up Your Environment (15 minutes)

• Install Node.js: If you haven't already, download and install Node.js from the official website.
• Create a new project: Open your terminal and run:

  mkdir my-fullstack-app
  cd my-fullstack-app
  npm init -y
  

• Install Express: For the backend, set up Express by running:

  npm install express
  

2. Initialize GitHub Copilot in VS Code (5 minutes)

• Open VS Code: Launch your code editor.
• Enable GitHub Copilot: If you haven't done so, install the GitHub Copilot extension from the VS Code marketplace and sign in with your GitHub account.

3. Build the Backend (30 minutes)

• Create a simple server: In your project folder, create a file called server.js. Start writing your server code, and GitHub Copilot will suggest completions.

  const express = require('express');
  const app = express();
  const PORT = 3000;
  
  app.get('/api', (req, res) => {
      res.json({ message: 'Hello from the backend!' });
  });
  
  app.listen(PORT, () => {
      console.log(`Server is running on http://localhost:${PORT}`);
  });
  

• Expected Output: Run node server.js and navigate to http://localhost:3000/api to see your JSON response.

4. Build the Frontend (30 minutes)

• Set up React: In the same project directory, run:

  npx create-react-app frontend
  cd frontend
  

• Fetch data from the backend: Open src/App.js, and start coding the component that fetches data.

  import React, { useEffect, useState } from 'react';
  
  function App() {
      const [message, setMessage] = useState('');
  
      useEffect(() => {
          fetch('/api')
              .then(response => response.json())
              .then(data => setMessage(data.message));
      }, []);
  
      return <div>{message}</div>;
  }
  
  export default App;
  

• Expected Output: Start the React app with npm start and you should see "Hello from the backend!" displayed.

5. Troubleshooting Common Issues

• CORS issues: If you encounter CORS errors, install and use the cors package in your Express server.
• Port conflicts: Ensure that the backend and frontend are running on different ports. The backend runs on port 3000 by default, and React will run on port 3001 unless specified otherwise.

What We Actually Use

After building several apps using GitHub Copilot, here’s our real stack:

• Backend: Express for API endpoints.
• Frontend: React for the UI.
• Database: MongoDB (if you need persistence, but we kept it simple for this tutorial).

Conclusion: Start Here

If you're looking to build a full-stack app quickly, GitHub Copilot is a powerful ally. It won't write everything for you, but it can handle boilerplate code and help you get over the initial hurdles. The key is to be engaged and ready to tweak and refine the suggestions to suit your needs.

So, grab your GitHub Copilot subscription, set aside two hours, and start building. You might be surprised at what you can accomplish!