Build Tinder mobile app with Ionic and Angular

Leotrieu

Leo Trieu

Tinder2

Full Source Code

Discussion Support

Course Focus:

Learn to create hybrid native apps using Ionic and AngularJS step by step. We will be building app from empty folder to a real app quickly.

[Important] - Notes updated for Fireabase 3

What are we going to build:

In this project I will walk you through how to recreate Tinder which is a location-based dating and social discovery application (using Facebook) that facilitates communication between mutually interested users, allowing matched users to chat.
Once you have completed this project, you will have the foundational basics to develop any mobile app that requires real-time user interactions with ease.

Why Ionic for Hybrid App Development:

ionic is an open source HTML5 mobile framework for building cross platform hybrid native apps. This means it enables the fast and easy use of web-based technology (ie. HTML, CSS, Javascript) to build highly interactive mobile apps for both Android and iOS. It also lets us access some of the phone's native functionality (like using the camera on their phone!)

What skills will we learn during this project?

  • How to setup an Ionic application.

  • How to easily work and create mobile app with basic controls.

  • How to quickly build a hybrid app that you can run on iOS or Android with real-time database.

  • How to analyse and build a NoSQL Database structure that suitable for a mobile app.

  • How to work with real-time database with Firebase 2 & 3.

  • How to work with Facebook Graph APIs to grab meta data.

  • How to use Local Storage to save small data.

  • How Ionic applies the Model View Controller Framework and how Angular applications work.

What features will we build in this project?

  • Create a Side menu for your app.

  • Authenticate user with Facebook.

  • Creating Facebook App.

  • Getting Profile details information from Facebook.

  • Personal settings page for Age, Gender.

  • Storing information on local storage.

  • Listing all Users for dating.

  • Siding card function to like.

  • Matching users.

  • Popup message system.

  • Show profile details of a User in a Modal popup.

Prerequisites/Requirements:

  • While it is helpful to have an understanding of AngularJS and Javascript, it is not necessary.

  • A burning desire to learn new things and build great app.


    • Sample Videos

    Video # 1
     
    Video # 2
     
    Video # 3
     
    • 8064281?v=3

      bhegga

      4hr time expectation is a little off. Perhaps with a larger library of mistakes, it will approach that, but I've encountered many roadblocks on the way trying to build this thing.

    • Photo

      kamal shahim

      Great course!, enjoyed it, nice way to learn developing mobile projects (project oriented approach), for which you learn what you need to build a tinder or similar projects

    • C7c4b2cf20a02cf56de691fcffc2fe27

      daniel

      it was great, until when I tried to login and receive that this project uses an older SDK version , and the changes needed to be made are not explained or nor easy.. but it WAS a great project anyway

    • 0960dfef3bf023c63b222ae6297faef1

      Jane Collins

      Great course to build a mobile app. I like his method, easy to follow and catch up thing quickly. Totally enjoying this course. Thank you!

    • B856d9e8fbffb8dbd7468df550955f71

      HassanE

      Thanks Leo

    • Task 1: Introduction to the Technologies

      In this project, you’ll be learning how to build a hybrid mobile app like Tinder with Ionic + Angular + Firebase. So you can login with your Facebook account just like Tinder. Once you logged in, you can go to your Profile and here we have your...

      • AngularJS 1:39  
      • NodeJS 2:12  
      • Ionic 2:50  
      • Firebase 1:12  
      • SublimeText 3 4:27  
      • Download Source code (Firebase 3 version)  

    • Task 2: Build basic project

      In this task, we’re going to build a basic project structure with side bar from scratch. You will be learning how to customise with your side menu and add as many menu items as you want with correspondent views. Also, you will learn how to create...

      • What are we building in this task? 0:37  
      • Introduce Side Menu Ionic Project 5:20  
      • Custome Side Menu 12:25  
      • Create Login Page 7:23  

    • Task 3: Authentication with Facebook

      This task is gonna be a lot of fun as we’re going to create a Facebook app to allow users to be able to login with their Facebook account. Also, I will teach you how to quickly create fake Facebook users so it will make the testing process so much...

      • What are we building in this task? 0:24  
      • Create Facebook App and Fake Users - [Notes Updated] 6:30  
      • Setting up Firebase - [Notes Updated] 4:28  
      • Authentication with Facebook - [Notes Updated] 14:31  

    • Task 4: Create Profile Database

      In this task, I will teach you how to design and work with Firebase database structure which is very crucial part of developing an mobile app. And also, we will be creating functions to send data from client to our back-end database in Firebase...

      • What are we building in this task? 0:29  
      • NoSQL Database Structure 4:27  
      • Create Profile on Firebase - [Notes Updated] 9:06  

    • Task 5: Get Images and Bio from Facebook

      In this task, I will teach you how to use Facebook access token to debug and get the data from a Facebook account with Facebook Graph API like what you see here. You can test with any fields that you got permission to access like email, birthday....

      • What are we building in this task? 0:36  
      • Facebook Graph API - [Notes Updated] 8:24  
      • Update Profile Page - [Notes Updated] 14:39  

    • Task 6: Settings Page

      In this task, we’re going to work on Ionic controls to create our Settings page. Basically, in our app, we allow user to customise their settings like the range of age that they’re interested or they want to show men or women. Also, I’m going to...

      • What are we building in this task? 0:28  
      • Design Settings Page 4:27  
      • Working on Events 7:14  
      • Store Personal Settings in Local Storage 6:47  

    • Task 7: List Users based on Settings

      We start off this task by learning how to create multiple fake Facebook users in no time and that will save us a bunch of time so we don’t have to create them manually. And as you can see, we’re going to create their profiles on our database....

      • What are we building in this task? 0:38  
      • Create Fake Facebook Users 3:58  
      • List All Users 5:49  
      • Filter User List with Personal Settings 9:57  

    • Task 8: Build Sliding Cards

      In this task, we’re going to transform our user list into Tinder style so we can swipe left to ignore or right to like a person. We also create two buttons with the same functionality and as you can see on the Firebase side, once we like a person,...

      • What are we building in this task? 0:45  
      • Create Sliding Cards 8:55  
      • Create Buttons Like and Nope 4:35  
      • Database structure for Likes - [Notes Updated] 10:00  
      • Refactor User List 7:07  

    • Task 9: Match Users

      In this task, we’ll be learning how to create a match between two users and how to un-match them. For example, if I like this user and this user already liked me then we have a match. And the way we present this in the database is like this. We...

      • What are we building in this task? 0:50  
      • Database structure for Matches - [Notes Updated] 7:31  
      • List All Matches 10:09  
      • Un-match 6:38  

    • Task 10: Show User Info

      What we’re going to build in this task is pretty quick. In the Home page, we’re going to create Info button just like this and once you click on it, it will display a modal with details of the user. It’s very easy to do and let’s jump in.

      • What are we building in this task? 0:26  
      • Show Modal Info 5:44  
      • Show User Info 2:44  

    • Task 11: Chatting system - [NEW]

      • Create Modal for chatting  
      • Styling the Messages in Chat  
      • Sending Messages function  
      • Online/Offline status