Find My Climb App Project

An app that helps climbers find their next indoor climb while also connecting with climbing partners.

First iteration of Find My Climb (2022), a SwiftUI project.

Created Fall 2022 as a the final project for my Native App Development class, Find My Climb is the first iteration of an app that will serve as a resource, social app, and fitness tracker for rock climbers.

Project Overview

I coded this project app using SwiftUI in Xcode along with a combination of skills that I learned this semester through assignments, Mastering SwiftUI for iOS 16 and Xcode 14, and some very cool tutorials that I found online from other amazing coders who have way more experience than I do.

The Challenge

My initial idea for this project was born from personal experience. As a rock climber, I sometimes find myself at a gym without a partner to belay me. This is inconvenient and poses limitations in a climbing workout.

I thought, “Wouldn’t it be cool to just open an app and find other climbers looking for friends to climb with?” Aha! That sounds like a cool idea. So, I got to work on it for my Native App Development course.

My goal for this app is to create a community for rock climbers who want to meet friends for climbing gym hangs and outdoor adventures. I want for users to be able to interact with each other, chat, plan meetups, locate climbing gyms and outdoor climbing areas near them, etc. I want this app to be user-friendly and also filled with every resource a climber could think of.

The Solution

I had initially submitted a very basic iteration of this app for my midterm project and used my final as the perfect opportunity to get back into the project to make some improvements.

This first iteration of the Find My Climb project includes:

• Splash screen
• Home page
• List of local gyms
• Detail view of each gym
• Messenger feature
• User Profile page

Home Screen

Since I don’t yet have a login/signup view coded, I knew I wanted to make my home page as clean as possible so that I could pop the login/signup in seamlessly.

I started with a TabView, embedding each view as a .tabItem with a corresponding SF Symbol. This is how I created that navigation bar at the bottom of the screen.

I also learned a bit about GeometryReader and followed a couple tutorials to achieve the wavy effect that you see at the top of the screen. This walkthrough by fellow Medium user, Sarah, was particularly helpful! Thanks Sarah!

The home screen (left) and a snippet of code (right) demonstrating TabView.

Splash Screen

This little feature is one of the quickest ways to elevate your app! It is that very brief animation when you startup an app. You might hardly notice it as a user, but it really does make a huge difference.

Use the code below in your next project to try it out! Just place “SplashScreenView()” in your WindowGroup so that it appears upon opening your app! Edit as needed, of course.

import SwiftUI

struct SplashScreenView: View {
    @State private var isActive = false
    @State private var size = 0.8
    @State private var opacity = 0.5
    
    var body: some View {
        if isActive {
            ContentView()
        } else {
            VStack {
                VStack {
                    Image("YourImage")
                        .resizable()
                        .scaledToFit()
                    Text ("Find My Climb")
                        .font(.system(size: 40, weight: .black, design: .rounded))
                        .foregroundColor(Color.mint)
                }
                .scaleEffect(size)
                .opacity(opacity)
                .onAppear {
                    withAnimation(.easeIn(duration: 1.2)){
                        self.size = 0.9
                        self.opacity = 1.0
                    }
                }
            }
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 2.0){
                    withAnimation {
                        self.isActive = true
                    }
                }
            }
        }
    }
}

struct SplashScreenView_Previews: PreviewProvider {
    static var previews: some View {
        SplashScreenView()
    }
}

Messenger View

This was a fun challenge to tackle within my app. There are many tutorials out there for implementing chats/messengers. I followed this one on YouTube and really enjoyed learning this! Mine isn’t functional just yet, but that is on my to-do list for future iterations.

The messenger view (left) and a snippet of code (right) showing my struct for the messenger data that I created. Showing this snippet specifically for the climbers who may be looking at it ;)

Gyms View

I created a JSON file storing all of the data that I wanted to include for each local climbing gym. Then, using JSONDecoder(), I pulled this data into a ListView containing a ScrollView. This allowed me to build out a DetailView for each gym that users will navigate to when clicking on one of the gyms in the list.

I then attached the .onDelete handler to ForEach (seen below) to activate a swipe-to-delete feature. I had originally wanted to create a favorite feature that allows users to view all favorited items in a separate view. However, this was a bit beyond my level of experience and I spent the better part of a day just trying to make it work (any tips are appreciated!), so I abandoned that and just left this list alone with its swipe-to-delete feature.

NavigationView {
              List {
                  ForEach(climbList.gym) {
                        .
                        .
                        .
                      }
                    .onDelete { (indexSet) in
                            self.climbList.gym.remove(atOffsets: indexSet)
                    }
            }

The ScrollView List of nearby climbing gyms (left) and the same image with the .onDelete feature highlighted.

Detailed Gym View

This is what each detailed view looks like including a faux add-to-favorites toggle button. Well, the toggle button functions but doesn’t actually take any actions other than showing “Favorited!” below it.

This is all of the data that I compiled into my JSON file and then pulled into

The detailed gym view with the toggle button un-toggled (left) and toggled (right). All gym data was passed in using JSON.

User Profile

Lastly, I want to thank my first test user for Find My Climb. He doesn’t have opposable thumbs and tried too many times to eat the iPhone, which resulted in much slobber. He is also not my target audience for this app. So, there were some bumps in the user experience road.

However, I enjoyed creating a sample user profile page that can be populated with any number of things in the future. This was built using a few ZStacks, VStacks, shapes, and text. It is so simple in fact that I am happy to share this code (see below for snippet) so that you may implement it into your own app!

This is Uga. He is the University of Georgia’s mascot and doesn’t care at all about climbing or coding. But he sure is cute!

import SwiftUI

struct Profile: View {
    var body: some View {
        VStack {
            VStack {
                ZStack(alignment: .top) {
                    Rectangle()
                        .foregroundColor(Color(.systemMint))
                        .opacity(0.3)
                        .edgesIgnoringSafeArea(.top)
                        .frame(height: 180)
                    Image("uga1")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.white, lineWidth: 4))
                        .frame(width: 350)
                        .shadow(radius: 10)
                        .opacity(0.9)
                        
                }
                VStack(spacing: 15) {
                    VStack(spacing: 5) {
                        Text("Uga")
                            .bold()
                            .font(.title)
                        Text("Professional Mascot Dog")
                            .font(.body)
                            .foregroundColor(.secondary)
                    }
                    .padding()
                    Text("Actually hates climbing and would rather be cuddling.")
                        .multilineTextAlignment(.center)
                        .padding()
                    Spacer()
                }
            }
        }
    }
}

struct Profile_Previews: PreviewProvider {
    static var previews: some View {
        Profile()
    }
}

The Results

Overall, I am happy with the current state of this first iteration, although I am eager to improve it. I’ve learned a lot through trial and error with this app project including how large and helpful the SwiftUI coding community is. I enjoy spending time reading through forums and checking out the work that other designers and developers are doing.

Goals and ideas for future iterations of Find My Climb:

• A login/signup screen (already in the works!)
• A functioning messenger feature (current messenger is not fully functional just yet, but I have been reading up on how to achieve this)
• A functioning favorites button and favorites list view (I spent the most amount of time trying to get this implemented for this project and was unsuccessful in the end, so I am eager to solve that puzzle!)
• A discussion board that users can post to and comment on posts
• A gear sell/borrow/trade forum (I am thinking about creating something along the lines of Facebook’s Marketplace)
• A fitness tracker to track climbing workouts and progress
• A map feature that allows users to quickly locate gyms and outdoor climbing areas, complete with route maps and ratings

Thanks for reading! Please feel free to leave me feedback for this project.