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

Go to Newly

Visit newly.app and sign in

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.

Wait for Generation

The AI will create your app. Watch the activity feed to see progress.

First builds take 1-2 minutes. Subsequent changes are faster.

Step 2: Test the Basic App

Once the preview loads:

Tap “Add Task” - The form should appear
Enter a task - Type “Buy groceries”
Submit - Task should appear in the list
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:
Swipe left on a task to reveal a delete button
When deleting, show a brief confirmation animation
Show "No tasks yet" message when the list is empty
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

Add a new task with a due date
Add another with a different date
Verify sorting works correctly
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.

This triggers Liquid Backend creation. Your tasks will now be saved to a database.

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

Start simple, add complexity

Begin with core features, then layer on enhancements. This makes debugging easier.

Be specific about design

Instead of “make it look good”, specify colors, spacing, and effects.

Test each change

Verify features work before adding more. It’s easier to fix issues early.

Describe behavior, not just appearance

Tell the AI what should happen on interactions, not just how things look.

Next Steps

Now that you’ve built your first app:

Add Authentication

Let users create accounts

Connect Database

Deep dive into data persistence

Deploy Your App

Put your app on the App Store

AI Chat Tips

Master the AI interfaceu

​Build Your First App

​What We’re Building

​Step 1: Start the Project

​Step 2: Test the Basic App

​Step 3: Add More Features

​Understanding the Changes

​Step 4: Improve the Design

​Step 5: Add Due Dates

​Test the Feature

​Step 6: Add Persistence (Optional)

​Step 7: Final Polish

​Complete App Review

​Key Learnings

​Next Steps

Add Authentication

Connect Database

Deploy Your App

AI Chat Tips

Build Your First App

What We’re Building

Step 1: Start the Project

Step 2: Test the Basic App

Step 3: Add More Features

Understanding the Changes

Step 4: Improve the Design

Step 5: Add Due Dates

Test the Feature

Step 6: Add Persistence (Optional)

Step 7: Final Polish

Complete App Review

Key Learnings

Next Steps