> ## 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.

# Build Your First App

> Complete walkthrough of building a task manager app

# Build Your First App

This tutorial walks you through building a complete task manager app from scratch. You'll learn key concepts and patterns that apply to any app you build with Newly.

## What We're Building

A task manager app with:

* Add and view tasks
* Mark tasks complete
* Delete tasks
* Clean, modern UI

**Time required**: About 15 minutes

## Step 1: Start the Project

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

  <Step title="Create New Project">
    In the input box, describe your app:

    ```
    Create a task manager app with a clean, minimal design.
    Show a list of tasks where each task has:
    - Title text
    - Checkbox to mark complete
    - Completed tasks should show strikethrough text

    Include an "Add Task" button that opens a simple form
    to enter a new task title.

    Use a white background with dark gray text and
    a blue accent color for the add button.
    ```
  </Step>

  <Step title="Wait for Generation">
    The AI will create your app. Watch the activity feed to see progress.
  </Step>
</Steps>

<Note>
  First builds take 1-2 minutes. Subsequent changes are faster.
</Note>

## Step 2: Test the Basic App

Once the preview loads:

1. **Tap "Add Task"** - The form should appear
2. **Enter a task** - Type "Buy groceries"
3. **Submit** - Task should appear in the list
4. **Tap the checkbox** - Task should show strikethrough

If something doesn't work as expected, tell the AI:

```
When I tap the checkbox, the strikethrough isn't showing.
Fix this so completed tasks have strikethrough text.
```

## Step 3: Add More Features

Now let's enhance the app. Send this message:

```
Add these features to the task manager:
1. Swipe left on a task to reveal a delete button
2. When deleting, show a brief confirmation animation
3. Show "No tasks yet" message when the list is empty
4. Add a count showing "X tasks" in the header
```

### Understanding the Changes

The AI will:

* Add gesture handling for swipe
* Create delete animation
* Add empty state component
* Update header with count

## Step 4: Improve the Design

Let's make it look more polished:

```
Improve the design:
- Add subtle shadows to task cards
- Make the add button floating at the bottom right (FAB style)
- Add a gradient background from light blue to white
- Use the SF Pro or System font
- Add a nice entrance animation when tasks are added

Or use Visual Editor.
```

## Step 5: Add Due Dates

Let's add more functionality:

```
Add due dates to tasks:
- Include a date picker when adding tasks
- Show the due date below each task title
- Highlight overdue tasks in red
- Sort tasks by due date, soonest first
```

### Test the Feature

1. Add a new task with a due date
2. Add another with a different date
3. Verify sorting works correctly
4. Add a past date and check it shows red

## Step 6: Add Persistence (Optional)

To save tasks across app restarts:

```
Save tasks to the backend so they persist across sessions.
When the app loads, fetch existing tasks.
When I add, complete, or delete a task, sync with the backend.
```

<Note>
  This triggers Liquid Backend creation. Your tasks will now be saved to a database.
</Note>

## Step 7: Final Polish

Add finishing touches:

```
Final polish:
- Add haptic feedback when completing a task
- Add a satisfying checkmark animation on complete
- Show a subtle toast when task is added: "Task added!"
- Add pull-to-refresh on the task list
```

## Complete App Review

Your task manager now includes:

✅ Add tasks with titles and due dates ✅ Mark tasks complete with animation ✅ Swipe to delete ✅ Visual hierarchy for overdue tasks ✅ Data persistence ✅ Pull to refresh ✅ Empty states ✅ Haptic feedback

## Key Learnings

<AccordionGroup>
  <Accordion title="Start simple, add complexity">
    Begin with core features, then layer on enhancements. This makes debugging easier.
  </Accordion>

  <Accordion title="Be specific about design">
    Instead of "make it look good", specify colors, spacing, and effects.
  </Accordion>

  <Accordion title="Test each change">
    Verify features work before adding more. It's easier to fix issues early.
  </Accordion>

  <Accordion title="Describe behavior, not just appearance">
    Tell the AI what should happen on interactions, not just how things look.
  </Accordion>
</AccordionGroup>

## Next Steps

Now that you've built your first app:

<CardGroup cols={2}>
  <Card title="Add Authentication" icon="user" href="/guides/adding-authentication">
    Let users create accounts
  </Card>

  <Card title="Connect Database" icon="database" href="/guides/connecting-database">
    Deep dive into data persistence
  </Card>

  <Card title="Deploy Your App" icon="rocket" href="/features/deployment">
    Put your app on the App Store
  </Card>

  <Card title="AI Chat Tips" icon="message-bot" href="/features/ai-chat">
    Master the AI interfaceu
  </Card>
</CardGroup>