Guided Tutorials

Build a Mobile App with Autohand

Create a cross-platform mobile app for iOS and Android from a plain English description. Use Autohand in interactive mode to build screen by screen, or non-interactive mode to generate the entire app at once.

Beginner 20 min
echo "Create a habit tracker mobile app using Expo and React Native. Include a home screen with today's habits, an add habit form, streak tracking, and push notification reminders. Use AsyncStorage for local data." | autohand --auto-mode -p

What you'll learn

  • How to describe a mobile app and have Autohand build it
  • The difference between interactive and non-interactive mode for app building
  • How to test your app on a real phone with Expo Go
  • How to use design mockups as input for app generation

Step 1: Understand the command

The prompt block above uses non-interactive mode to build a complete mobile app. Here is what each part means.

echo "your app description" | autohand --auto-mode -p
  • echo "..." pipes your instructions to Autohand instead of typing them in a live session. This is pipe mode, and it lets you script app generation or run it from a Makefile.
  • --auto-mode tells the agent to work autonomously: scaffold the project, install packages, write all screens and components, and iterate until the task is finished. You can cap the effort with --max-iterations 30 or --max-cost 5. See the auto mode guide for every option.
  • -p (short for --prompt) reads the piped text as the prompt and prints progress to your terminal. Without it, Autohand tries to start an interactive session. All flags are listed in the CLI reference.

Before you start

Make sure you have the following ready, then create a folder for your app.

Requirements

Project setup

Create a new empty folder for your mobile app.

bash

mkdir habit-tracker && cd habit-tracker

Tip: Expo Go on your phone is the fastest way to test. No emulator setup needed. Autohand generates Expo projects by default because of this.

Step 2: Build with interactive mode

Interactive mode lets you build the app screen by screen. You control the pace and review each piece before moving on.

Create the project

bash

mkdir habit-tracker && cd habit-tracker
autohand

You are now in an interactive session. Start with the project setup.

bash

Set up an Expo project with React Native and TypeScript.
I want a habit tracker app with these screens:
1. Home - shows today's habits with checkboxes
2. Add Habit - form to create a new habit with name, frequency, and reminder time
3. Stats - shows streak data and weekly completion chart

Use React Navigation for routing.
Use AsyncStorage for saving habits locally on the device.

The agent scaffolds the full project, installs dependencies, and creates the initial screen files.

Build the home screen

bash

Build the Home screen. Show a greeting with the current date at the top.
Below that, list today's habits as cards. Each card has:
- Habit name
- A checkbox to mark it complete
- The current streak count (e.g. "5 day streak")
- A subtle animation when checked

At the bottom, add a floating action button to navigate to the Add Habit screen.

Build the add habit form

bash

Build the Add Habit screen. Include:
- Text input for the habit name
- Frequency picker (daily, weekdays, weekends, custom days)
- Time picker for the daily reminder
- Color picker with 8 preset colors for the habit card
- Save button that validates the form and stores the habit in AsyncStorage

Add the stats screen

bash

Build the Stats screen. Show:
- Current longest streak for each habit
- A weekly completion chart (simple bar chart, no external charting library)
- Total habits completed this week vs last week as a percentage change
- A motivational message based on the completion rate

Test on your phone

bash

# Start the Expo dev server
npx expo start

Scan the QR code with Expo Go on your phone. The app loads over the network and hot-reloads when files change.

Tip: Keep the Autohand session open while testing. When you find something you want to change, describe it in the session. The agent sees all your project files and makes targeted edits without breaking what already works.

Step 3: Build with non-interactive mode

If you want the entire app generated in one shot, use non-interactive mode with a detailed description.

The one-liner

bash

mkdir habit-tracker && cd habit-tracker
echo "Create a habit tracker mobile app using Expo and React Native with TypeScript.

Screens:
1. Home - greeting with date, list of today's habits as cards with checkboxes, streak count on each card, floating action button to add new habit
2. Add Habit - form with name input, frequency picker (daily/weekdays/weekends/custom), time picker for reminders, color picker with 8 presets, validation
3. Stats - longest streaks per habit, weekly bar chart (no external library), week-over-week completion percentage, motivational message

Technical:
- React Navigation with bottom tabs
- AsyncStorage for local persistence
- TypeScript throughout
- Push notification scheduling for habit reminders using expo-notifications
- Smooth animations on habit completion
- Light and dark mode support using useColorScheme
- Proper loading states and empty states for each screen" | autohand --auto-mode -p

Useful flag combinations

bash

# Limit cost and iterations for a quick prototype
echo "Build a habit tracker app" | autohand --auto-mode -p --max-cost 3 --max-iterations 20

# Use extended thinking for more thoughtful architecture
echo "Build a habit tracker app" | autohand --auto-mode -p --thinking extended

# Auto-commit each step so you get a clean git history
echo "Build a habit tracker app" | autohand --auto-mode -p --auto-commit

# Preview what Autohand would create without writing any files
echo "Build a habit tracker app" | autohand --auto-mode -p --dry-run

Every flag is documented in the CLI reference.

Step 4: Refine the app

Whether you used interactive or non-interactive mode, you can always open a new session to make changes.

bash

# Open an interactive session to refine
autohand

# Inside the session:
# > "Make the habit cards swipeable - swipe left to delete, swipe right to complete"
# > "Add haptic feedback when a habit is checked off"
# > "Change the color scheme to use indigo as the primary color"
# > "Add an onboarding screen that shows on first launch"

Or refine with a quick non-interactive command.

bash

# Quick one-off change without starting a session
echo "Add a weekly reminder notification that summarizes habit completion" | autohand -p

Note the difference: autohand -p without --auto-mode runs a single pass. It makes the change and stops. Use it for quick edits. Use --auto-mode when the change needs multiple steps like installing packages, creating files, and running tests.

Step 5: Start from a design

If you have a design mockup, wireframe, or screenshot of an app you want to build, include it as context.

Interactive mode

bash

# Inside an Autohand session, use @ to attach the image
Build a mobile app that matches the screens in @app-mockup.png
Use Expo with React Native and TypeScript.
Match the layout, colors, and spacing from the design.

Non-interactive mode

bash

echo "Build a mobile app that matches the screens in app-mockup.png.
Use Expo, React Native, TypeScript. Match the layout, colors, and spacing.
The mockup image is in the current directory." | autohand --auto-mode -p

Autohand reads the image and extracts the screen structure, navigation flow, colors, and component layout. Works with photos of whiteboard sketches, Figma exports, or screenshots of other apps you want to use as inspiration.

Step 6: Try other frameworks

This tutorial uses Expo because it has the simplest setup, but Autohand works with any mobile framework. Mention the framework in your prompt.

bash

# React Native CLI (no Expo)
echo "Create a habit tracker using React Native CLI with TypeScript" | autohand --auto-mode -p

# Flutter
echo "Create a habit tracker using Flutter and Dart with Material 3 design" | autohand --auto-mode -p

# Swift (iOS only)
echo "Create a habit tracker iOS app using SwiftUI and SwiftData" | autohand --auto-mode -p

# Kotlin (Android only)
echo "Create a habit tracker Android app using Jetpack Compose" | autohand --auto-mode -p

The prompts and flags work the same way regardless of framework. Autohand adapts its output to the tools you ask for.

What you learned

  • Built a cross-platform mobile app from a plain English description
  • Used interactive mode to build screen by screen
  • Used non-interactive mode for one-shot generation
  • Tested the app on a real device with Expo Go

Try next

autohand "Add push notifications to my habit tracker that remind me at the time I set for each habit"

Related tutorials

Build a Personal Website from Scratch

Go from an empty folder to a deployed personal website using interactive or non-interactive mode.

Create a Vue Component from a Design Brief

Turn a written design brief into a working Vue 3 component with props, events, and styling.