How to Build a Mobile App in Under 30 Minutes With AI

In this article, we'll explore how to build a mobile app in less than 30 minutes and get it into the Apple and Android stores without writing a single line of code. In fact, we're going to do all this using just a few AI tools. By the end of this article, you'll be able to build your own mobile app from scratch. We have a lot to cover, so let's jump in.

The App Idea: Solving a Common Problem

First, what are we actually going to build? With Valentine's Day approaching, many people find themselves struggling to plan a special date. This is a common problem, and where there's a problem, there's often a business opportunity. Many people in relationships fall into the routine of the same old dates. To solve this, we'll build an app that helps users come up with awesome date ideas based on their location, budget, and available time.

The AI Toolkit

So, how are we actually going to build this? The first and most important tool in this stack is an AI builder called Bolt, which is specifically geared towards non-technical entrepreneurs.

What is Bolt?

Bolt is a prompt-based AI building platform, meaning you can build software and websites by leveraging just prompts with AI coding. With simple prompts, you can create software without writing a single line of code and then adapt what's being built as you go along, all fully prompt-based. A recent announcement has expanded its capabilities, allowing users to not only build beautiful websites but also native mobile apps for launch in the iOS and Android stores. That's what we will be focusing on.

Building the App with a Prompt

Let's jump into the tool and start building. On the website, a feature notes, "New: Build a mobile app with Expo." To begin, we need to provide a prompt.

build a mobile app that recommends date ideas for existing couples who are bored of the same repetitive dates it should recommend original date ideas based on location amount of time available and budget

We can click "Enhance prompt" if we'd like, but for now, let's proceed by clicking "Let's go." Just like that, the process begins. The beauty of Bolt is that it literally writes out all the code, structures the folders for the app, and downloads all the necessary dependencies. Once it's ready, the preview will show us what we have built in our mobile app.

First Look and Iteration

After a few moments, the initial build is complete. On the left-hand side, it provides recommendations, such as connecting to a real API for date suggestions and implementing proper state management. On the right-hand side, it gives us access to a barcode for Expo Go. By downloading the Expo Go app on a phone, you can scan the code to get a live visualization of the app.

The app's interface loads, and we can see it's working. There are three input fields for generating dates, along with tabs for "Discover," "Wishlist," and "Profile."

Let's test it out with some sample data: - Location: Los Angeles - Date: Feb 14th - Budget: $200

After clicking "Generate Date Ideas," it suggests a "Sunset picnic at Golden Gate Park" and "Cooking classes for two." Very cool.

The app also has a wishlist feature. We can try adding an item to the wishlist, but it appears not to be working initially. The next step is to start prompting it with the adaptations we're looking for.

Please make the wishlist work

After the tool processes the request, we can check if the wishlist is fixed. It is! An item can be added, and it appears in the wishlist section. It can also be removed. Now it works.

Let's continue refining the UI.

please create a logo at the top for this app called boring date

A new logo appears. Let's center it.

Could you Center that please

Boom. This is starting to look clean and cool.

Connecting to an API

Now, let's connect our app to a real data source using an API.

Could you create an API route for my open AI project API I will give you the key

If any errors appear, we can simply ask the tool to fix them. In the meantime, we need to get an API key from OpenAI. This can be done by navigating to the API keys section of the OpenAI dashboard and creating a new secret key. It's critical not to share this key with anyone, as they could use it and charge your account.

The tool will then instruct on how to use the key: "The API key will be secretly stored in the app. Go to the profile tab, enter your OpenAI API key in the new input field, and click save."

Following these instructions, we go to the profile tab, enter the secret API key, and save it. Returning to the "Discover" tab, we can test the API connection.

• Location: Los Angeles
• Date: Feb 14th
• Budget: $200

Let's see what happens. It generates ideas like "Romantic picnic at Griffith Park" and a "Gondola ride in Naples canals" in Long Beach. Nice. We can see that we can wishlist any of these, and the functionality is working.

Refining the UI

There are a couple of smaller things to adjust in the UI. For instance, we might want to remove a specific element.

Could you take this out of the UI

If the tool doesn't produce the desired result, we can try a different approach or roll back to a previous version. The next thing to do is add some images, even if they are just template images for now.

Could you add thumbnail pictures to the dates

Cool, now we have some images starting to populate. It's not perfect, but we won't continue to fine-tune this right now. Let's move to the next step and actually deploy this thing.

Preparing for Deployment

Normally, and potentially in the very near future, we'll be able to click "Deploy" and send the app to the App Store directly from within Bolt. However, at the moment, this feature is in early testing, so we'll have to use a different approach. This involves exporting the project folder by clicking "Export" and downloading the code. This leads us to our next tool.

What is Expo?

Expo, also known as EAS (Expo Application Services), is a platform that makes it very easy for people to build native mobile apps for Apple and Android. It simplifies the process by allowing you to create the app once and easily deploy it on multiple platforms simultaneously—Web, Android, and iOS. The reason we're using it is that we can grab the code we generated and deploy it to all platforms at once. It's not just a QR code app for visualization; it's a tool that allows you to build and publish.

Exporting and Setting Up the Local Environment

After downloading the project, the next tool we'll use is similar to Cursor; it's called Visual Studio Code (VS Code). It will allow us to continue our work. We'll import the project file we just created and follow a couple of additional steps.

Once VS Code is installed and the project file from Bolt is downloaded and unzipped, you can open it. The first step is to go to "Open Folder" and select the project folder. This will open up all the code that we downloaded from Bolt.

Running the App Locally

Now, we have a couple of things to do. First, open up the terminal, which is a place where we can run commands.

The first command we need to run is to install the dependencies. These are things that the code and project depend on that we need to download.

npm install

This should be very quick. Next, we'll run Expo.

npx expo start

This will kick off the project and provide a QR code for visualization, which we've already covered. It also gives us options to open the app on an Android emulator, an iOS simulator, or in a web browser. We'll be deploying it on the web. Let's check it out before we build and deploy. Opening it in a new window, we see our "boring date" app, and it works exactly the same way as before. This is fantastic, but it's currently running on a local server.

Linking to Expo for Deployment

The next step is to log into Expo, create an account, and create a new project. We'll call it "boring date." Expo will provide a display name and a slug, which we'll need. Copy the slug.

Back in VS Code, we need to link our local project to the new Expo project. First, go inside the app.json file and change the slug to the new one we just copied.

If you have a favicon or an app icon, you can upload it to the assets folder. We'll skip that for now.

Now, go back to the terminal and run the command provided by Expo to link the project.

eas project:init

It will ask a few questions. Answer "yes" to proceed. The project will be successfully linked. Now, let's run the final commands to configure and build the project.

npm run web

eas build:configure

This will get the project ready to build. Now, we run the build command.

eas build

You can choose to build for Android, iOS, or all platforms. Let's select Android. It will ask for an application ID; the default is usually fine.

A Note on Version Control

At this stage, the process may require a GitHub repository to hold the code. If so, you'll need to go to GitHub, create a new repository, and follow the instructions to link it to your local project.

Final Deployment

Once the configuration is complete, we can deploy to production.

eas submit -p all

This command creates the deployment and uploads the assets. It will provide a preview URL, something like boring-date.expo.app. Let's see if it worked.

My friends, it is deployed to the web! The Expo app works, and we have successfully deployed our first app with minimal coding skills.

If you wanted to deploy to the iOS or Android stores, you would use a similar command:

eas build -p ios

or bash eas build -p android

This would start the build process for the selected platform. It will ask for additional information, such as your Apple ID for an iOS submission. You would need to have an Apple Developer account, which requires a license fee. The process is similar for the Google Play Store.

It's super exciting to see how quickly these technologies are developing. Building an app is just one part of the journey. Remember, building an app is amazing, but learning how to launch a business is even more important.