# Build your first app

This walkthrough takes you from a blank prompt to a working, deployed app — and teaches the core loop you'll use for everything in GenVibe.

We'll build a simple **task board** (a to-do app with columns).

## Step 1 — Start with a clear first prompt

Your first message sets up the whole project, so describe the app and its main pieces in one go:

> Build a task board app. It has three columns — To Do, In Progress, Done. I can add a task to any column, drag tasks between columns, and delete them. Use a clean, modern design with rounded cards.

{% hint style="success" %}
**Tip:** For the first prompt, describe the *whole* app at a high level. Save the small tweaks for follow-up messages.
{% endhint %}

## Step 2 — Iterate in small steps

After the first build, refine one thing at a time. Small, specific messages give the best results:

> Add a counter on each column header showing how many tasks are in it.

> When I add a task, clear the input box automatically.

> Save the tasks so they're still there after I refresh the page.

Each message updates the live preview. If something isn't right, just say so:

> The delete button is hard to see — make it red and move it to the top-right of each card.

## Step 3 — Preview and test

Use the **live preview** to click through your app exactly as a user would. Try adding, moving, and deleting tasks. If you hit a bug, describe what happened:

> Dragging a task to the Done column throws an error. Please fix it.

GenVibe can see runtime errors and will correct them.

## Step 4 — Edit code directly (optional)

Open the **code editor** in the workbench to see and edit any file yourself. Changes you make are picked up by the preview, and GenVibe stays aware of them on your next message.

## Step 5 — Deploy

Click deploy to publish to Netlify and get a shareable URL, or export to GitHub.

{% content-ref url="/pages/cHGLDu0PBlw8uuOobBoF" %}
[Deploying your app](/features/deployment.md)
{% endcontent-ref %}

## The core loop

That's the whole workflow you'll repeat for any project:

**Describe → Preview → Refine → Deploy.**

Next, learn how to write prompts that get great results on the first try.

{% content-ref url="/pages/jVk1dEhEizbLFehn1Lb7" %}
[Prompting best practices](/getting-started/prompting-best-practices.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.genvibe.pro/getting-started/first-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.