Skip to main content

​
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 Natively.

​
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

1

Go to Natively

Visit natively.dev and sign in
2

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

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:
  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

​
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.
This triggers Specular 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

Begin with core features, then layer on enhancements. This makes debugging easier.
Instead of “make it look good”, specify colors, spacing, and effects.
Verify features work before adding more. It’s easier to fix issues early.
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 interface