Pre­Order our PREMIUM Course Now to Save $300 ×

Build Tinder mobile app with Ionic and

Angular
9 
Shares
Leo Trieu

nero

 Full Source Code

  Discussion Support

 Mobile Ability

OVERVIEW TASKS   10 REVIEWS   2

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 Pro le and here we have your...

   AngularJS (/projects/build-tinder-mobile-app-with-ionic-and-
angular/tasks/angularjs) 1:39

   NodeJS (/projects/build-tinder-mobile-app-with-ionic-and-
angular/tasks/nodejs) 2:12

   Ionic (/projects/build-tinder-mobile-app-with-ionic-and-
angular/tasks/ionic) 2:50

   Firebase (/projects/build-tinder-mobile-app-with-ionic-and-
angular/tasks/ rebase) 1:12
    SublimeText 3 (/projects/build-tinder-mobile-app-with-ionic-and-
angular/tasks/sublimetext-3) 4:27

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? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task)
0:37

   Introduce Side Menu Ionic Project (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/introduce-side-menu-ionic-project)
5:20

   Custome Side Menu (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/custome-side-menu) 12:25

   Create Login Page (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/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? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
13aabaf2-f6a2-4a09-9dcc-836a06734e38) 0:24

   Create Facebook App and Fake Users (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/create-facebook-app-and-fake-
users) 6:30

   Setting up Firebase (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/setting-up- rebase) 4:28

   Authentication with Facebook (/projects/build-tinder-mobile-app-

with-ionic-and-angular/tasks/authentication-with-facebook) 14:31

Task 4: Create Pro le 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? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
d066fadb-21ad-46ec-9f7f-7d6b8f33e1bc) 0:29

   NoSQL Database Structure (/projects/build-tinder-mobile-app-with-

ionic-and-angular/tasks/nosql-database-structure) 4:27

   Create Prole on Firebase (/projects/build-tinder-mobile-app-with-

ionic-and-angular/tasks/create-pro le-on- rebase) 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 elds that you
got permission to access like email, birthday....

   What are we building in this task? (/projects/build-tinder-mobile-

 app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
f83e1952-349e-4ec7-9cce-632f33733ae8) 0:36

   Facebook Graph API (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/facebook-graph-api) 8:24

   Update Pro le Page (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/update-pro le-page) 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? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
38061f9d-4fe9-4b90-bd0e-5b83a44761ad) 0:28

   Design Settings Page (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/design-settings-page) 4:27

   Working on Events (/projects/build-tinder-mobile-app-with-ionic-

 and-angular/tasks/working-on-events) 7:14

   Store Personal Settings in Local Storage (/projects/build-tinder-

mobile-app-with-ionic-and-angular/tasks/store-personal-settings-in-
local-storage) 6:47

Task 7: List Users based on Settings

 We start o 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 pro les on our database....

   What are we building in this task? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
4ca883dc-d878-4f0f-a8bc-7abb74097133) 0:38

   Create Fake Facebook Users (/projects/build-tinder-mobile-app-

with-ionic-and-angular/tasks/create-fake-facebook-users) 3:58

   List All Users (/projects/build-tinder-mobile-app-with-ionic-and-

angular/tasks/list-all-users) 5:49

   Filter User List with Personal Settings (/projects/build-tinder-mobile-

 app-with-ionic-and-angular/tasks/ lter-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? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
4be8e82a-4bc3-44aa-b97f-04022bb1a759) 0:45

   Create Sliding Cards (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/create-sliding-cards) 8:55

   Create Buttons Like and Nope (/projects/build-tinder-mobile-app-

with-ionic-and-angular/tasks/create-buttons-like-and-nope) 4:35

   Database structure for Likes (/projects/build-tinder-mobile-app-

with-ionic-and-angular/tasks/database-structure-for-likes) 10:00

   Refactor User List (/projects/build-tinder-mobile-app-with-ionic-

 and-angular/tasks/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? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
50e1ed46-4edb-40d1-b123-9d76e9dcf337) 0:50

   Database structure for Matches (/projects/build-tinder-mobile-app-

with-ionic-and-angular/tasks/database-structure-for-matches) 7:31

   List All Matches (/projects/build-tinder-mobile-app-with-ionic-and-

angular/tasks/list-all-matches) 10:09

   Un-match (/projects/build-tinder-mobile-app-with-ionic-and-
angular/tasks/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? (/projects/build-tinder-mobile-

app-with-ionic-and-angular/tasks/what-are-we-building-in-this-task-
5c44f5e0-4634-460d-93f7-7b16ac6610f3) 0:26

   Show Modal Info (/projects/build-tinder-mobile-app-with-ionic-

and-angular/tasks/show-modal-info) 5:44

   Show User Info (/projects/build-tinder-mobile-app-with-ionic-and-

angular/tasks/show-user-info-cea44c4e-d860-4f38-96c6-
27eb1bdf7c31) 2:44
 (/)

© 2016 Code4Startup, All Rights Reserved.

Blog (/startuphack) - Terms (/terms) - Privacy (/privacy-policy)

Contact us at
leo@code4startup.com (mailto:leo@code4startup.com?Subject=Support)

(https://twitter.com/Code4Startup) (https://www.facebook.com/code4startup)

(https://github.com/leotrieu) (https://www.youtube.com/channel/UCStIVSuXRCDGHDM99S-nqkg)