HOANGHIEP.SITE

Hardware & Phone

Gaming & Desk Setup

  • Esports Mice
  • Custom Keyboardssoon
  • OLED Monitorssoon
  • Ergonomic Chairssoon

AI app tutorial

How to build an app without coding: an Emergent task tracker tutorial

We built and tested a task tracker with Emergent. Copy the exact prompt, follow seven basic checks, and see what 2.38 free credits covered in this run.

Hoang Hiep

A task list is a useful first app to build with AI because you can tell when it works. Add an item, change its name, mark it done, reload the page. A polished screenshot cannot answer those questions for you.

On September 16, 2026, we used Emergent to generate a small task tracker from a written request, then exercised the preview ourselves. It passed seven basic test groups. The free-credit balance went from 10 to 7.62, a difference of 2.38 credits for this limited run. We did not buy credits or connect an external service.

This tutorial follows that build, including the interruption that needed a reply. The result is a browser-based demo with local storage, not a finished service for customers. You do not need to write code to follow the exercise, but you do need to check what the AI produces.

Initial task tracker preview with two sample tasks, All, Active and Completed filters, and an Add task form.

The generated desktop preview. One sample task is active and one is complete; all task text in these screenshots is synthetic.

1. Keep the first app deliberately small

For this exercise, you need an Emergent account, a browser, and enough available credits to try a build. Check your own balance before starting; our opening balance is an observation about our account, not a promise about what every new account receives.

We chose a personal task tracker rather than a shop or a team dashboard. It only needs a text field, a list, and a few actions. There are no payments, accounts, external APIs, or server-side data to configure.

Write down what “working” means before you ask for an app:

  • A task needs a non-empty title.
  • You can add, edit, delete, and mark tasks complete.
  • All, Active, and Completed show the appropriate tasks.
  • Reloading the same preview in the same browser keeps the list.

The prompt also asks for switching completed tasks back to active. We did not separately test that reverse action, so it is not part of the verified result below.

2. Paste the prompt we actually used

Open the Emergent builder, start a new project, and enter your request. We left the model on Auto. This is the exact initial prompt, including the limits on storage and deployment:

Build a small responsive task tracker for preview only. Use a clean accessible UI with labeled controls. Support adding a non-empty task title, editing the title, deleting tasks, toggling complete/incomplete, and filters All/Active/Completed. Persist tasks in browser localStorage across refreshes. Include only 2 synthetic sample tasks. No authentication, payments, external APIs, integrations, backend or database needed. Keep it simple and low-cost. Do not deploy publicly or connect GitHub or any external service. Please build the working preview directly using sensible defaults.

The useful part is its specificity. “Build a productivity app” leaves the AI to guess whether you need logins, shared projects, reminders, or a database. Here, the feature list doubles as a checklist you can test afterward.

localStorage means the app saves data in the browser for that website. It is enough for this exercise. It does not give you cloud backups or a shared list across your phone and laptop. Clearing the site’s browser data can remove the tasks.

3. Answer the clarification, then open the preview

Despite the instruction to use sensible defaults, Emergent asked: “Any design theme preference for the task tracker?” It offered a minimal light theme with a warm accent, a dark theme, a playful theme, or the option to proceed with defaults.

We answered:

Just pick sensible defaults and build it now

That was the only clarification. We did not send a feature-revision prompt. The builder displayed the initial prompt at 09:52 and “Agent Finished” at 09:58. Those are interface timestamps, not a controlled build-speed measurement: the interval includes the clarification interaction.

Once generation finishes, open Preview and use the app itself. Our project was named todo-clean-ui. The task tracker preview worked during our test; a temporary preview should not be treated as permanent hosting. Use only made-up tasks if you try it.

We also saw newly opened builder home/chat tabs temporarily display a white screen when returning to them. The original builder tab remained usable. This was an isolated builder-session observation, not a reproduced defect in the task tracker. If you see a similar interruption, check your existing tab before requesting another build and spending more credits.

4. Test behavior instead of accepting the finish message

We tested the generated preview independently of the builder’s completion message. You can repeat the same sequence with a disposable task:

Check What to do What happened in our run
Empty title Submit the form without a title. The app showed “Task title cannot be empty.”
Add Add QA synthetic task Alpha. The task appeared and All increased from 2 to 3.
Edit Rename Alpha to QA synthetic task Beta and save. The list showed the new title.
Complete Mark Beta complete. Its completed state appeared; the counters showed 1 active and 2 completed.
Filters Switch between Active, Completed, and All. Beta appeared in Completed and All, but not Active.
Reload persistence Fully reload the preview in the same browser. Beta’s edited title and completed state remained.
Delete Delete Beta. The list returned to the two sample tasks.

Result: 7/7 basic test groups passed. That does not mean the app passed every possible test. We did not run cross-browser, stress, security, or full keyboard/screen-reader testing, and we did not capture a console-history audit.

Task tracker after testing, with QA synthetic task Beta crossed out, three total tasks and two completed tasks.

The disposable task after renaming and completion, before deletion. The filters show All 3, Active 1, and Completed 2.

If your generated version fails a check, describe the failed action and the expected behavior in a follow-up prompt. For example, tell the builder that an edited title disappears after reload, rather than asking it to “make the app better.” That is advice for your next step, not a repair we had to perform in this run. Revisions can consume additional credits.

5. Check the narrow screen too

At a 390-pixel viewport width, the document was also 390 pixels wide: we found no horizontal overflow in that check. We opened the edit state on mobile, and the edit input had an associated “Edit task title” label.

Task tracker at 390 pixels wide with the first sample task in an inline edit field, save and cancel controls, and the Add task button above.
The mobile edit state after removing the disposable test task. The remaining entries are the original samples.

That is a useful small-screen check, not an accessibility certification. Before relying on your own app, try keyboard navigation, visible focus, long task titles, and the browsers and devices your users will use. These are recommended next checks, not results we are claiming here.

What 2.38 credits covered

The observed balance was 10.00 before the build and 7.62 afterward. The difference covered this small preview build with one initial prompt and one design clarification, without feature iterations or integrations.

Do not turn that into “an app costs 2.38 credits.” A more ambitious prompt, a different generated result, or repeated changes can lead to different usage. We are not converting the credits into money or quoting a subscription price. Check the current terms and your balance inside Emergent before deciding whether to continue.

The part I like is that the first generated preview handled the basic task lifecycle, including keeping the edited result after reload. The less convenient part was having to answer a design question after explicitly asking for defaults. The blank new builder tabs were another interruption, although the original tab let us continue.

Where this demo stops

This build has no authentication, backend, database, or cloud sync. Those were deliberate exclusions, not features that failed. It is suitable for learning how to turn a small requirement into a working browser interface.

It is not evidence that a customer-facing app is ready. Before using an app for shared work or real customer data, you would need to decide who can access which records, how data is stored and backed up, and how you will test and maintain it. Browser persistence alone answers none of those questions. A preview URL also does not establish a production deployment or uptime commitment.

If you are choosing a tool rather than following this exercise, our Emergent vs Bolt vs Cursor comparison covers the broader workflow differences. This task-tracker test should not be read as a hands-on test of the other two tools.

For a first attempt, I would keep the same scope: two sample tasks, local storage, and the seven checks above. Only add another feature once you can explain what the current version does and where its data lives.

We may earn a commission if you purchase through the link below, at no extra cost to you.

Try building a small app with Emergent

Start by checking your available credits. You do not need to connect GitHub, buy a domain, or add payments to repeat this preview exercise.