- 🎯 React Native tutorial from https://www.youtube.com/watch?v=qJaFIGjyRms&ab_channel=SonnySangha
- 🚀 This Tinder clone application is a multi-platform application built using React Native
- 🎨 Styling done with NativeWind (TailwindCSS)
- 📱 Using ExpoGo for live rendering on the mobile phone
- 🚀 Used the Context API provided by React for handling the state
- 🪝 Implemeted a custom hook that provides the logic and data for authentication (
useAuth.js)
nativewindfor the stylingexpo-auth-sessionfor implementing the Google OAuth Authentication (reference: https://docs.expo.dev/guides/authentication/#google)react-navigationfor handling the navigation between screensfirebasefor interacting with Firebase Firestore and Authenticationreact-native-deck-swiperfor the swipe functionality of profile cards
assetsfor the imagescomponentsfor the reusable componentsscreensfor the different application pages (one screen component per page)App.jsis the entrypoint of the applicationbabel.config.jsfor converting ES code into a backwards compatible version of JavaScripttailwind.config.jsfor specifying which files can use TailwindCSS styling
- On Firebase (https://console.firebase.google.com/), create a project and a web application
- Activate Firestore & Authentication
- Copy the Firebase web application settings into
firebase.jsat the root of the project - On the Google console (https://console.cloud.google.com/), select your project and go to
credentials - In OAuth 2.0 Client IDs, select the web client (which should have been created beforehand)
- In
Authorized JavaScript origins, addhttps://auth.expo.ioandhttps://localhost:19006 - In
Authorized redirect URIs, addhttps://auth.expo.io/@{expo_username)/{expo_application}andhttps://localhost:19006
- Firebase link: https://console.firebase.google.com/u/0/project/playground-tinder/overview
- Google Cloud link: https://console.cloud.google.com/welcome?project=playground-tinder
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent