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
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.
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.
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.
Popup message system.
Show profile details of a User in a Modal popup.
A burning desire to learn new things and build great app.
Great course Leo! Super fun! (It was a bit challenging to follow the updates for Firebase, and I'd personally prefer to have all code on a github repo, but if you have some experience in debugging ... it is no problem!) Thanks! Very cool!
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.
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
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
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...
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...
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...
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...
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....
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...
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....
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,...
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...
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.
Task 11: Chatting system - [NEW]