Using State to build a Dynamic Card Stack | Cloneable

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Clone Tinder

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
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

Using State to build a Dynamic Card Stack

Complete and Continue

Discussion

7 comments