How I built an app in 5 days

Welcome back to the Avicenna AI newsletter.

Here's the tea 🍵

• Want me to help you build an app?

  • Habit Buddies

  • How much did it cost?

  • What’s the catch?

• Getting Started

  • Your first prompt is extremely important (6:38)

  • One thing at a time (9:44)

    • 1. Tackle One Feature at a Time

    • 2. Keep the Context the Same in Each Prompt

  • Using Replit’s in-built DB & Authentication (10:40 …

    • The Database

    • Authentication (29:36)

  • Test, test, test (17:57)

    • Use the Console Log

  • Key Tips

    • 1. Read the Agent's Thought Process (12:46)

    • 2. Remember to Optimise for Mobile (31:06)

    • 3. You Don't Have to Push to the App Store (31:51)

• Pushing to iOS app store (36:07)

  • Rebuilding the app in 2 days (45:00+)

Want me to help you build an app?

Email me: [email protected] 

If you’d rather watch me talk about how to build an app with AI and debug my app in real time, check out this video I made.

I’d appreciate any kind of support, a like/comment/sub, on the vid, would mean a lot to me 😊.

Disclaimer: This is not an advertisement for Replit. I have not been paid to make this. This is purely from my experience using Replit and building this app. All opinions and takes are my own and will always be my own.

Yes, I actually made an app in ~5 days. This app is now on the iOS app store. It’s called Habit Buddies. You can download and use it right now.

Check it out here 👉 https://apps.apple.com/au/app/habit-buddies/id6748829925

Habit Buddies

Habit Buddies is a social habit tracking app. It lets you track habits by yourself, but also create groups and track habits with friends and family. The idea is to help you stay motivated to do things with others and see your progress.

You can choose to add points to habits as well to gamify the experience and compete on habits to see who’s being most consistent. There are leaderboards for different groups so you can compete with different people on different habits.

Since I started travelling, I’ve realised how hard it is to maintain consistent habits, so I’ve been using Habit Buddies personally to help me get on top of things I need to get done.

How much did it cost?

Replit has their own Replit Agent. The Agent works on a per usage basis. The more you use it and the more code it writes, you’ll be charged.

In total I spent ~$200 AUD in Replit Agent credits. I also paid for:

1. Replit Core subscription - $20/m. Since all my projects are on Replit, I already pay for this. If you want to host your project through Replit, then you’ll have to pay this monthly fee.

2. Apple Developer Account - $99USD annual fee. You need this to put an app on the app store

Considering the output, and more importantly, the learnings I’ve had during the creation of the app, the price isn’t that high. I remember trying to build an app back in 2019 and people would quote $100k+. They still do this today as well, and unfortunately, business owners and people simply don’t know any better.

Also, for all the people who have an idea and don’t know how to make an app, this is a cheap way to bring your idea to life and validate it. Also, and I can’t stress this enough, you will learn so much about how AI works, what makes it good and bad, and what is possible. With this info, building the next thing will be much easier.

What’s the catch?

There are 3 main ways (probably more but for simplicity we’ll say 3) to create mobile apps.

Side note: A web application or web app is a website where you can use an app. The app doesn’t need to be downloaded, you just use the app from the browser.

1. You create a web app that can be use on Chrome or Safari, but, you optimise the web app really well for mobile use. You then package your web app and put it onto the iOS or Google play store. Users can then download your web app as a mobile app and it functions just like a mobile app. There is no apparent difference to the user. This is called a Progressive Web Application (PWA).

2. You can code a mobile app using React Native. React native is a framework that lets you code an app and then push it on to both the iOS and Google play store. It packages your app for both stores. This is called a hybrid application.

3. You code your app specifically for iOS or Android. Apple has a programming language called Swift, which lets you build iOS applications. For android you can use a variety of programming languages like Kotlin, Java or C++. If you develop an app in Swift, you can only push this app to the iOS app store. If you wanted the same app on Android, you’d have to code the entire app all over again in another programming language that is compatible with the Google play store. This is called native app development, where you specifically build an app for either iOS or Android.

Habit Buddies is a PWA. Not specifically built as a mobile app, but a web application optimised for mobile use. For simple apps that don’t require too much work, a PWA is a great way to quickly test out an app and how well it works.

In saying this, I know some people will think they only want to build mobile specific apps, either hybrid or native. I’ll talk more about this at the end as I’ve already been experimenting with hybrid app development.

Getting Started

Congratulations for making it this far. Now, let’s go into Replit and start building.

Here’s how to build an app with AI.

Your first prompt is extremely important (6:38)

The start of your app building journey, your first prompt and the few that follow are the most important part of this entire process. A solid start makes everything easier. If you start with bugs and issues, it will make it almost impossible to go far and build a full application.

When starting your building, it’s a good idea to give the Agent some context. Not so little like a one-liner, but also not so much that you list every single possible feature.

Give the agent the big-picture context. This helps it understand where the project is headed. You don't need a perfectly engineered prompt; just a clear summary.

For Habit Buddies, I explained the overall vision:

That's enough context. But this is not the end of your prompt. What you write next is the most critical instruction you will give.

Next, you must tell the agent to build the most basic, bare-bones functionality first. Don't let the AI decide where to start! You need to direct it to lay a simple, solid foundation.

This is the key instruction I added to my first prompt:

This is so important because it's much easier for the AI to build on top of a simple, working feature than it is to go back and fix a complex, broken one. You want to build one thing at a time, make sure it works, and then move on.

One thing at a time (9:44)

So you’ve started your app. The Agent has built the basic functionality, and it works. What now?

The core principle is to build one feature at a time and to keep your instructions focused.

1. Tackle One Feature at a Time

Now that a user can create and log a single habit, you can start adding to that feature. Can they create multiple habits? Can they see the history of a habit? These are all related to the core "habits" functionality.

What you don't want to do is jump to a completely different part of the app. A massive red flag would be telling the agent:

Don't do that. Complete one entire feature (like all the core habit-tracking functions) before you even think about starting the next one (like groups). This keeps the process clean and predictable.

2. Keep the Context the Same in Each Prompt

As your app gets more complex, you'll have multiple bugs, issues and ideas to work on. When you ask the AI to make changes, it is critical that all the requests in a single prompt relate to the same feature.

The AI has a limited context window. If you ask it to fix unrelated things, it has to jump all over the codebase, which clogs its memory and dramatically increases the chance of errors.

This is a good prompt:

Both requests are related to the "habits" feature. The Agent can load the relevant files into its context once and address both issues efficiently.

This is a bad prompt:

These are three completely different and unrelated features (habits, groups, user settings). This forces the agent to search for code in three separate places, eating up its context and making it very likely that the changes it implements won't work properly, or will even break something else.

The rule is simple: group your requests by feature. Solve all the "habit" issues in one conversation, then start a new one for all the "group" issues. This is the best way to ensure the Agent works best.

Using Replit’s in-built DB & Authentication (10:40)

Every app with user accounts needs two core components: a database to store information and authentication to manage user sign-ups and logins. For new developers, these are some of the most annoying and tedious parts.

Luckily for us, Replit makes this incredibly simple.

The Database

Your app needs a place to store information for each user; their habits, their groups, their progress, etc. This is what a database is for.

The beautiful thing about Replit is that it has its own in-built database. Setting it up is as easy as it gets. All you need to do is tell the agent:

That's it. You don't have to configure anything, find an API key, or use an external service. The agent will handle everything automatically.

However, don't just trust the agent blindly. I highly recommend you check the database yourself. In your repl, you can open a new tab and search for "database." This will open a view where you can see all your tables and the data inside them. This is a fantastic way to verify if the agent is storing information correctly and to spot mistakes it might have missed. Many times, I found an issue just by looking at the data myself.

Authentication (29:36)

Just like the database, Replit has in-built authentication that handles user sign-up, sign-in, and account management (with options for Google, Apple, etc.). To implement it, you just tell the agent:

While this works beautifully for web apps, there's one important catch if you plan to push your app to the iOS App Store.

When I was building Habit Buddies as a PWA, I could not get Google Sign-in to work, no matter what I tried. I even switched to a different authentication provider, Clerk, and it still didn't work. It seems to be a specific issue with PWAs on iOS. If you know how to make this work, I’d love to know :).

So, if you're building for the App Store, I recommend sticking with Email/Password and Apple Sign-in. These worked easily for me.

Test, test, test (17:57)

A lot of people think building with AI means you give it a prompt and it builds a perfect application. That's not how it works. This brings me to the most important part of this entire guide and the one thing you absolutely must do: you have to test your application constantly.

The AI agent is building blind. It can write code, but it cannot see, click, or use the application it's creating. It has no idea if the feature it just built actually works in the real world.

You have to be the eyes of the AI.

This means after every significant change the agent makes, you need to go into the app preview and test it yourself. Does the button work? Is the data showing up correctly? Is the layout broken on mobile?

You then need to relay this information back to the agent. This back-and-forth collaboration is how the app gets built.

Use the Console Log

When something isn't working and you don't know why, you need a way to see what's happening under the hood. You might be wondering, why would I check? Why not let the AI check?

Unfortunately, you can’t trust the AI will check properly. When actually using the app, you can print information about what’s happening with the app in the console. This is invaluable info to get an understanding of how the app is working.

To access the browser console, right click and press “Inspect”. From there click on “Console”. This is where information about the data and app will be printed.

You don't need to know how to code to use it. Just ask the agent:

This is exactly how I solved a huge bug in Habit Buddies. The weekly habit tracker wasn't working. I kept clicking on a past week, but it wouldn't register as complete. I had no idea why. After asking the agent to log the data, I looked at the console and saw the problem. Every time I clicked on a week to log the habit, it would return that week’s date as September 7. Since this is a date in the future, it wouldn’t work and so the week wouldn’t turn green.

Without testing it myself and using the console to see the data, I would have been stuck for a while. It would have been even worse if I simply kept telling the Agent to fix it as well. This process - testing, finding issues, and working with the agent to fix them, is not an optional step. It is the process of building an app with AI. And the best part is, you will learn an incredible amount by doing it.

I recommend checking out the testing part of the Youtube video. I show exactly how I debug issues and work with the Agent to build features.

Key Tips

Before we get to publishing, here are a few simple pieces of advice.

1. Read the Agent's Thought Process (12:46)

In Replit, you can see the Agent's "thoughts" as it works. It will tell you which files it's examining, what it thinks the problem is, and what changes it plans to make. Read this! 

It's one of the best ways to learn how the Agent operates. Understanding its logic will help you write better prompts and debug issues much more effectively.

2. Remember to Optimise for Mobile (31:06)

Remind the agent that you’re building a PWA and it should be optimised for mobile. Always a good thing to remind the Agent of this.

3. You Don't Have to Push to the App Store (31:51)

This is one of the coolest things about building a PWA. If you just want to build a simple app for yourself or a few friends, you don't need to go through the whole App Store process.

You can simply open your app's website on your phone's browser (like Chrome or Safari), tap the "Share" button, and then select "Add to Home Screen."

Your app will now appear on your phone with its own icon, just like any other app you've downloaded. It will open in its own window and feel like a proper mobile application. You’d be surprised, many large apps on the app store are actually PWAs. If I remember correctly, delivery apps for Dominos and Pizza Hut at some point were PWAs.

Pushing to iOS app store (36:07)

Your app is built, tested, and working great. Now it's time to get it into the hands of users. This part can seem complex, but if you follow the steps, it's very manageable.

If you used Replit, you’ll need to deploy your app and get a URL. That’s where your app lives on the internet.

Step 1: Use PWA Builder to Package Your App
First, go to the website pwabuilder.com.

• Paste your app's live URL and press "Start."

• The site will analyse your app and give you a score with a list of "Action Items." When I first did this, my score was about 2 out of 30. Don't worry though, I just copied all the action items, pasted them into the Agent, and asked it to fix the easiest and highest impact ones.

• Once you're happy with the score, click the "Package for stores" button in the top right and select iOS.

Step 2: Download and Unzip the Package
PWA Builder will generate and download a zip folder for you. This folder contains your Xcode project and, most importantly, a file with detailed instructions.

Step 3: Follow the Instructions (and a Few Pro Tips)
Inside the unzipped folder, you will find a file called next-steps.html. It has extremely detailed instructions on what to do.

• You need a Mac with Xcode installed. This is non-negotiable for publishing to the iOS App Store.

• Open the Terminal app on your Mac. Navigate to the downloaded folder, and then into the source subfolder.

• Run these commands in order. The instructions say to run pod install, but I found I had to run a few commands before that to get it to work:

  1. brew install cocoapods (Only need to do this once).

  2. pod repo update

  3. pod update

  4. pod install

Step 4: Open the Project in Xcode
After the commands run successfully, you'll see a new file in the src folder that ends with .xcworkspace. This is the one you need to open, not the .xcodeproj file. Double-click it, and your project will open in Xcode.

Step 5: Configure Your Project in Xcode
You're almost there. Inside Xcode, there are two critical things you need to set up:

• Set Your Development Team: Click on your app's name in the left sidebar, then go to the "Signing & Capabilities" tab. Here, you must select your Apple Developer account from the "Team" dropdown. This is how Apple verifies you have a paid developer account.

• Set Permitted URLs (This is VERY Important): For authentication (like sign-in and sign-up) to work in a PWA, you have to explicitly tell the app which external URLs it's allowed to redirect to. If you forget this, your login pages won't work.

  • Go to the "Info" tab.

  • Find the key called WKAppBoundDomains. It’s right at the top

  • Here, you need to add the domains for your authentication provider. If you used Replit auth with Apple sign in, add the following URLs here:

    • replit.com

    • appleid.apple.com

Once that's done, you can follow the rest of the instructions in the next-steps.html file to build your app and submit it for review through App Store Connect.

Now you might be wondering - Nofil, this is a PWA. Sure, you can put this on the app store, but it’s not built specifically as a mobile app.

Technically, this is true.

So I went ahead and rebuilt Habit Buddies in its entirety as a hybrid application. Meaning I can take this new rebuild and put it on the iOS and Google Play Store with the same codebase. The best part is that it only took me about two days to do.

Rebuilding the app in 2 days (45:00+)

I remade Habit Buddies with React Native, specifically Expo. Expo is a framework that lets you create mobile apps for all devices.

How come I rebuilt it in two days when the original took longer? Well, this time I used Cursor, not Replit.

Does this mean Cursor is better than Replit at building mobile apps?

Not necessarily.

I do think Cursor could be better if used correctly, but, it’s not the main reason as to why I was able to build it so fast.

The main reason is that I knew exactly what I wanted. I knew exactly what each functionality needed to do, how it interacted with other features, what behaviours the app needed to have in different circumstances. I didn’t know this when I built v1. While building v1, I spent a lot of time trying a new feature, understanding what I liked and didn’t like and relayed this info back to the Agent which then made changes accordingly.

When building v2, I provided a very detailed and explicit guideline of what exactly I wanted. This made it a lot easier to build what I wanted.

Yes, it looks really ugly, but that’s because I haven’t spent any time making it look nice. I just wanted to make sure that it actually worked.

Again, the main reason I even did this v2 was to learn. I now have a very good understanding of how to build mobile apps relatively quickly. Obviously this is a rather simple app, and there will be a lot more learning as I build more complex applications.

I’ll make another post at some point showing how to build hybrid apps with Cursor.

If you made it to the end, thanks for reading! I’d love to do more tutorials like this in the future.

I want to keep bringing these AI updates to you, so if you’re enjoying them, it’d mean a lot to me if you became a premium subscriber.

As always, Thanks for Reading ❤️

^{Written by a human named Nofil}