Forem: Ibrahim

How to Build a Mobile App Using Free AI Tools: My Journey with Splitup

Ibrahim — Fri, 23 May 2025 07:06:58 +0000

I recently created Splitup, a simple expense-splitting app, using only free AI tools. Here's a step-by-step guide on how I did it and what I learned about leveraging AI to streamline app development.

What I Wanted to Build

I'd tried several expense-splitting apps, but most felt cluttered or overly complex. My goal was to create something focused on 3 things:

Split expenses seamlessly
Send reminders to friends
Simplify settling up

With a clear vision, I turned to free AI tools to bring Splitup to life. Here's how you can do the same.

Step 1: Set Up Your App's Foundation

Tool: Cursor + GitHub Copilot (free tiers)

How I Used It: These tools were perfect for generating the app's structure, routing, and boilerplate code. I used Cursor's AI to scaffold my Flutter project and Copilot to suggest code snippets for navigation and basic setup.

Tip: Use Cursor rules for optimal results. Start with small, specific prompts like

Generate a Login Screen with google and apple login buttons.
Create a Controller using Riverpod 2.0.
Keep the business logic in Controller separate from the UI.

Break down your app's core components and let AI handle the repetitive setup work.

Step 2: Build a Robust Backend

Tool: Supabase AI

How I Used It: Supabase was a revelation for me as a first-time user. Its AI features helped me design database schemas, set up Row-Level Security (RLS) policies, define constraints, and create webhooks for real-time functionality.

Tip: Use Supabase's AI to draft your database schema by describing your data model in plain language (e.g., "a table for expense transactions with foreign key constraints to group table (group_id)"). Test and refine the generated SQL to fit your needs.

Step 3: Design a User-Friendly Interface

Tool: ChatGPT

How I Used It: I leaned on ChatGPT for UI inspiration, app icon ideas, and writing app store descriptions. For example, I prompted it with "suggest a clean, modern UI for a budgeting app" and got actionable design ideas.

Tip: Be specific with your prompts:ask for color schemes, layout ideas, or even specific UI components. Use the suggestions as a starting point and tweak them to match your vision. Now I would use https://stitch.withgoogle.com, which would do a much better job at UI design.

Step 4: Debugging, Optimizations and Core app Features

Tool: Grok

How I Used It: Grok was my go-to for debugging tricky issues, writing Supabase edge functions, and exploring monetization strategies. It helped me fix bugs by analyzing error logs and suggesting precise solutions. Apps's core logic of settling balances was written by Grok.

Tip: When stuck, share your code or error messages with Grok and ask for step-by-step fixes. For advanced features like edge functions, describe the logic you need with as much detail as possible, and refine the generated code through iteration.

Key Takeaways for Building with AI

Break It Down: You can't build an entire app with one prompt. Split features into smaller tasks (e.g., "create a login screen" or "write a function to split expenses") and iterate multiple times.

Clarify Your Vision: A clear product idea keeps your prompts focused and ensures AI tools deliver relevant outputs.

Embrace Iteration: AI-generated code or designs often need tweaking. Test early, refine often, and don't expect perfection on the first try.

AI Is Essential: After this experience, I can't imagine coding without AI - it saves time and sparks creativity.

The Result

Splitup is now live on both appstore and playstore, and I'm thrilled with how it turned out. You can check it out here: https://onelink.to/etcezf.
Building it was a testament to how powerful free AI tools can be for indie developers.

Try It Yourself

Start with a simple app idea, pick one or two AI tools, and experiment. What's your favorite AI tool for development, or what are you building next? Share your tips below!

#AppDevelopment #FlutterDev #Supabase #IndieDev #MobileApps #AItools #Tutorial

Dynamic Geofencing 100+ in Kotlin - Android

Ibrahim — Sat, 15 Feb 2020 19:29:43 +0000

Geofencing API by Google helps provide contextual information to users based on their location. However, we have a limit of 100 active geofences at one time.

Lets break the limit with dynamic geofencing to suit our usecase.

What's our use case?

We need to ping our users when they are near any Toll Plaza with an "Upcoming Toll Plaza" notification on their device. How many Tolls do we have in India? 500+. Before we get into registering 500+ geofences dynamically. Lets see what do we already know.

Geo.. What?

Geofence is a geographical region which can be monitored for transition events such as Entry, Exit or Dwell. Have a look at this diagram.

We are interested only in Entry and Exit transition events for now.

We know we have a limit of 100 geofences at a time.

Straight Outta Docs:

You can have multiple active geofences, with a limit of 100 per app, per device user. For each geofence, you can ask Location Services to send you entrance and exit events, or you can specify a duration within the geofence area to wait, or dwell, before triggering an event. You can limit the duration of any geofence by specifying an expiration duration in milliseconds. After the geofence expires, Location Services automatically removes it.

Geo.. How?

Let's Engineer. We have a limit of 100 active geofence. So we need to figure out a radius for a region which can never have more than 100 geofences inside it. According to our use case, we can safely assume 300km radius. We will call this region Parent Region. Inside this Parent Region we will have multiple Child Regions - 5km radius which are our actual geofences for Tolls. When the device exits the Parent Region we will setup a new Parent Region from the device's current location and reset the toll geofences. Using this, at no point device will have 100+ active geofences. As device moves out of the 300km region, new geofences will get registered dynamically.

We now have following tasks to perform:

Parent Region : Setup a Geofence of 300km radius from user's current location with Geofence transition event set to EXIT.
Filter out locations (Tolls) from the list of 500+ locations which fall inside the above region by calculating their distance.
Child Region : Setup a Geofence of 5km radius on all filtered locations with Geofence transition event set to ENTRY.
When transition event ENTRY is triggered on Child Region, display a notification to user.
When transition event EXIT is triggered on Parent Region, unregister all the existing Child Regions and repeat steps 1 to 3.

Note: 300km for Parent Region and 5km for Child Region are assumptions I have made for my use case. Feel free to set the radii as per your requirement.

Geo..Code!

Before we get into dynamic geofences. How do we register a single geofence? Check out this great article on raywenderlich.com on how to setup geofence in Android which I have followed in this article as well.

Lets start by creating models.

Geofence

id
latitude
longitude
radius

Toll

id
name
latitude
longitude

We will be fetching our tolls from Room database. Here's an Entity class for Toll table.

1) The first step is to setup a parent geofence with a region of 300km radius.

Put this code in your Launcher/Main Activity.

What's happening?

We get user's current location.
We create an instance of GeofenceHelper class.
We setup parent geofence.

GeofenceHelper:

What's happening?

Inside setupParentGeofence() function, we create Parent Geofence model with id,lat,long and radius of 300km.
We build a Geofence with transition EXIT for parent region. We are passing an enum value GeofenceType.PARENT to buildGeofence() function for distinction.
Make sure to ask user for Background Location permission before setting up geofences in MainActivity. We include a location permission check here before registering geofences.
Use geofencingClient object to register geofences. It takes a GeofencingRequest and a PendingIntent pointing to GeofenceBroadcastReceiver where we handle our geofencing event triggers. More about this later.

2) Now we setup our Child Regions (Toll locations) which fall in the above Parent Region.

Update setupGeofences() function in MainActivity as below.

What's happening?

We are using MVVM design pattern with LiveData. mViewModel.tollsList.observe will fetch all the tolls from the database which we pass into setupChildGeofences() function inside our helper class.
Hold up! as we have seen above we need a Geofence model for registering geofences. However, we get a list of Toll models from the database. Let's transform all Toll models into Geofence models using Transformations provided by androidx.lifecycle.

Along with the tolls list, we are also passing user's current lat-long into setupChildGeofences(). Why? Keep reading!

Let's look at setupChildGeofences() function.

What's happening?

We use Location.distanceBetween() function to filter the list of locations. We use user's current lat-long and check if the toll's location is less than 300km from user's current location in distance.
We run a loop on this filtered list and register geofences similar to parent geofence. Double check you are passing GeofenceType.CHILD to buildGeofence()function.
After successful registration, we store ids of these child geofences to SharedPreferences, so that we can unregister them later.

Congratulations! We have successfully registered one parent geofence and multiple child geofences inside it.

Geo..Dynamic!

Let's jump right into code, where our Entry and Exit events are captured.

GeofenceTransitionsJobIntentService

What's happening?

GeofenceTransitionsJobIntentService's enqueueWork() is called from the onReceive() of our registered GeofenceBroadcastReceiver below.

In onHandleWork(), we have a geofencingEvent created from the intent. We pass this event to handleEvent() function where all the magic happens.
If the transition event is GEOFENCE_TRANSITION_ENTER, we have a child geofence entry event, so we generate a notification for the user with the Toll name and a title - "Upcoming Toll Plaza".
If the transition event is GEOFENCE_TRANSITION_EXIT, we have a parent geofence exit event, so we setup a new parent region and child regions same as before.
Before registering new geofences, we unregister existing child geofences by Ids stored in SharedPreferences.
For device's current location we use, event.triggeringLocation.latitude and event.triggeringLocation.longitude.
Since we are already in a background thread now, we can directly get the list of Tolls and map each element to Geofence model.

Awesome! We have successfully implemented dynamic geofencing in Android.

I am open to feedbacks and suggestions. Please reach out if you have any doubts.