Tinder_Clone is an Expo React Native project based off the popular dating app. Features include Google authentication, styling using Tailwind CSS, swipeable cards, react navigation to allow for multiple pages, a matching algorithm, and upon successful matching between two users, one to one real time messaging which is powered by Firebase's Firestore database.
- React Native - https://reactnative.dev/docs/getting-started
- Expo - https://docs.expo.dev/
- Tailwind CSS - https://github.com/jaredh159/tailwind-react-native-classnames
- React Navigation - https://reactnavigation.org/docs/getting-started
- Firebase version 9 with Firebase Firestore - https://firebase.google.com/docs
This project is not designed for production use. Some refactoring will be required if used for production.
First, install and log into the Expo CLI:
npx expo register
# or
npx expo loginThen, install and log into the Firebase CLI:
curl -sL https://firebase.tools | bash
firebase login
Next, install the dependencies:
npm install
# or
yarn addSome inormation will be unique to the user for this project and is not to be shared publicly such as Android Client IDs, IOS Client IDs, Expo Client IDs, as well as the google-services.json file, and the GoogleService-Info.plist file.
Create the .env file in root directory of your project.
I have included a template (.env.template) to help you get started.
To allow the Google Authentication to work the google-services.json and GoogleService-Info.plist files are requried to be added to the root directory. These can be obtained from Google Cloud -> Credentials once authentication has been set up. Learn more about authentication with expo-auth-session here: https://docs.expo.dev/versions/latest/sdk/auth-session/
This project was inspired by Sonny Sangha's Tinder clone. If you have any questions check out his YouTube video here: https://www.youtube.com/watch?v=AkEnidfZnCU.
(The google authentication used in the YouTube video has since been depricated. I used expo-auth-session instead.)