> ## Documentation Index
> Fetch the complete documentation index at: https://fabricate.build/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# From Idea to App

> A complete walkthrough — go from a one-line idea to a deployed app by building a real example with Fabricate.

The best way to learn Fabricate is to watch one app come together end to end. In this guide you'll build a **team task tracker** — a small, realistic app — from the first prompt all the way to a live URL.

<Note>
  Follow along by typing the prompts into your own Fabricate project, or just read through to see how the workflow flows. The same pattern works for any app you have in mind.
</Note>

## 1. Write the first prompt

Start on the home screen and describe the whole app in plain English. Cover the core feature, who uses it, and anything that matters to you up front — like authentication.

<Steps>
  <Step title="Describe what you want">
    ```
    Build a team task tracker. Users can sign up and log in, create
    tasks with a title, description, due date, and status (To Do,
    In Progress, Done), and see all tasks on a board grouped by status.
    Each user only sees tasks from their own account.
    ```
  </Step>

  <Step title="Send it">
    Fabricate reads your prompt and turns it into a build plan.
  </Step>
</Steps>

<Tip>
  Mention authentication, the main data model, and the primary view in your first prompt. These are expensive to bolt on later, so it pays to be clear early.
</Tip>

## 2. Review the blueprint

Before writing code, Fabricate generates a **blueprint** — a plan describing the pages, data model, and features it intends to build. For the task tracker, expect something like:

* **Auth** — sign up, log in, and per-user data isolation
* **Database** — a `tasks` table linked to users
* **Board page** — tasks grouped into To Do / In Progress / Done columns
* **Task editor** — create and edit tasks in a dialog

Read it over. If something's missing or wrong, say so before the build starts — it's the cheapest moment to course-correct.

## 3. Watch the first build

Fabricate builds in phases and the [live preview](/build/preview) runs as it goes:

<Steps>
  <Step title="Structure and database">
    The app skeleton, routes, and your D1 schema are created.
  </Step>

  <Step title="Auth and API">
    Sign-up, log-in, and the API routes for tasks are generated.
  </Step>

  <Step title="UI">
    The board, columns, and task editor are built with Tailwind and shadcn/ui.
  </Step>

  <Step title="Preview ready">
    Sign up inside the preview and create a task — it's fully functional.
  </Step>
</Steps>

## 4. Iterate with follow-up messages

Your first build is a starting point, not the finish line. Refine it one focused change at a time:

```
Add a priority field to tasks (Low, Medium, High) and show a colored
dot for priority on each task card.
```

```
Add a search bar above the board that filters tasks by title in real time.
```

```
Make the board responsive — stack the three columns vertically on
mobile screens.
```

<Tip>
  One change per message gives you cleaner results and easier troubleshooting. If a change looks wrong, you can revert that message from [version history](/build/preview) and try again.
</Tip>

## 5. Polish and deploy

When the app does what you need, do a final pass:

* Click through every flow in the preview — sign up, create, edit, filter.
* Use the device-size toggle to check mobile layout.
* Fix anything off with one more prompt, e.g. `"The due date isn't showing on task cards — display it under the title."`

Then ship it:

<Steps>
  <Step title="Click Deploy">
    Hit **Deploy** in the top right of the editor.
  </Step>

  <Step title="Get your URL">
    Your app goes live on Cloudflare's global network at a `yourapp.fabricate.build` URL.
  </Step>
</Steps>

## Keep going

<CardGroup cols={2}>
  <Card title="Prompting Best Practices" icon="sparkles" href="/prompting/best-practices">
    Write prompts that get the result you want the first time.
  </Card>

  <Card title="Working with Images" icon="image" href="/tips/working-with-images">
    Use screenshots and mockups to guide the build.
  </Card>

  <Card title="Design Fixes" icon="palette" href="/tips/design-fixes">
    Sharpen the look and feel of your app.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/tips/troubleshooting">
    Resolve common issues as you build.
  </Card>
</CardGroup>
