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

# Quickstart

> Build your first mobile app in under 10 minutes

# Build Your First App

This guide walks you through creating and deploying a complete mobile app using Newly. By the end, you'll have a working app you can preview on your phone.

## Prerequisites

* A free Newly account ([sign up here](https://newly.app))
* A mobile device or the preview in your browser

## Step 1: Create a New Project

<Steps>
  <Step title="Go to the Dashboard">
    Visit [newly.app](https://newly.app) and sign in to your account.
  </Step>

  <Step title="Start a New Project">
    Click the input box on the dashboard and describe what you want to build.

    <Tip>
      Be specific! The more details you provide, the better your app will be.
    </Tip>
  </Step>
</Steps>

### Example Prompts

Here are some example prompts to get you started:

<AccordionGroup>
  <Accordion title="Task Manager App">
    ```
    Create a task manager app where users can:
    - Add tasks with a title and due date
    - Mark tasks as complete
    - Filter between active and completed tasks
    - Swipe to delete tasks
    Use a clean, minimal design with a blue color scheme.
    ```
  </Accordion>

  <Accordion title="Recipe Book App">
    ```
    Build a recipe collection app where users can:
    - Browse recipes in a grid layout with photos
    - Search recipes by name or ingredient
    - View detailed recipe with ingredients and steps
    - Save favorite recipes
    Make it look like a modern cooking magazine.
    ```
  </Accordion>

  <Accordion title="Expense Tracker">
    ```
    Create an expense tracker with:
    - Add expenses with amount, category, and date
    - View monthly spending summary with a chart
    - Category breakdown (food, transport, entertainment, etc.)
    - List of recent transactions
    Use a finance-style dark theme.
    ```
  </Accordion>
</AccordionGroup>

## Step 2: Watch Your App Being Built

Once you submit your prompt, the AI will:

1. **Analyze your request** - Understand what features you need
2. **Generate the code** - Create all the screens and components
3. **Build and compile** - Package everything into a working app
4. **Show the preview** - Display your app in the live preview

<Note>
  The first build takes about 1-2 minutes. Subsequent changes are much faster.
</Note>

## Step 3: Preview Your App

The preview panel on the right shows your running app. You can:

* **Interact with it** - Tap buttons, navigate between screens
* **Test features** - Add data, see how everything works
* **Check responsiveness** - The preview matches a real device

### Preview on Your Phone

For the best experience, preview on your actual device:

1. Click the **QR Code** icon in the preview header
2. Scan the QR code with your phone's camera
3. Open the link in Expo Go app (download from App Store/Play Store)

<Warning>
  Make sure your phone is on the same network as your computer for the preview to work.
</Warning>

## Step 4: Refine with AI Chat

Use the chat panel to make changes and add features:

<Tabs>
  <Tab title="Adding Features">
    ```
    Add a settings screen where users can:
    - Toggle dark mode
    - Change notification preferences
    - View app version
    ```
  </Tab>

  <Tab title="Fixing Issues">
    ```
    The submit button on the add task screen isn't working.
    When I tap it, nothing happens.
    ```
  </Tab>

  <Tab title="Changing Design">
    ```
    Change the color scheme to use purple instead of blue.
    Make the headers larger and add more spacing between items.
    ```
  </Tab>
</Tabs>

### Tips for Effective Prompts

<CardGroup cols={2}>
  <Card title="Be Specific" icon="bullseye">
    Instead of "make it look better", say "increase the font size to 18px and add more padding"
  </Card>

  <Card title="Reference Screens" icon="mobile">
    Mention specific screens: "On the profile screen, add a logout button"
  </Card>

  <Card title="Describe Behavior" icon="hand-pointer">
    Explain what should happen: "When I tap the heart icon, it should save the item"
  </Card>

  <Card title="Include Examples" icon="lightbulb">
    Give examples: "Show prices like '\$29.99' not '29.99 dollars'"
  </Card>
</CardGroup>

## Step 5: Add Backend Features (Optional)

If your app needs to save data or have user accounts, the AI will automatically use Liquid Backend to create your backend.

Example prompts that trigger backend creation:

```
Add user authentication so people can create accounts and log in.
Their data should be saved to their account.
```

```
When a user saves a recipe, store it in the database so they
can access it on any device.
```

<Info>
  Learn more about backend features in our [Backend Generation guide](/features/backend).
</Info>

## Step 6: Deploy Your App

When you're ready to share your app:

<Steps>
  <Step title="Open Deploy Menu">
    Click the **More** button in the header and select **Deploy App**.
  </Step>

  <Step title="Choose Platform">
    * **APK** - Android installable file (for testing)
    * **AAB** - Android bundle (for Play Store)
    * **iOS** - App Store build
  </Step>

  <Step title="Configure & Build">
    Follow the on-screen instructions to configure your app icon, name, and build settings.
  </Step>
</Steps>

<Card title="Deployment Guide" icon="rocket" href="/features/deployment">
  See the full deployment guide for App Store and Play Store submission
</Card>

## Next Steps

Now that you've built your first app, explore more features:

<CardGroup cols={2}>
  <Card title="AI Chat Deep Dive" icon="message-bot" href="/features/ai-chat">
    Master the AI chat for faster development
  </Card>

  <Card title="Code Editor" icon="code" href="/features/code-editor">
    Edit generated code directly
  </Card>

  <Card title="Connect Supabase" icon="database" href="/integrations/supabase">
    Use Supabase for advanced database features
  </Card>

  <Card title="Add Payments" icon="credit-card" href="/integrations/revenuecat">
    Monetize with in-app purchases
  </Card>
</CardGroup>

## Getting Help

Stuck on something? Here's how to get help:

* **Discord Community** - Get real-time help from the community and team
* **Example Apps** - See how others solved similar problems
* **AI Chat** - Ask the AI to explain or fix issues

<Card title="Join Discord" icon="discord" href="https://discord.com/invite/sPbqWqgcMf" horizontal>
  Join our active community of builders
</Card>