Skip to main content

Build Your First App

This tutorial builds a Task Manager from scratch. By the end you'll have a working multi-screen app on your phone, with data that persists and a design you shaped through chat.

What we're building​

A simple but complete task manager:

  • A home screen listing tasks grouped by category
  • An add-task screen and a task-detail screen
  • Completion tracking with strikethrough
  • A clean, minimal design

Before you start​

  • An AppX account (the Free plan's 100 monthly credits are plenty for this)
  • Expo Go installed on your phone
  • About 15 minutes

Step 1 — Create the project​

  1. Log in to appx.uz
  2. Click New Project
  3. Name it "Task Manager" and create it

You'll land in the project workspace: the chat panel on one side, the live preview in the center, and a code view you can open any time.

Step 2 — Generate the initial app​

In the chat input, paste this prompt and click Generate:

Create a task manager app with these screens:

1. Home screen - a list of tasks grouped by category (Work, Personal,
   Shopping). Each task shows a title, a category badge, and a checkbox.
   Completed tasks have strikethrough. A floating + button opens the
   add-task screen.

2. Add Task screen - a form with: task title, category picker
   (Work / Personal / Shopping), an optional notes field, and a Save button.

3. Task Detail screen - full task info with edit and delete options.

Use a clean white design with blue as the accent color.
Store tasks locally so they persist between sessions.

AppX plans the three screens, then writes the code for each one. You're charged 1 credit per screen — and any screen that fails is auto-refunded, so you only pay for what lands. The whole thing usually finishes within a minute.

tip

The more concrete your prompt, the closer the first result. Name the screens, the data, and the look you want — like you'd brief a teammate.

Step 3 — Preview on your phone​

When generation completes, a QR code appears in the preview panel.

  1. Open Expo Go on your phone
  2. Tap Scan QR Code
  3. Scan it

Your task manager opens. Try it out:

  • Tap + to add a task
  • Check a task off to mark it complete
  • Tap a task to see its details

Leave Expo Go open — every change you make next will update on your phone live.

Step 4 — Refine the design​

Let's polish the home screen. In the chat panel, choose the Home screen and ask:

On the home screen I'd like:
- A greeting at the top like "Good morning 👋"
- A count of completed vs. total tasks for today
- A subtle shadow on the task cards
- Slightly larger task titles

AppX reads your current code and applies the edit, then updates the preview. Chat edits are metered by how much work they take — a tweak like this is typically just a credit or two, and any retries within the same edit are free. Like it? Keep it. Don't? Ask again.

Step 5 — Add a feature​

Now add due dates. Select the Add Task screen and ask:

Add a due-date picker to the Add Task form, shown as a tappable field
that opens a date picker. On the home screen, show the selected date
next to each task title, and show overdue dates in red.

This is a bigger change — AppX handles the picker, the date logic, and the styling across both screens.

Step 6 — Fix something​

See a problem on your phone? Just describe it:

The + button is hidden behind the bottom of the screen on my iPhone.
Move it up so it's fully visible above the safe area.

AppX reads the relevant code and applies a precise fix. Describing a bug in plain words is often faster than hunting for it yourself.

Step 7 — View and edit the code​

Open the Code view to browse your project. You'll see a real Expo project — screens under app/, reusable pieces under components/, shared values like colors in their own files.

Everything is real, inspectable React Native. You can read any file, edit it directly, and changes flow straight into your preview. When you outgrow the chat, the code is right there waiting for you.

Step 8 — Ship it​

When you're happy with the app:

  • Share a link — send people a live web preview of your app
  • Export the code — download the project as a ZIP (on paid plans) or sync it two-ways with GitHub
  • Publish to the stores — submit to the App Store and Google Play. See Publishing for the walkthrough.

What you learned​

  • Writing a generation prompt that gets close on the first try
  • Iterating on design and features through chat
  • Fixing issues by describing them in plain English
  • Viewing and owning the real code behind your app

Next steps​

Chat-Driven Editing

Advanced editing techniques for faster iteration.

Prompting Tips

Get better results from every prompt.

GitHub Integration

Sync your project two ways with a repo.

Publishing

Submit to the App Store and Google Play.