What’s up Guys! First of all sorry for posing so late and now I promise to post more projects more frequently. So, You have read the title, right? First, let me acquaint you about the Clone and its features then we can of course have a look at building it
Note
Check Out the Part2 of this project. Also if you wanna check out the Github code till Part2 only check here. Also, Try the final app, and do tell me about the issues if you find one.
What we Gonna Build
The main purpose of this project was to implement the following concepts without the help of firebase mobile SDK and only using firebase real-time database over HTTP requests(in order To use minimum packages):
- Login
- Auto Login
- Logout
- Auto Logout
- Sign Up
- Private Chat with other Users (DUH)
- Profile Screen
- Implementing All Imp topics like React-Navigation, Redux, Redux-Thunk, Firebase, etc
Few Notes
Interesting right?. In this article, I will just be talking about the firebase structure and all the modules that we gonna use in this project. It will be a 2 part project in which the second part will be all the code and its explanations. I personally prefer using Visual Studio Code but you can use any IDE of your choice. Below is our firebase structure for our app
Firebase Structure
{
"Users": {
"-Mmk7JylgX2SMdkXt8hq": {
"UserId": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
"description": "Just testing while making",
"name": "Developer",
"profileImageUrl": "https://firebasestorage.googleapis.com/v0/b/{MyProject}.appspot.com/o/UserProfile%2F1635042532659?alt=media&token=46f2a93a-8700-4cac-b869-26e2e6c5cff6"
},
"-Mmkfa6uUFtzkfIyF0l-": {
"UserId": "HUCgN6jpjwYDY9CwBNesd8w0ztu2",
"description": "Fake user hehe hitting people ",
"name": "Sapna Jain",
"profileImageUrl": "https://firebasestorage.googleapis.com/v0/b/{MyProject}.appspot.com/o/UserProfile%2165051780881?alt=media&token=7dec06a0-9191-4178-95f4-cbb0e5db27dc"
}
},
"ChatRooms": {
"HUCgN6jpjwYDY9CwBNesd8w0ztu2|U3n9RMAbFpZUEE0v2UM1niDKRw22": {
"Chats": {
"LeCadTFGGAWpFRKgDrSx": {
"_id": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
"createdAt": "October 24, 2021 at 1:42:44",
"sentBy": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
"sentTo": "HUCgN6jpjwYDY9CwBNesd8w0ztu2",
"text": "Helo Sapna Jain",
"user": {
"_id": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
"avatar": "https://firebasestorage.googleapis.com/v0/b/{MyProject}.appspot.com/o/UserProfile%2F1635042532659?alt=media&token=46f2a93a-8700-4cac-b869-26e2e6c5cff6",
"name": "Developer"
}
}
}
}
}
}This is our basic Firebase format that will help you a lot in understanding the project. I could find a way to implement to store images in Firebase Storage using an HTTP request. So for only that I used the firebase mobile SDK (I tried converting the image to base-64 but that made the database too slow)
Initializing Our Project
First, let’s start quickly start with that app with Expo. I will be using ‘Expo CLI’ but it’s completely your choice to use whatever you want.
npm install --global expo-cliNow, let’s initialize our project and run the development server by:
expo WhatsApp-Clone-React-Native #Choosing blank template
cd WhatsApp-Clone-React-Native
code . # Open VsCode (Optional)
expo start # or npm startWith that, we are ready to install the packages we need
Main Packages Installation
As the name suggests react-navigation is used for routing and navigation in native apps. Keeping this article short, let’s just install React-Navigation and its core utilities.
npm install react-navigationReact Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don’t worry too much about this for now, it’ll become clear soon enough!
~ From the docs
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-viewAll these things are from the docs and I am not explaining these things much because I assume you know all these things. So, Now let’s Install the StackNavigatorand our TabNavigator
Stack Navigation is the most basic and common form of navigation in any app — web or mobile. How this works is that its screens are managed on a stack. When you open a screen, that screen will be pushed to the top of the stack. It pops or pushes the screen as you open or leave the screen and only the screen on the top is visible. So, it’s simple and let’s install it now
npm install --save react-navigation-stackMaterialTopTabNanvigator is used to Tab on the top of the screen and allows us to route to the different screens using a tab bar which is placed on the top of the screen. We will be placing our TabNavigator inside of a main Stack Navigator which is further placed inside of a SwitchNavigator for the Auth Work which we will discuss later. Now, let’s install it
npm install react-navigation-tabs- Redux and Redux-Thunk
Redux
If you are watching this clone, please have some prior knowledge about redux as it’s a little complicated but basically redux is used to manage various states of our Application where all states are stored in one central location where different actions are dispatched and caught by various actions and reducers.
npm i --save reduxReact-Redux
Basically, this library acts as a binder between react and redux. It offers various react hooks which allow our components to dispatch (useDispatch) and read data (UseSelector) from our redux store.
npm i --save react-reduxRedux-Thunk
We generally return an action in our action creators but using Redux-Thunk which acts as a middleware we can return function to it which takes the store’s dispatch method as the argument and which is afterward used to dispatch actions after any async code like making an API call or any other things that takes some time. Now, let’s install it:
npm install --save redux-thunkNo need to tell why we need this package. Yup, of course, we need it for having icons in our app. This library is installed by default but if it isn’t you can install it by:
expo install @expo/vector-iconsInstalling Other Packages
Ok, Above we have installed all the main packages that we needed but now let’s also install other packages we need. I won't be explaining each package below but instead, I am pasting my package.json below along with their docs where you can install them.
As I said I couldn’t find a way to implement to store images in Firebase Storage using an HTTP request. So, if you find a way to do this using fetch() please do reply. You need to install the packages that are highlighted with the Yellow color above. See the below docs link to install and learn about them:
- AsyncStorage (Used to store data with app restarts offline)
https://docs.expo.dev/versions/latest/sdk/async-storage/ - AppLoading (used to show a splash screen until the app loads fonts)
https://docs.expo.dev/versions/v43.0.0/sdk/app-loading/ - Camera (Used to get Camera Permissions)
https://docs.expo.dev/versions/v43.0.0/sdk/camera/ - expo-font (Used to load fonts)
https://docs.expo.dev/versions/latest/sdk/font/ - Expo-Image-Picker (Used to access or click photos)
https://docs.expo.dev/versions/v43.0.0/sdk/imagepicker/ - Firebase (Gives excess to various firebase functionalities)
https://docs.expo.dev/guides/using-firebase/ - React-Native-Gifted-Chat (A built-in chat UI design for implementing Chat features in apps)
https://github.com/FaridSafi/react-native-gifted-chat - React-native-Modal (Used to show modals but can also use the built-in one in React-native)
https://www.npmjs.com/package/react-native-modal - React-navigation-header-buttons (Used for rendering buttons in our navigation bar without any styling and alignment issues)
https://www.npmjs.com/package/react-navigation-header-buttons
Note: I am using vs6 of this package
With That, we have our project completely initialized and all the packages installed. In the next part, we will start with the code, implement all the features and Finish our app. And no worries, there will be separate videos in the next part implementing all things.
If you are excited about this clone and ready to make your own WhatsApp, then don't forget to clap and do give your feedback.
Till then stay safe, stay healthy
