How to Build a Simple Web App with AI Coding Assistance in 2 Hours
How to Build a Simple Web App with AI Coding Assistance in 2 Hours
Building a web app can feel like an overwhelming task, especially if you're just starting out. The good news? With AI coding assistants, you can significantly reduce the time and complexity involved. In this guide, I’ll walk you through how to build a simple web app in just 2 hours using AI tools that are both accessible and practical for indie hackers and solo founders.
Prerequisites
Before we dive into the build, here’s what you’ll need:
- A basic understanding of HTML, CSS, and JavaScript: You don’t need to be an expert, but knowing the basics helps.
- An account with an AI coding assistant: We’ll discuss tools like GitHub Copilot and others later.
- Node.js installed on your machine: This will allow you to run your web app locally.
- A code editor: I recommend Visual Studio Code for its integration with AI tools.
Step 1: Setting Up Your Environment
Time Estimate: 10 minutes
- Install Node.js: Download from nodejs.org and follow the installation instructions.
- Create a new project folder: Open your terminal and run:
mkdir my-ai-web-app cd my-ai-web-app npm init -y - Install Express.js: This will be the web framework for your app. Run:
npm install express
Step 2: Using AI Coding Assistants
Time Estimate: 30 minutes
Here are some AI coding tools that can help you along the way:
| Tool | What It Does | Pricing | Best For | Limitations | Our Take | |--------------------|------------------------------------------------|-------------------------------|--------------------------------|----------------------------------------------|--------------------------------------| | GitHub Copilot | AI-powered code suggestions in your IDE | $10/mo | Quick code snippets | Doesn't always understand context perfectly | We use this for rapid prototyping. | | Tabnine | AI-based autocompletion for multiple languages | Free tier + $12/mo pro | Enhancing coding speed | Limited to supported languages | Great for JavaScript and Python. | | Replit | Online IDE with AI features | Free, $20/mo for Pro | Collaborative coding | Internet dependency, less flexible than local setups | We don't use it for serious builds. | | Codeium | AI code completion with support for many languages | Free | Beginners needing guidance | Occasional bugs in suggestions | We use this for learning purposes. | | Sourcery | AI code review and suggestions | Free, $12/mo for Pro | Improving code quality | Limited to Python currently | We don't use it because of the language limitation. |
Step 3: Building the App
Time Estimate: 1 hour
-
Create your main server file: In your project folder, create a file named
server.jsand let the AI assistant help you with the boilerplate code. Start typing:const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(port, () => { console.log(`App listening at http://localhost:${port}`); });Use your AI tool to fill in the gaps or optimize the code.
-
Set up your front-end: Create an
index.htmlfile and let your AI assistant generate the HTML structure. Aim for a simple layout:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My AI Web App</title> </head> <body> <h1>Welcome to My AI Web App</h1> <script src="app.js"></script> </body> </html> -
Testing the App: Run your server using:
node server.jsOpen your browser and navigate to
http://localhost:3000. You should see "Hello World!"
Troubleshooting
What Could Go Wrong:
- Node.js not installed: Ensure it’s installed and added to your PATH.
- Port already in use: Change the port number in
server.js. - Syntax errors: Check the console for errors and use the AI tool to help debug.
What's Next?
Once your simple app is up and running, consider adding features like a form for user input or a database to store data. You can explore tools like Firebase for easy database integration or learn about REST APIs to expand your app's functionality.
Conclusion
Building a web app with AI coding assistance is not just possible, it can be done in just 2 hours if you have the right tools and a bit of guidance. Start with the basics and leverage AI to speed up your development process.
Start Here: If you're just getting started, I recommend using GitHub Copilot for coding assistance and staying focused on building your app. It’s an investment at $10/month, but the time saved is worth it.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.