Justin Nothling – Clone Tinder for Android & iOS

Justin Nothling – Clone Tinder for Android & iOS

Get Justin Nothling – Clone Tinder for Android & iOS at Tenlibrary.com

Clone Tinder for Android & iOS

Course Curriculum

Up and Running in < 10 minutes ⏳

• Download (0:55)
• Install Homebrew & Watchman (macOS only) (1:19)
• What is React Native? (0:57)
• What is Expo? (2:02)
• Hello World (2:28)

Setting Up Our Coding Environment

• Setup Visual Studio Code (4:21)
• Workflow (2:03)

Run an iPhone simulator on your MacOS  (Optional)

• Setup iOS Dev Environment (1:28)
• Test iOS Dev Environment (0:50)

React Native Basics

• Creating our First Component  (4:07)
• 3 Minute Theory – const & let (3:10)
• 3 Minute Theory – Data Types (2:44)
• Basic Styling (5:28)
• Flexbox in a Nutshell (2:26)

Build a Tinder Card with Swipe Animation

• Creating a Card (3:13)
• Adding a Profile Image from Facebook (3:21)
• The PanResponder – Handling Gestures (1:03)
• 3 Minute Theory – Functions (2:42)
• Gesture Animation (6:48)
• Interpolation (0:41)
• Card Rotation & Spring (3:04)
• Stacking Tinder Cards (5:43)
• Swipe Away (3:25)
• Creating Different Card Profiles (5:15)
• Using the Map Function (1:44)
• Creating Cards with Map (2:15)
• Understanding State in React Native (3:27)
• Using State to build a Dynamic Card Stack (4:57)

Firebase

• What is Firebase?
• Setup, Demo Data and Testing (4:26)
• Using Data From Firebase (2:27)

Navigation

• Restructuring Our Project (4:09)
• Login Screen & Facebook Button (6:06)
• Introducing React Navigation (0:47)
• React Navigation Setup (3:37)

Facebook Login

• Async Await (Asynchronous code) (2:56)
• Login With Facebook (5:58)
• Authenticate Users with Firebase using Facebook (2:45)
• Facebook Permissions (3:25)
• Create a User in Firebase (3:19)
• Checking if a User is Logged in (2:04)

Location

• Accessing User Location (2:20)
• Setting Location in Firebase using GeoFire (3:28)
• New Demo Data (2:36)
• Get Profiles Within 10km Using GeoFire (3:35)
• Getting Users and Rebuilding the Card Stack (4:47)

Creating a Simple Scroller Component

• Basic Setup (5:15)
• Adding Screens (5:20)
• Flick Gestures & Scroll Limits (4:53)

Making the Login Process Awesome

• Reset the Navigation Stack (2:31)
• Adding a Spinner (Activity Indicator) (2:27)
• Get User Data from Firebase Before Login (4:31)

Bulding a Profile Screen

• Adding a Profile Image (5:20)
• Sliders (5:20)
• Switches (2:50)
• Connecting Components to Firebase (5:43)

Filtering Our Card Stack

• Filter by Location (3:42)
• Filter by Gender (6:41)
• Filter by Age (4:20)

Matching

• Creating Relationships in Firebase (6:25)
• Filter Swiped Cards (4:45)
• Create a Match Screen with the ListView Component (7:19)
• Enabling Vertical Scrolling (2:46)
• Fetching Matches from Firebase (8:44)

Chat

• Adding Demo Messages (4:56)
• Sending Messages to Firebase (7:31)
• Fetching Messages from Firebase (4:37)

Firebase Security

• Lockdown Users and Location (6:53)
• Lockdown Relationships (3:56)
• Lockdown Messages (2:00)

Packaging for the App Store

• Building Standalone Apps using Expo

Get Justin Nothling – Clone Tinder for Android & iOS at Tenlibrary.com