So you’re building your own iOS Tinder Clone in Swift by using our premium Swift Dating Template. In this Swift tutorial we are going to describe, step by step, how you can get your MVP up and running in only a few minutes. If you already have experience with Firebase, feel free to skip to the interesting parts.

On a high-level, you need to run the app in Xcode, override the Firebase .plist configuration file with your own, create a few dating profiles within the app and have the app uploaded to the App Store. Let’s get started.

1. Run the Swift app template in Xcode

If you’re an expert, you can just install the pods and open the .xcworkspace in Xcode. If you’re a newbie like many of us, follow our detailed tutorial on how to do it step by step.

2. Link the Swift project to your own Firebase account

Again, if you’re an expert, just replace the GoogleService-Info.plist file with your own. Click here for a detailed tutorial on how to complete this step by step.

3. High-level iOS Dating App Design

With regards to the high-level architecture, here’s how the app is structured:

  • Core – it contains all of the base components that are used across all of our templates. In this folder, you can find classes that handle generic tasks, display generic UI as well as generic Dating UI:
    • Low-level infrastructure: Networking, pagination, Firebase connection, push notifications, etc.
    • Generic user interfaces: Chatting, Navigation, User Profiles, UI Extensions, User Onboarding, etc.
    • Generic Dating components: Models, Data Source protocols,  Swipe Managers, etc.
  • DatingApp – it contains the main dating UI components, specific to the Tinder app. Among the most important ones:
    • Configurations
      • DatingServerConfiguration – this class manages the server configuration. This is the configuration you can change if you want to disable Firebase for example
        dating app server

      • DatingUIConfiguration – this is the bread and butter of your UI. It defines the main colors, fonts, tab bar appearance, and navigation bar appearance of your app. This is the file to modify to change the app theme.
        swift theming

    • AppDelegate.swift – This is the entry point of your app, and it’s in charge of creating all of the configuration objects.

    • DatingHostViewController – This class is the main view controller of the entire app and it manages & coordinates the displaying of all the screens: Walkthrough, Login, Sign Up, Side Menu, Tab Bar, etc. It hosts all the view controllers of your app. Notice how it’s using the powerful ATCHostViewController, which is our Core view controller, used on all of our Xcode templates. Change the ATCHostConfiguration object, if you want to modify navigation icons, tabs, menu style (tabs vs. drawer), top navigation buttons, tab titles, menu spacing, etc.
      tinder clone source code

    • DatingFeedViewController – This is the class that’s your home screen. It used KolodaView for Tinder-like card swiping. Notice how it’s using swipeManager to record the swipes into Firebase.

    • DatingAddProfilePhotoViewController – The class where users can upload their profile photo, after account creation.
      dating app profile

    • ATCDatingAccountDetailsViewController – This is the screen where users complete their profile, with information such as age, gender, bio, school, first name, last name, etc.
      dating app onboarding

There are more key components as part of the Swift source code, which will help you out with further customizations. Let’s break down the anatomy of our Tinder clone app:

  • ATCDatingFeedFirebaseDataSource – this class is in charge of fetching dating profiles from Firebase and filter them out based on gender preference, location, etc. If you want to change the dating profile recommendations logic, this is the place
    tinder firebase

  • ATCDatingFeedMockDataSource – In case you decide not to use Firebase (by disabling it in the configuration file), the app will automatically use this mock static data. You can hardcode all the complete dating profiles, with photos, names, gender, etc. in this place.

  • ATCDatingFirebaseSwipeManager – This component records all the swipes in Firebase (likes, super likes and dislikes). It just writes to the “swipes” table. It also exposes an API (checkIfPositiveSwipeExists) that returns whether there is a mutual swipe, based on which, the matching is done.

  • ATCProfileFirebaseUpdater – As the name denotes, this class contains the utility methods of updating a user’s profile. It has support for uploading photos (to Firebase Storage) as well as updating the profile picture URL in the “users” Firebase collection.

  • ATCDatingChatHomeViewController – this is the main screen displaying the matches (in the Stories tray) and the recent messages with the matches. It is a sub-app in itself since we are using our generic chat components (also used in the Chat app template). To make UI changes, you can just modify the ATCChatUIConfiguration object.

  • ATCChatThreadViewController – this is a 1-1 chat room. It handles the bubbles UI as well as retrieving and writing messages data to/from Firebase. It also uploads images to Firebase Storage, when you’re sharing a photo via chat. It leverages MessageKit (which is an open-source framework, installed via Pods) for the bubble UI part.

  • ATCPushNotificationSender – Class that’s responsible for sending out push notifications (e.g. when new matches happen, when messages are received, etc.) Make sure you update this class with your own server key, from your own Firebase account.

4. Frequently Asked Questions

4.1. How do I customize the Walkthrough screens?

In ATCWalkthroughStore, change the content of the walkthroughs array as you’d like. Each ATCWalkthroughModel represents a walkthrough screen, so you can add/remove screens, and modify the title, subtitle, and icons of the existing screens. The colors are being specified in DatingUIConfiguration.

dating walkthrough

4.2. How do I customize the Login, Sign Up and Landing screens?

In DatingHostViewController, locate the onboardingCoordinator method and change its configuration as you wish. You can change the copy of buttons, titles, subtitles

4.3. How do I customize the Dating App Splash Screen?

Just open the LaunchScreen.storyboard file and make drag-and-drop changes in Interface Builder (Xcode’s visual editor).

dating app launch screen

If you followed our tutorial and you still have questions on how to make awesome customizations to your Tinder Clone for iOS, don’t hesitate to shoot us an e-mail. We’d love to add more useful information to this comprehensive documentation.

Shopping Cart