--- collection: lessons slug: build-an-app-with-ai locale: en title: "How do you build and test an app by talking to AI?" summary: "Build a simple expense tracker with AI, download it, test its calculations and saved data, and describe bugs in plain language." publishedAt: 2026-10-28 status: live tags: ["AI","Claude","Testing","Local Storage"] canonical: https://codebelkalam.com/en/learn/build-an-app-with-ai --- # How do you build and test an app by talking to AI? Build a simple expense tracker with AI, download it, test its calculations and saved data, and describe bugs in plain language. [▶ watch](https://youtube.com/watch?v=SDLFSqesZOU) ## The short version You can describe an app in words and receive a file to open on your device, even if you have never written code. But opening an app does not prove that it calculates or saves as intended. In the episode, we build an expense tracker with Claude, change its currency and budget features, download it and test it. One test finds a real bug: a negative amount becomes a positive expense. We report the bug and test the fix ourselves. > **Note:** > > The video is in Arabic. The prompts below are English adaptations; your results may differ from the recorded Arabic experiment. ## Key terms - **Prompt**: the request describing the task and the result you want from AI. - **HTML**: a file format a browser can open to display a web page or app. - **Local Storage**: space a web app can use to save data in a browser on a device. - **Test**: an action whose actual result you compare with the expected result. - **Bug**: app behavior that differs from what you intended. - **Boundary**: a value at which behavior changes, such as 80% of a budget. ## The explanation ### Three answers before the prompt Think of the counter clerk from the earlier lessons: saying “I want a good app” does not give the clerk enough detail. Answer three questions before making your request: 1. **What will I enter?** An expense amount, category and optional note. 2. **What do I want to see?** The monthly total and amount spent in each category. 3. **What must remain?** The expenses after closing and reopening the page. In the experiment we also requested deletion, an Arabic right-to-left interface, a phone-friendly layout and a single file that opens without installation. These are things we can check, beyond the appearance of the app. ### Try it, then request changes In the recording, Claude created an HTML file. We entered 120 for food, 45 for transport and 300 for bills. The total was **465**, and the entries remained after refreshing the preview. This describes the recorded attempt; yours may differ. The first version used Egyptian pounds and the response suggested changing the code to use another currency. Instead, we requested a currency selector inside the app, a monthly budget and a bar that turns red after spending exceeds 80%. In this version, changing the currency changes its displayed label; it does not convert the amounts at an exchange rate. ### Where does the data live? Imagine Local Storage as a notebook inside the browser. The app wrote the preview's expenses in its notebook, but the downloaded file opened empty in a browser on the device: the preview's data did not travel with it. Opening the same file in another browser also showed an empty app. The file contains the app; data saved this way belongs to the browser context where it was entered on that device. Clearing site or browsing data can remove it. Do not assume it is a backup or that it synchronizes between devices. Replacing a file can behave differently depending on the browser and how it is opened, so check your data after an update. > **Warning:** > > Do not rely on a new app for important expenses before checking how data is saved and recovered. Use test data and keep an independent copy of information you cannot afford to lose. ### A test needs an action and an expected result You can ask Claude for a test list, but you must perform the tests and compare the results yourself. In the recording we checked the sum, reopening, deletion, invalid inputs, the budget boundary and the layout at phone width. After deleting 45, the expected total was **420**. We entered `-50`: the app should have rejected it, but saved **50** and raised the total to **470**. Rejecting an empty field, zero and letters did not prove that all invalid inputs were rejected. We reported the action, actual result and expected result. Claude's response explained that the app stripped the minus sign and said it had fixed the bug. After downloading the new version, we deleted the incorrect 50 and retested `-50`: it was rejected and the total remained 420. An AI's claim to have tested a fix does not replace your own check. With a budget of 1,000, we tested the boundary and the value just above it: **800** stayed green and **801** turned red. We also checked the layout at phone width in a browser; that checks screen size and layout, not every touch interaction on a physical phone. ## Try it yourself ### 1. Open a conversation with a tool that can create an HTML file and send the request below. It adapts the recorded build prompt into English; your tool's interface and availability may differ. ```prompt I want a small app to record my monthly expenses. Let me enter an amount, choose a category (food, transport, bills, outings or other), and optionally add a note. Show the monthly total and how much I spent in each category. Let me delete an incorrect expense. Keep my entries when I close and reopen the page. Make the interface in English and suitable for a phone. Make it a single file I can download and open on my device by double-clicking, without installing anything. ``` ### 2. Try the result. Enter 120, 45 and 300 and check that the total is 465. Request the following change, then check the result. These are test amounts only. ```prompt I do not know how to edit code. Let me select the currency inside the app: Egyptian pounds, riyals, dirhams, dinars or dollars. Add a monthly budget that I can enter and show how much remains. Add a bar that fills as I spend, stays green and turns red when I exceed 80% of the budget. ``` ### 3. Download the resulting HTML file and open it in your browser. The download method may differ from the episode. If the list is empty, enter fresh test data, close the page and reopen the file in the same browser to check persistence. ### 4. Request a list of tests and write down the expected result before performing each one. ```prompt Write a list of simple tests I can perform by hand to check that the app works correctly. ``` ### 5. Test addition, deletion and reopening. Try an empty amount, zero, a negative number and letters; they should be rejected. With a budget of 1,000, check the bar at 800 and 801. Check the phone-width layout too. Your version may behave differently; record what you actually see. ### 6. If you find a bug, describe what you did, what happened and what you expected. The example below translates the episode's report; change the details to match your own result. Download the revised file and repeat the test and data checks. ```prompt When I entered minus fifty (-50) as the amount and pressed the button to save the expense, it saved a 50-pound expense and the total rose from 420 to 470. I expected it to reject the entry and show a message, as it did for zero and letters. Please fix it. ``` ## Why this matters for building software Use the same cycle for a habit tracker, study planner or household order list: describe inputs, outputs and what must be saved, then try, test and revise. Each test gives evidence about a particular behavior; it does not guarantee that the whole app is free of bugs. ## Related lessons - [What is an AI agent?](/en/learn/what-is-an-ai-agent): how a model uses tools to carry out a task. - [How do you ask for exactly what you want?](/en/learn/what-is-a-prompt): specifying the task and desired result. - [Why does AI lie so confidently?](/en/learn/what-is-hallucination): why results need checking.