How to Turn Your Web App into a Mobile App (iPhone + TestFlight, 2026)

The holiday season is coming, and I wanted to build an intelligent gift finder app. My idea was to let users describe who they were buying for and what they had in mind. An LLM would help understand their preferences, while TikTok trends and Google Trends would highlight what people were searching for. The app would combine these insights to suggest thoughtful gifts that suited the recipient.

I started by building a web app with Floot. Then I wanted to add a few features people use every day. Location helps them find gifts from nearby small businesses if they want to support local shops. The camera lets them share a photo when something is hard to describe in words. I also wanted notifications, since I’m often busy and could use a reminder.

I asked Floot to add six features, and I’ll walk you through each one in the second section of this tutorial. All I had to do was describe what I wanted each feature to do, and Floot handled the technical setup for me. Later, those same features carried over seamlessly as native iOS features when I turned the web app into an iPhone app using Floot.

This tutorial follows that process, including how I used Floot’s connection to App Store Connect to upload the app to TestFlight for beta testing. By the end, you’ll have turned a web app into an iPhone app installed on your own device with ease.

1 Build the basic gift finder

To follow along with the same gift finder, use the prompt below. Since the prompt is long, I’ve added a few comments to make it easier to follow.

The starter prompt

Build a simple gift finder web app.\
// 1. Let users describe the recipient and set their preferences\
Add a large textarea labelled “Who are you buying for?” with this placeholder:\
“My husband recently started trail running. He loves coffee and spending time outdoors. I’d like something useful that he wouldn’t think to buy himself.”\
Below it, show four selectable options:\
Homemade gifts, Local small businesses, Big-name stores, Surprise me\
// 2. Define how category selection and location work\
Start with nothing selected. Users can combine the first three categories.\
“Surprise me” is a separate choice: selecting it clears the other categories, and selecting a named category clears “Surprise me.” Never automatically select “Surprise me” when all three categories are selected.\
Include fields for:\
Maximum budget and currency.\
Occasion: Christmas, birthday, anniversary, thank you, or just because.\
ZIP/postcode for local suggestions.\
Ask for a location when someone selects local small businesses without providing one. For “Surprise me,” generate a varied mix and include local ideas only when a location is provided.\
// 3. Use AI to generate relevant suggestions with useful links\
Add a clear “Find gift ideas” button. Connect it to Floot’s built-in AI to generate six varied suggestions based on the description, selected categories, budget and occasion.\
Include ideas from every selected category, keep each gift within budget, and respect anything the user wants to avoid.\
Use live web search when available. Provide relevant shopping, tutorial, local-search and TikTok search links without requiring external API setup.\
Only name specific local businesses when verified. Do not invent prices, sources or popularity claims. Clearly label estimated costs.\
// 4. Present each gift idea in a readable card\
Display each suggestion in a consistent, readable card containing:\
Gift name. Category tag and estimated price range. A short explanation of why it suits the recipient. For homemade gifts, a few simple steps and an estimated completion time. Relevant links. A “Save to wishlist” button.\
// 5. Keep the design welcoming and easy to read\
Style category labels as rounded tags with softly tinted backgrounds. Use 18 px semibold text in sentence case:\
Homemade gift: green text with a pale green background.\
Local small business: terracotta text with a pale terracotta background.\
Big-name store: blue text with a pale blue background.\
Keep the layout clean and welcoming, with a warm neutral background and light cards. No text anywhere in the app can be smaller than 14 px.\
// 6. Require an account only when users want to save a gift\
Visitors can generate and browse ideas without an account.\
When they click “Save to wishlist,” ask them to sign in or create an account. Preserve their search and chosen gift, then save it automatically after sign-in.\
Give each account a private wishlist with saved gift cards and a remove button. Store saved gifts in the database so they remain available when users return.\
// 7. Handle loading, empty results and errors\
Include clear loading, empty and error states. Build only this basic gift-finding flow.\

Figure 1 The basic gift-finder form with a description, categories, budget, occasion and postcode.

Try a search with a recipient description, a budget and an occasion. With a single prompt, you already have a working app you can test.

Basic gift card display

Figure 2 The starter version presents ideas as cards with an estimated cost, a reason, useful links and Save to wishlist.

Tip

You can use the starter prompt above or adapt it to an app idea of your own. Build your first version with Floot, test it in the browser, then keep adding the features you need.

Start building with Floot →

2 Add six features for the iPhone experience

I wanted location, camera, sharing and notifications in the web app I built with Floot. I also wanted those features to work when I turned it into an iPhone app for the Apple App Store.

With Floot, you describe the feature in the same conversation, and the agent identifies the native components and permissions it needs. You do not need to learn a new framework or rebuild the app for iOS.

We’ll add each feature one at a time. Paste a prompt, let the agent finish, then test the parts available in the browser before moving on. Feature 6 is the exception: you will read about it here, but you set it up in section 4, once your Apple account is connected. Later, we’ll test how those features work on an iPhone through TestFlight.

If you’ve already built a web app with Floot and are happy with it, you can turn it into an iOS app too. Open your project in Floot, click Publish and switch on Publish mobile app.

Below are six features showing how they work in the web app and what you can expect in the installed iPhone app.

Note

Just a note that ChatGPT helped me write the prompts below. I described the feature I wanted and asked it to turn that idea into a detailed prompt for Floot.

For example, you ask ChatGPT

I want users to find gifts from nearby small businesses without typing a postcode. Can you write a prompt for Floot to add a “Use my current location” button? It needs to work on both the website and the iPhone app.

The location prompt below shows how a simple request like this can be expanded into more detailed instructions.

Feature 1 Use current location

Imagine Christmas is tomorrow and you need a gift from a small business nearby. Instead of typing a postcode, tap Use my current location and let the app fill it in. Keep manual entry available for people who decline permission or want to shop somewhere else.

Ask your assistant:

When users select “Local small businesses”, show a “Use my current location” button next to the ZIP/postcode field.\
\
Only ask for location permission when they tap the button. Never on page load.\
\
After permission is granted, get their approximate location and convert it into a ZIP/postcode using Photon at https://photon.komoot.io/reverse. Do the lookup on the server and send a User-Agent header with the app name. Read the postcode from the “postcode” property or from “name” when “osm_value” is “postcode”. Enable the lookup so it works immediately.\
\
Fill the ZIP/postcode field with the result and show a short confirmation such as “Postcode filled in”. Users can edit the field to search somewhere else.\
\
If permission is denied, or location is unavailable, or no postcode is found, show a friendly message and let users enter their ZIP/postcode manually.\
\
Use the location to find nearby gift shops and explain why each suggestion fits their request.\
\
Credit OpenStreetMap when location data is shown.\
\
Support both the website and the installed iOS app. On iOS, request location only while the app is in use with the permission message “We use your location to find gift shops near you.”\

Figure 3 The location feature in the web app.

Figure 4 The location feature in the browser.

In the browser, check that the permission request appears only after a tap, that the postcode fills correctly and that it remains editable. The iPhone permission screen comes later, after installation. The same prompt also defines the iOS permission wording, which Floot includes in the native build.

Feature 2 Add a photo for inspiration

A description is useful, but a photo can give the app more context. Photograph a coffee setup, a favourite running accessory or something the recipient already owns, then ask for gifts that go with it.

Ask your assistant:

Add an optional "Add a photo" button below the "Who are you buying for?" textarea. Users can take a photo or choose an existing one, for example something the recipient likes or already owns.\
\
Show a preview of the chosen photo with "Replace" and "Remove" options.\
\
Before upload, resize the photo to a maximum of 1600px on the longest side and convert it to JPEG, so large phone photos and iPhone HEIC images work. Reject non-image files with a friendly message.\
\
Send the photo to the gift generation endpoint along with the description, selected categories, budget and occasion, and pass it to the AI as an image input so it can actually see it. Use a vision-capable model.\
\
Ask the AI to suggest gifts that are similar to or go well with what's in the photo, and for each suggestion add one line explaining how it relates to the photo. If the photo is unclear or unrelated, say so briefly and base suggestions on the description instead.\
\
Only use the photo to generate this set of suggestions. Don't save it to the database, file storage or session storage.\
\
The app must work exactly as before when no photo is added.\
\
Support both the website and the installed iOS app. On the web, use a standard file input that offers camera or photo library on phones. On iOS, ask for camera permission only when the user chooses "Take photo", and use the system photo picker for existing photos so no full photo-library access is requested. Camera permission wording: "We use your camera so you can add a photo that helps us suggest relevant gifts."\

Figure 5 Add a photo appears below the recipient description in the web app.

In the website preview, add an image and check the preview. Generate ideas and read whether the suggestions actually relate to the photo. This single prompt adds camera access, image handling and a vision model to the app.

Feature 3 Share a gift or wishlist

Finding the gift is only half the job. You may want a second opinion, or you may want to send someone a list of ideas. This feature adds sharing to individual cards and to the wishlist.

Ask your assistant:

Add sharing so users can send a gift idea or their wishlist to a friend.\
\
Add a "Share" button on each gift card and a "Share wishlist" button on the wishlist page.\
\
Sharing a gift sends the gift name, a one-line reason it fits, and a link to it.\
\
Sharing the wishlist creates a read-only public link with an unguessable token (e.g. /shared/abc123x9...). Anyone with the link can view the gifts without signing in, but cannot edit them. The owner's wishlist stays private otherwise, and they can turn the link off with a "Stop sharing" button.\
\
On the website, use the Web Share API to open the phone's share sheet (WhatsApp, Messages, etc.). If it's not supported, for example on desktop Firefox, show a "Copy link" button and confirm with "Link copied".\
\
On the installed iOS app, use the Capacitor Share plugin to open the native share sheet.\
\
All shared links must use the published app's domain, never a preview or sandbox URL.\

Figure 6 Share is available on each gift card.

On the website, try Share or Copy link, then open the shared page in another browser session. Once the site is public, a recipient can view an active shared link without a gift-finder account. During internal publishing, Floot’s private access gate still applies.

Feature 4 Remind me to buy it later

You have found a good idea, but the birthday is still a few weeks away. Remind me lets you choose a date and time. The website and iPhone versions handle that request differently: the website downloads a calendar event, while the installed app schedules a notification on the device. One prompt covers both behaviours, and Floot keeps the two versions consistent.

Ask your assistant:

Add reminders so users can get a notification on a date they choose, scheduled on the device with no server.\
\
Add a "Remind me" button on each gift card and wishlist item. It opens a small dialog with the reminder text pre-filled (e.g. "Buy: Trail running headlamp"), a date picker and a time picker defaulting to 9:00am. Quick options: "Tomorrow", "This Friday", "In 1 week".\
\
Next to the Occasion field, add "Set an occasion reminder". It opens the same dialog with a text field for who it's for (e.g. "Mum's birthday"), the occasion date, and how early to remind them: 1 day, 1 week or 2 weeks before.\
\
Don't allow dates or times in the past. Use the user's local time zone.\
\
On the installed iOS app, schedule the reminder with the Capacitor Local Notifications plugin. Ask for notification permission only when the user taps "Set reminder" for the first time, never on launch. Use a whole number under 2,000,000,000 as each notification's ID.\
\
If permission is denied, explain that reminders need notifications and show how to turn them on in iPhone Settings, without blocking the rest of the app.\
\
Tapping a reminder opens the app on the wishlist, or on the gift finder for occasion reminders.\
\
Save the user's reminders on the device and show them in a simple "Reminders" list where each one can be deleted, which also cancels its scheduled notification.\
\
On the website, don't schedule notifications. Instead, the same dialog shows an "Add to calendar" button that downloads an .ics calendar event for the chosen date and time with the reminder text, so it works in Apple, Google and Outlook calendars.\

Figure 7 Remind me joins the other actions on a gift card.

In the browser, open the reminder dialog and use Add to calendar. Native notification permission and delivery are tested on the iPhone later.

Feature 5 Add the Premium plan

The starter app gives everyone six gift ideas per search. This prompt changes the allowance to three ideas per search for free users and ten for Premium subscribers, with a website subscription priced at $4.99 a month. Floot’s built-in Stripe integration makes the payment setup straightforward, so you can test the subscription flow without setting up a separate billing system.

Ask your assistant:

Add a Premium plan. Free users get 3 gift suggestions per search; Premium users get 10.\
\
Premium is a monthly subscription at $4.99, paid through Floot payments (Stripe Checkout). Users must be signed in to upgrade, so Premium is tied to their account.\
\
Enforce the limit on the server: the gift generation endpoint checks the signed-in user's plan and asks the AI for exactly 3 or 10 ideas. Never rely on the browser to hide extra results.\
\
Mark a user as Premium only when the payment event endpoint receives a successful subscription payment, and remove Premium when the subscription is canceled or a renewal payment fails. Don't grant Premium from the return page alone.\
\
Replace every place that assumes 6 ideas (headings like "Six ideas, made for them", the loading skeleton count, footnote text and any validation limits) so it reflects 3 or 10.\
\
Below free results, show a short "Get 10 ideas with Premium" card with an Upgrade button. Signed-out users who tap it are asked to sign in first, then continue to checkout.\
\
After a successful upgrade, show "You're Premium. Your next search will show 10 ideas." Premium users see a "Manage subscription" link that opens the Stripe billing portal so they can cancel.\
\
In the installed iOS app, don't show the Upgrade button or any payment links. Users who subscribed on the website still get 10 ideas in the app when signed in.\

Figure 8 The website Premium offer introduces ten ideas per search.

This is website billing through Floot payments. In the preview, Floot provides Stripe test payments. For real website subscriptions, complete Set up Stripe under Services → Payments or on the Publish screen. Published payments use live mode and require an eligible Floot plan.

The iPhone app uses the same account’s plan, but this prompt deliberately hides Upgrade and payment links there. It does not implement Apple In-App Purchase. Before public App Store submission, check this subscription model against Apple’s current payment rules for your app and storefronts.

Feature 6 Open shared wishlist links in the app

You send a wishlist link to a friend. If they have the app installed, tapping that link can take them straight to the same wishlist inside it. If they do not have the app, the link opens the website. Apple calls this Universal Links. Universal Links make the app feel native, and they normally require several configuration steps.

Note

Universal Links need your Apple Team ID and a public website domain. We will configure them in Section 4, after connecting Apple, then publish and verify the website before our first mobile build. This lets us include Universal Links in the first build without using an extra mobile build.

3 Get your app ready before the first mobile build

Before turning your web app into an iPhone app, there are a few things worth preparing.

Floot’s Free plan includes 2 mobile builds per month, Pro includes 12, and Power offers unlimited builds.

Understand how mobile builds work (very important)

When you open Publish in Floot, you'll see a switch labelled Publish mobile app.

Here's the difference:

• Publish mobile app OFF: Clicking Publish or Publish update updates your website only. No mobile build is used.

• Publish mobile app ON: Clicking Publish or Publish update publishes your website and starts a mobile build. Floot generates the mobile app for iOS and Android, and sends it to any connected app stores you've selected.

Figure 9 Mobile publishing settings showing the “Publish mobile app” switch turned on.

Simply turning the switch on does not use a mobile build. The build starts when you click Publish or Publish update.

For example, if you're on the Free plan and publish your web app ten times with Publish mobile app OFF, you haven't used any mobile builds. But if you publish twice with the switch on, you've used both monthly builds, assuming both complete and count.

A failed build doesn't count towards the allowance. Floot also doesn't count a build if every connected store rejects it.

The best way to avoid unnecessary mobile builds is to prepare what you can and review your app carefully before building. If you follow this tutorial in order, all six features go into your first build, so on the Free plan your second build is left for fixes.

What requires a mobile build?

A new mobile build is required whenever you want changes to your app's interface, styling, navigation, app icon, splash screen, native status bar, permissions, or native features to appear in the installed app.

However, you can preview and refine most UI changes in Floot's iPhone preview without generating a mobile build. You only need to build when you're ready to install those changes on your phone.

App Store listing changes, including screenshots, promotional artwork, descriptions, keywords and pricing, do not require a mobile build. They're managed separately in App Store Connect.

Some finishing touches before your first mobile build

This is one feature of Floot I find particularly useful.

In Floot's preview, click the device selector at the top and choose iPhone. Floot displays your app inside an iPhone-sized screen, so you can directly see how the interface looks on a phone.

You can adjust the spacing, colours, typography, buttons, headers and navigation while checking the results in the iPhone preview. You can even interact with the app to test whether buttons and navigation work as expected.

Figure 10 iPhone preview in Floot for checking the mobile layout and testing navigation.

Finishing touch 1 Create your app icon

Ask your assistant:

Create a custom app icon for my app.\
\
Requirements: 1024 × 1024 PNG. No transparency or pre-rounded corners. Use my app's existing colours and visual style. Create a simple, recognisable symbol that communicates the app's main purpose. Keep the design clear and readable at small sizes.\
\
Generate the icon and show it to me for approval first. Once I approve it, set it as the app icon in Floot's project settings. Do not publish the app or trigger a mobile build. Wait for my next instruction.\

Finishing touch 2 Create your splash screen

A splash screen is the first image users see when they open your app, before the main interface appears.

You cannot preview it directly in Floot, but you can describe how you want it to look and ask your assistant to create a visual mockup for you to review. If you are happy with the result, ask your assistant to set it as your splash screen. The next time you create a mobile build, the new splash screen will be included in the app.

Ask your assistant:

Create a custom splash screen for my app.\
\
Requirements: 2732 × 2732 PNG. Use my app's existing colours and visual style. Place my app's logo or main symbol in the centre. Use a simple background that matches the app. Leave plenty of empty space around the logo so it remains visible when cropped for different phone screens.\
\
Generate the splash screen and show it to me for approval first. Once I approve it, set it as the splash screen in Floot's project settings. Do not publish the app or trigger a mobile build. Wait for my next instruction.\

Figure 11 Splash screen displayed on a real iPhone when launching the app.

Finishing touch 3 Match your status bar colour

The status bar is the area at the top of your phone that shows the time, signal, Wi-Fi and battery. You can ask Floot to match the status bar colour to your app's header or background.

Ask your assistant:

Make the native status bar match my app's header or background colour.\
\
Requirements: Inspect my app's existing colours and choose the colour that best matches the top of the interface. Use light or dark status bar icons so the time, battery and signal remain readable. Keep the status bar in inset mode so the app's content doesn't overlap the system controls. Do not change my app's existing layout or other styling.\
\
Update Floot's native system bar settings accordingly. Do not publish the app or trigger a mobile build. Wait for my next instruction.\

Figure 12 Mobile preview showing the app header and layout on an iPhone screen.

Finishing touch 4 Add a floating mobile navigation bar

A navigation bar at the bottom of the phone makes frequently used features easier to reach. I particularly liked the floating, frosted-glass navigation style used by some mobile apps, with rounded corners and a highlighted active tab.

Ask your assistant:

Add a floating bottom navigation bar to the mobile version of my app.\
\
Requirements: Use a floating, pill-shaped navigation bar with rounded corners, a translucent frosted-glass background and a subtle drop shadow. Use my app's existing colours and visual style. Inspect the existing app and choose appropriate destinations and labels. Each item should have a clear icon and readable text label. Highlight the currently selected item with a softly tinted background. Make every navigation item functional by connecting it to the corresponding existing page, screen or feature. Keep the navigation fixed near the bottom while users scroll. Respect the iPhone safe area so the bar doesn't overlap the Home Indicator. Add enough bottom spacing so the navigation doesn't cover content or buttons. Keep the existing desktop navigation unchanged. Avoid duplicating navigation controls unnecessarily on small screens.\
\
After I approve the design, implement it and let me test the navigation in the web preview.\
\
Do not publish the app or trigger a mobile build. Wait for my next instruction.\

Figure 13 Floating navigation bar with four destinations.

After Floot makes the changes, select iPhone in the preview and try switching between the different destinations. Check that the selected tab changes correctly, including when you tap the same tab more than once, and that the navigation bar doesn't cover any content.

You can make further adjustments and see the updated design in the iPhone preview without generating another mobile build.

Now that the app's appearance and native settings are ready, let's connect Apple, switch on mobile publishing and generate the first build for TestFlight.

4 Build the mobile app and prepare for TestFlight

Shipping an iOS app usually involves certificates, provisioning profiles, Xcode archives and manual uploads. With Floot, the process comes down to three steps: turn on mobile publishing, connect your Apple account and publish.

Get the Apple developer account ready

For Floot to upload to TestFlight, you need an active Apple Developer Program membership. A normal Apple Account or an enrollment still marked Pending is not enough. Enroll through Apple, complete its verification and payment steps, and wait for membership confirmation before connecting it to Floot. The annual fee is $99, with local pricing where available.

You can keep editing and testing the web app while Apple processes enrollment. Once the membership is active, continue below.

An iOS build is a packaged version of the app that can be installed on an iPhone. TestFlight is Apple’s service for distributing that build to testers. Uploading a build there does not publicly release it on the App Store.

Understand the mobile publishing settings further

Open Publish in your Floot project. You will see a switch labelled Publish mobile app. Keep it turned Off when publishing or updating your website. This allows you to publish web changes without using any of your mobile build allowance.

We will turn on mobile publishing later when connecting Apple and preparing our first iPhone build. Simply turning on the switch does not start a build. A build only starts when you click Publish or Publish update with mobile publishing enabled.

Figure 14 The Publish mobile app switch starts off.

Live mode

Turn on Publish mobile app, click Advanced, choose Live mode. This connects the mobile app to your published website. Test mode uses Floot's preview server, but the app stops working four hours after publishing.

Figure 15 Choose Live mode under Advanced.

Connect to the Apple App Store

You cannot access the Apple App Store connection settings while Publish mobile app is turned Off (Figure 16). You need to turn it On to connect your Apple developer account (Figure 17).

Simply turning on the switch does not trigger a mobile build or use your b...