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

If you're an indie hacker or a solo founder, you know that time is precious. Building a simple app can feel overwhelming, especially when you’re juggling multiple side projects. The good news? With tools like Cursor and GitHub Copilot, you can streamline your coding process and create a functional app in just one hour. In this guide, I'll walk you through how to leverage these tools effectively, based on our experiences and what actually works.

Prerequisites

Before diving in, ensure you have the following:

• Cursor: A code editor that enhances your coding experience with AI assistance. You can download it for free or opt for the pro version at $25/month.
• GitHub Copilot: An AI pair programmer that suggests code snippets as you type. Pricing starts at $10/month after a free trial.
• A basic understanding of JavaScript or Python (depending on your app choice).
• Access to GitHub for version control.

Step 1: Setting Up Your Environment

1. Install Cursor: Download and install Cursor from their website. The installation takes about 5 minutes.
2. Set Up GitHub Copilot: After installing Cursor, enable GitHub Copilot in the settings. This should take another 5 minutes.
3. Create a New Project: Open Cursor and create a new project. For this tutorial, we’ll build a simple "To-Do List" app.

Step 2: Initializing Your App

1. Create Basic Files: In your new project, create the following files: index.html, style.css, and app.js.

2. HTML Structure: Use GitHub Copilot to generate the basic HTML structure. Start typing <!DOCTYPE html> and Copilot will suggest the rest. Accept the suggestion.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="style.css">
       <title>To-Do List</title>
   </head>
   <body>
       <h1>My To-Do List</h1>
       <input type="text" id="task" placeholder="Add a new task...">
       <button id="addTask">Add Task</button>
       <ul id="taskList"></ul>
       <script src="app.js"></script>
   </body>
   </html>
   

3. CSS Styling: Use Cursor to write some basic CSS. You can start with something like:

   body {
       font-family: Arial, sans-serif;
       margin: 20px;
   }
   

Step 3: Coding the Functionality

1. Add Task Functionality: In app.js, start coding the functionality to add tasks. Begin by typing function addTask() { and let Copilot complete the function. You might get something like:

   function addTask() {
       const taskInput = document.getElementById('task');
       const taskList = document.getElementById('taskList');
       const newTask = document.createElement('li');
       newTask.textContent = taskInput.value;
       taskList.appendChild(newTask);
       taskInput.value = '';
   }
   

2. Attach Event Listener: Don’t forget to attach the event listener to your button. Just type document.getElementById('addTask').addEventListener('click', addTask); and let Copilot suggest the rest.

Step 4: Testing Your App

1. Run Your App: Open index.html in your browser. You should see your To-Do List app.
2. Add Tasks: Test adding a few tasks to see if everything works as expected. If it doesn't, check the console for errors.

Troubleshooting

• Common Issues: If you don't see your tasks being added, check if you have correctly attached the event listener.
• Debugging Tips: Use the browser's developer tools (F12) to inspect elements and view console messages.

What's Next?

Now that you have a basic To-Do List app, consider expanding its functionality. You could add features like task deletion, storage with local storage, or even user authentication if you're feeling ambitious.

Conclusion

Building a simple app like a To-Do List in just one hour is entirely possible with the right tools. Cursor and GitHub Copilot can significantly reduce your coding time and help you focus on what really matters—shipping your product. Start with these steps, and don’t hesitate to iterate and expand your app as you learn.