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

# Your first task

> End-to-end Rocket.new guide from idea to deployed app - vibe solutioning 101.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

This tutorial walks you through the entire Rocket workflow - from initial research to a live, deployed app. By the end, you'll have built something real and understand how Solve, Build, and Launch work together.

**Time:** 15–20 minutes

<Info>
  No coding experience required. If you can describe what you want in plain language, you can build with Rocket.
</Info>

## What you'll do

1. Come up with an app idea
2. Research the space with Solve
3. Build the app with Build
4. Customize and iterate
5. Launch

Let's go.

<Steps>
  <Step title="Come up with an idea">
    Every great app starts with a problem worth solving. For this tutorial, we'll build a **customer feedback board** - a simple app where users can submit feature requests and upvote ideas.

    You can follow along with this example or swap in your own idea. The process is the same regardless.

    A few other ideas to consider:

    * A personal portfolio site
    * A simple booking tool for a service business
    * A landing page for a new product
    * A habit tracker mobile app
  </Step>

  <Step title="Research with Solve">
    Before building, use Solve to understand the landscape. Create a new **Solve task** and ask a strategic question about your idea.

    **Try this prompt:**

    ```plaintext wrap theme={null}
    What are the most popular customer feedback tools (like Canny, UserVoice, Nolt)? Compare their features, pricing, and what users complain about. What gaps could a simple, free alternative fill?
    ```

    Rocket will research across public sources and return a structured report with competitive analysis, feature comparisons, and recommendations.

    Read the report and note what resonates. This gives you a clear picture of what to build and how to differentiate - before you write a single line of code.

    <Note>
      This step is optional but powerful. Solve helps you make informed decisions about what to build and why. Skip it if you already have a clear vision.
    </Note>
  </Step>

  <Step title="Build your app">
    Now create a **Build task** and describe your app. Be specific about the features you want based on your research.

    **Try this prompt:**

    ```plaintext wrap theme={null}
    Build a customer feedback board app. Users can submit feature requests with a title and description. Other users can upvote requests. Show a sorted list with the most-voted ideas at the top. Include a simple admin view where I can mark requests as "planned," "in progress," or "done." Use a clean, modern design with a blue and white color scheme.
    ```

    Rocket will generate your full app - UI, navigation, logic, and all. This typically takes one to three minutes. Watch the preview panel as screens come together.
  </Step>

  <Step title="Preview and test">
    Once generation completes, your app appears in the live preview. Interact with it like a real user:

    * Submit a test feature request
    * Upvote an existing idea
    * Switch to the admin view and change a status
    * Navigate between pages
    * Resize the preview to check mobile responsiveness

    Take note of anything you'd like to change - colors, layout, wording, missing features.
  </Step>

  <Step title="Iterate and customize">
    Refine your app through conversation. Ask Rocket to make changes in natural language.

    **Example iteration prompts:**

    ```plaintext wrap theme={null}
    Add a search bar at the top so users can filter feature requests by keyword.
    ```

    ```plaintext wrap theme={null}
    Change the color scheme to dark mode with a purple accent color.
    ```

    ```plaintext wrap theme={null}
    Add a "submitted by" field to each request that shows the user's name.
    ```

    You can also use [Visual edit](/build/editor/visual-edit) to click directly on elements and modify them, or open [Code view](/build/editor/code) to edit the source code.

    Keep iterating until you're happy with the result. There's no limit to how many changes you can make.
  </Step>

  <Step title="Launch">
    When your app is ready, click **Launch** in the top-right corner to deploy your app to the web.

    Your app will be available at a Rocket URL within seconds. From there you can:

    * [Connect a custom domain](/build/launch-web/custom-domain) for a professional URL
    * [SEO](/build/polish/seo) for search engine visibility
    * [Set up analytics](/build/measure/analytics) to track how users interact with your app

    Congratulations - you've gone from idea to deployed app using Rocket.
  </Step>
</Steps>

## Tips for a great first experience

* **Be specific in your prompts.** "Build a feedback board with upvoting and admin controls" gets better results than "build me an app."
* **Use Solve first.** Even a quick research task helps you articulate what you want more clearly.
* **Iterate in small steps.** Make one change at a time so you can see exactly what each prompt does.
* **Preview often.** Check the live preview after every change to catch issues early.
* **Don't aim for perfection on the first try.** Get the structure right first, then polish.

## What's next?

<CardGroup cols={2}>
  <Card title="Security checklist" icon="shield-check" href="/learn/tutorials/security-checklist">
    Lock down API keys, authentication, and data access.
  </Card>

  <Card title="Add payments" icon="credit-card" href="/learn/tutorials/adding-payments">
    Connect Stripe and start accepting payments.
  </Card>

  <Card title="Prompt starters" icon="grid-2" href="/learn/prompt-starters/overview">
    Browse ready-to-use prompts for your next project.
  </Card>

  <Card title="Template catalog" icon="grid-2" href="/learn/templates/overview">
    Start your next app from a production-ready template.
  </Card>
</CardGroup>