Flutterflow / Firebase 2023 (Tinder clone)

Name: Flutterflow / Firebase 2023 (Tinder clone)
Rating: 4.1 (127 reviews)

Low Code / No code Flutterflow , Firebase and Stripe. Let's develop a Tinder clone.

Created byPedro Nieto Sánchez

Last updated 5/2023

English

English [Auto],

What you'll learn

From zero to hero with flutterflow
Tinder clone developed with flutterflow and firebase and Stripe payments integrated
Create a tinder clone with Flutterflow (2023) with stripe payments integrated
Low code / No Code Flutterflow (Tinder clone)
Javascript basics and simple backend with Firebase Functions

Course content

5 sections • 69 lectures • 10h 23m total length

Presentation and first project creation20:15
Explore flutter flow, a low-code tool for rapid mobile app development, and create your first blank Tinder clone project with a login UI built by dragging widgets.
Create firebase project and enable services12:18
Explore firebase services10:38
Connect firebase and flutterflow13:34
Pages and navigation10:41
Navigation by actions9:52
Learn how to navigate apps using actions in Flutterflow, including creating a custom app bar, wiring buttons to navigate to pages, and setting up conditional navigation such as admin checks.
Navigation with lateral menu12:45
Navigation to child page9:15
Navigate from the home page to a child page and back, enforcing a single back path. Configure the back button and app bar to restrict navigation.
Read data from firestore14:14
Create object in firestore9:28
Delete object from firestore5:05
Delete a Firestore document by tapping a red trash icon in a row, selecting delete document in flutter flow, and using the document reference from the users collection.
Update firestore document13:15
Learn to update Firestore documents in a Flutterflow Firebase Tinder clone by passing user data between pages, preloading fields, and chaining CRUD actions with navigation.
Create component8:49
Convert a widget into a reusable FlutterFlow component and pass a user object through component parameters to keep data and actions consistent across pages.
Version control2:31
Explore version control by saving software states with a git-like tool, using diary-style snapshots to restore earlier versions of login UI and pages.
Login13:41
Signup5:40
Google Auth4:41
Reset password4:15
Upload images14:24
Update images6:11
Upload videos7:06
Add a video element and upload workflow in Firebase, updating the authenticated user's Firestore document with the video presentation URL, and test the upload end-to-end for production readiness.
Conditionals8:22
API Calls8:50
Layout with columns and rows7:13
Explore arranging elements with columns and rows in the Tinder app. Use containers, list view, and grid views, with padding, alignment, and expand or scrollable options.
Layout with containers6:00
Layout with listview7:13
Layout with gridview3:16
Pass data to component by parameters9:16
Convert a user card into a component and pass data via parameters (email and photo path), then compare flexibility versus performance when choosing whole object versus individual props.

Tinder: authentication and my profile9:13
Build a simplified tinder clone with flutterflow and firebase, focusing on authentication, my profile with image and video, and a swipeable stack for matches and chat.
Tinder: add description7:58
Tinder: swipeable stack8:17
Create a tinder-style swipeable stack on people page using a card in the swipeable stack, with a single time query excluding current user and exposing photo URL and display name.
Tinder: icons in swipeable3:00
Tinder: firebase change plan4:09
Upgrade your Firebase project in the console and deploy the backend with Cloud Functions. Explore the Blaze pay-as-you-go plan, 2 million free invocations per month, and per-usage pricing.
Tinder: needed tools7:06
Please, if you want to know a bit more of Javascript (the language that we will use for the backend) go to the "Annex of Javascript Basics" at the end of the course before continuing.
Tinder: firebase functions setup13:19
Please, if you want to know a bit more of Javascript (the language that we will use for the backend) go to the "Annex of Javascript Basics" at the end of the course before continuing.
Tinder: firestore and functions connection10:10
Please, if you want to know a bit more of Javascript (the language that we will use for the backend) go to the "Annex of Javascript Basics" at the end of the course before continuing.
Tinder: version control and clone of a project13:12
https://github.com/pedronieto84/tinder-udemy-english
Tinder: functions of " I like a person"14:34
Please, if you want to know a bit more of Javascript (the language that we will use for the backend) go to the "Annex of Javascript Basics" at the end of the course before continuing.
Tinder. Test API Post6:52
Test a post api in FlutterFlow by creating and testing an api call, passing a json body with string ids, and verifying the backend Firestore update.
Tinder: Api Call Integration in action5:17
Learn to integrate an API call in flutter flow on a right swipe, passing the authenticated user id and the liked user id, and handle basic success and error.
Tinder: Query people that likes me4:19
Tinder: Query subcollection of "theyLikeMe"4:41
Learn to query the theyLikeMe subcollection using a document reference from users, retrieve the display name, and render it via a reusable single-time query component.
Tinder: Detail of person who likes me9:18
Improve the tinder-like interface by adding padding and icons for like, dislike, and view profile, and build a simplified profile page with parameterized user data and navigation.
Tinder: I don't like a person11:08
Implement a backend Firestore delete to remove a 'I don't like you' record from the current user's 'they like me' subcollection, with validation, API calls, and snack-bar feedback.
Tinder: Backend logic for a match8:42
Tinder: integration API Call of create match7:38
Tinder: create item for user chat3:45
Tinder: chat conversation page4:32
Tinder: chat page layout5:53
Tinder: chat BBDD design12:45
Tinder: backend generate chat doc9:38
Develop a javascript function to generate a chat id from two user ids and create a chat document in the chats collection. Deploy and test messaging in tinder clone app.
Tinder: custom functions of generate chat id20:14
Tinder: how to debug errors6:44
Tinder: chat behaviour implementation9:23
Tinder: chat item improvement9:01
Tinder: adding circle image3:16
Tinder: break match logic18:45
Implement break match logic by deleting all chats, removing both users from the 'we like each other' subcollections, and triggering a post API call to complete the deletion.
Tinder: final test8:20
Demonstrates end-to-end Tinder-like interactions in a FlutterFlow Firebase app: multi-user login, profile browsing, right-swipe likes, real-time chats, delete actions, and final navigation polish to complete the clone.

Stripe9:30
Stripe: firebase permissions5:07
Configure firebase functions permissions for stripe operations in flutter flow via Google Cloud IAM to enable firestore and billing.
Stripe: deploy functions and put credentials6:33
Stripe: create api call to create customers12:40
Learn how to create a Stripe customer via a direct API call using HTTP post, secret key, and form URL encoded body, integrated with FlutterFlow.
Stripe: integrate payment flow in the app22:39
Demonstrate integrating Stripe by creating a Stripe customer after signup, using the authenticated user's email and name, updating a paid flag, and gating chat and profile actions with conditional visibility.

Requirements

You don't need any previous experience

Description

We will see the basic concepts of flutterflow and firebase. In the first block of the course. Then we will prepare some small backend with Firebase Functions, and with all the firebase libraries, using the programming language of Javascript. And then we will develop a full Tinder Clone with chat, swipes, matches, breaking matches functionality and even payments (using Stripe). Also along the course Chatgpt will be introduced and used as an assistant while we work. Here I Present you all the lectures that are included in this course:

Presentation and creation of first project
Create a firebase project and enable services
Explore firebase services
Connect firebase and flutterflow
Pages and navigation
Navigation by actions
Navigation with lateral menu
Navigate to child page
Read data from firestore
Create object in firestore
Delete an object from firestore
Update a firestore document
Create a component
Version control
Login
Sign Up
Google Auth
Reset Password
Upload images
Update image url
Upload video
Conditionals
API Calls
Layout columns rows
Layout with containers
Layout with listview
Layout with gridview
Pass data to component by parameters
Tinder: authentication and my profile
Tinder: add description
Tinder: swipeable stack
Tinder: icons in swipeable
Tinder: firebase change plan
Tinder: needed tools
Tinder: Firebase functions setup
Tinder: Firestore functions conection
Tinder: Version control and clone of a project
Tinder: function of I like a person
Tinder: Test API Call Post
Tinder: API Call integration in an action
Tinder: Query people that likes me
Tinder: Query subcollection they like me
Tinder: Detail of person who likes me
Tinder: I don't like a person
Tinder: backend logic for a match
Tinder: integration API Call of create match
Tinder: create component for user item chat
Tinder: chat conversation page
TInder: chat page layout
TInder: chat BBDD design
TInder: backend generate chat doc
Tinder: custom functions generate chat Id
TInder: how to debug errors
TInder chat behaviour implementation
TInder: chat item improvement
TInder: adding circle image
Tinder: break match logic
Tinder: final test
Stripe
Stripe: firebase permissions
Stripe: deploy functions and put credentials
Stripe: create api call to create customers
Stripe: integrate payment flow in app

Who this course is for:

People interested in Low Code / No Code tools for the development of Apps

Flutterflow / Firebase 2023 (Tinder clone)

What you'll learn

Explore related topics

Course content

Introducción28 lectures • 4hr 19min

Tinder clone30 lectures • 4hr 21min

Stripe Payments5 lectures • 56min

Forms validations1 lecture • 13min

Annex 1: Javascript Basics5 lectures • 34min

Requirements

Description

Who this course is for: