How to build a full-stack web app with AI

There’s long been Internet chatter about how “anyone can build a web app.” Often, I’ve rolled my eyes at this statement as someone who’s tried and failed to learn how to code many times. But with the recent advances in AI chat-based web app builders, this promise looks to finally be true for anyone with an idea and minimal persistence.

Many tools on the market enable AI software agent workflows for non-developers (including v0, Replit, Bolt), but our current favorite tool is Lovable, which we’ll be using in this tutorial. Why? It has an incredible user experience, integration with Supabase as a database, and automatic error handling. It also creates some of the best-looking user interfaces.

In this tutorial, we’ll create a simple to-do list app with a Kanban layout — think of this as the “hello world” project of building full-stack web apps with an AI software engineer.

Steps we’ll follow to create a to-do list web app:

• Use a prompt to generate the user interface
• Set up Supabase for the database
• Sync Supbase to your user interface
• Edit the UI/UX with prompts
• Publish and deploy the app

Tools:

• Lovable (Free to test; $20/month for higher prompt limits)
• Supabase (Free account)

Let’s make an app!

Step 1: Generate the User Interface

1. Create a New Project:

• Sign up for a Lovable account and create a new project.
• Name your project “Kanban To-Do List.”

1. Write Your First Prompt:

• In the prompt box, describe the desired user interface:
• Create a Kanban board to manage tasks. It should have three columns: "To Do," "In Progress," and "Done." Each card should display the task title, a description, and a due date. Users should be able to add, edit, and delete tasks.

1. Review and Refine:

• Lovable will generate a basic UI based on your prompt.
• Use additional prompts to refine the design:
• “Make the cards draggable between columns.”
• “Add a button to add a new task.”
• “Implement a dark mode theme.”

Step 2: Set Up Supabase

1. Create a Supabase Project:

• Sign up for a Supabase account and create a new project.
• Create a new table named “tasks” with the following columns:
• id (integer, primary key)
• title (text)
• description (text)
• dueDate (date)
• status (text, options: "To Do," "In Progress," "Done")

1. Connect Lovable to Supabase:

• In Lovable, navigate to the “Database” tab.
• Connect your Supabase project by providing your project URL and API keys.

Step 3: Sync Supabase with the UI

1. Fetch and Display Tasks:

• Use a prompt like: “Fetch tasks from the Supabase ‘tasks’ table and display them on the Kanban board, grouping them by status.”

1. Create New Tasks:

• Prompt Lovable to create a new task in the Supabase database when a user clicks the “Add Task” button.

1. Update and Delete Tasks:

• Prompt Lovable to update the task status in Supabase when a user drags a card between columns.
• Prompt Lovable to delete a task from Supabase when a user deletes a card.

Step 4: Edit the UI/UX

1. Customize the Design:

• Use prompts to adjust colors, fonts, and spacing:
• “Make the background color a soft gray.”
• “Use a sans-serif font for the headings.”

1. Improve User Experience:

• Prompt Lovable to add features like:
• “Implement a search bar to filter tasks.”
• “Add a notification system to alert users of important deadlines.”

Step 5: Publish and Deploy

1. Deploy to the Web:

• Lovable provides easy deployment options.
• Choose a deployment platform like Vercel or Netlify.
• Connect your Supabase project to the deployed app.

By following these steps and leveraging the power of AI, you can quickly build a functional and visually appealing to-do list app without writing a single line of code.