Cover - Map Tracker

Getting Out of the House More

My friends & I haven’t left the house in 6 months (it’s grind season). As someone who loves to explore, this has been eating away at me. I decided we needed some motivation to step away from our desks.

So, I built this app to gamify getting out of the house more. Turning it into a game was my only shot at getting a group of software engineers to start exploring their city. Now, we are all in competition with each other to see who has more of a life. Although, since downloading onto my phone, I went from 0% to 1% of NY explored… You can obviously see how great I’ve been doing!

How it works: Each county in the US is populated with a grid of red cells. Click on the county you are currently in, and as you explore, the tiles that you are inside of will turn green! You can then track your percentage of that county and state explored! Compete with your friends to see who gets out of the house more! (I’m losing)

Planning Process

In order for this app to be a hit, it needed to be 3 things minimum:

Mobile App - needs to have constant access to user’s location
Accurate - in order to be usable, the geographic data needs to precise
Fun - trackers need to be fun! Nobody wants to use a boring tracker :(

Context: This was my first ever mobile app. Also, my first app using any type of map system. Deep project scoping led me down rabbit hole after rabbit hole. Let’s go through the process, shall we?

^^ After switching to Apple MapKit, I planned the classes and features I would use

Sharing + itinerary functionality quickly became out of scope. In order to have an accurate mapping system, that’s where my focus needed to be. At the point of scoping, I actually decided that I would build the app using React Native with the Expo Framework. I’m very familiar with React, and learning an entire new language (Swift) felt out of scope at the time. For the map overlay, I decided I would use a tile-based grid system, so there would be clear boundaries separating each city/state. At this point, I assumed that state/city/neighborhood lines were clearly defined by the mapping platforms, so I assumed a tile-based grid system would be compatible with those borders… spoiler alert… it wasn’t. For now:

MVP: a React Native app with the Expo Framework that uses native map platforms to generate a tile-based grid system that populates with data as a user explores a city. A user will be able to view all of their progress on a tracking page.

Wireframes / Designs

Build Process

Before I tell you what went right, here’s what went wrong:

I LOVED React Native, and Expo made it SO simple to launch and test your app with hot-reloading abilities. But…
I could not implement the type of map overlay I wanted in React Native without using native code in Swift/Kotlin. I tried using Google Maps Platform to hard code this to be the default map system. However, Expo Go is not compatible with this feature, so I was no longer able to see the changes I was making. With this being my first mobile app, and intrinsically a very visual app, I decided this was no longer working for me. So…
I ditched React Native w/ Expo altogether. I decided to dive head first into Swift in Xcode, using Apple MapKit as the default. I used their Simulator feature to test and view the changes I was making.
Turns out the boundaries for state/city/neighborhood lines are not clearly defined in Apple Maps. I was generating grids that overlapped with other states and could not get the formulas right. So…

I ditched the city/neighborhood idea, and decided on counties. Every state is split into counties that fit together like puzzle pieces, which is exactly what I’ve been looking for! In order to create accurate county boundary lines, I imported a GeoJSON file that contains the borders for every county in the United States.

Next, grid tracking. Initially, I was using Supabase to store and track visited cells. This was manageable when testing a small area, but when I expanded to the entire country, it was no longer possible. To save time loading, cells are only rendered when a user clicks on a county, which in my time limit, I was not able to make compatible with Supabase. Instead, visited cells are stored in UserDefaults. This will change in the future when I fully implement Auth + Database.

Future Features

There are many more features that could take this app to the next level:

Leaderboards: compete with other users or your group of friends
Auth + Database Management: associate progress with a user’s account, not their device
Expand to other countries: as someone who plans on travelling the world some day, would like to track world progress
Neighborhood tracking: being from NYC, I know how important it is to organize where you frequent by neighborhoods, need to find a way to get clear neighborhood boundary lines
Speed: unfortunately my app isn’t the fastest, want to figure out ways to make it seamless + quick