First App Starter Kit | Online Launch Maven

1. Plan your app

Keep it small enough to describe in a few sentences. Use sample information while learning.

What will you call it? Who will use it? What one task should it help with? What information should it hold? What should you be able to do?

Using the example replaces the answers above. Your answers and checklist last only while this page stays open. Download your plan to keep a copy.

2. Build your prompt

Your prompt updates as you type. Fill in all five answers before you copy it.

Your build prompt

This prompt asks for a personal HTML app. Website enquiries are added manually. A connected business system is a separate project.

Show example from the video

This is the exact Green Leaf build prompt from the video. Copy it to try the same example, or use the planner above to make a prompt for your own app.

Green Leaf prompt

Help me build my first small app. I do not have a coding background.

Continue the Green Leaf Garden Services example from our website tutorial. Create a personal enquiry and follow-up tracker for this fictional garden-services business in one file named enquiry-tracker.html in this folder. Put the HTML, CSS and JavaScript inside the file. I want to open it in a desktop browser for my own use.

I need to:
- Add a name, what the person needs, my next step and a follow-up date.
- Set the status to New, Quote sent, Follow up or Done.
- Edit an enquiry, mark it done and delete it after a confirmation.
- Search my enquiries and show those due for follow-up, including overdue ones. Do not include Done enquiries in that view.
- Save entries in this browser when storage is available. Show a clear error if saving fails.
- Download a JSON backup and restore a valid backup, confirming before replacing my current list.

Make it simple and readable on desktop and a narrow screen. Use azure #007FFF and teal #1FA6A0, pale azure #EAF4FF and cool grey #F7F9FB backgrounds, white cards and dark readable text. Use no sand, beige or cream. Check text contrast, including button labels. Use no external fonts, libraries, images, services or network calls. Do not install anything, publish it or create accounts.

Use the heading Green Leaf enquiry tracker. Explain that I manually add enquiries from the website; this app is not connected to ChatGPT Sites. Start empty and include a button to add three clearly fictional garden-service examples when empty: Sam Jacobs (sample), lawn mowing in Greenside, arrange a visit, New; Thandi Mokoena (sample), garden clean-up in Parkview, follow up on a quote, Quote sent; Alex (sample), hedge trimming, job completed, Done. Use today as their demonstration follow-up date. Include the suburb in the request text; do not add unnecessary fields. Use no real contact details. Treat entered text as text, never executable HTML. Validate backups before importing them and do not overwrite unreadable saved data.

Explain in plain English how to open the file, how to test it and where its data is stored. Explain that browser storage for a local HTML file can vary; the entries do not sync or send reminders. Include backup instructions. Do not claim a test passed unless you actually ran it. Tell me which checks you could not complete.

Ask the agent to test

A useful prompt after the first build.

Testing prompt

Please test the app with fictional information. Check each action I requested, missing or invalid entries, browser saving, closing and reopening, and downloading and restoring a backup. Check desktop and narrow-screen layout. Tell me which checks ran in a real browser, which were simulated and which you could not complete. Do not claim it works just because the code looks right. Do not change or publish a live website.

Ask for one improvement

Replace the bracketed words with what you actually observed.

Improvement prompt

I tried [the action]. I expected [the result], but [what actually happened]. Please find the cause and make the smallest useful fix. Keep my existing entries and other working features. Explain the change in plain English, test it and tell me what remains unverified.

3. Check your first app

Tick a check only after you have tried it. This list records your checks; it does not test the app for you.

0 of 8 checked

I can open the app and read it on desktop and a narrow screen. I can add a fictional entry and find it again. Editing, search, status changes and filters do what I asked. I have tried missing or invalid information and checked the response. I closed and reopened the same app in the same browser and checked my sample entries. I downloaded a backup and found the file on my computer. I restored a sample backup and checked the result. I understand it replaces the current list. I know what is still untested and what the app cannot do.

Browser storage for local HTML files can vary. Keep a fresh backup of entries you want to retain. A copy of the app file alone does not carry its browser-saved entries.

Did you enjoy building?

Enjoying the process of creating and improving something could make Build worth exploring. One exercise does not decide your lane.

Explore TrueLane™

Want help for your business?

MavenSync can help you choose or set up tools that fit your work. Start by describing the task you want to improve.

Contact MavenSync