"There is no better way to understand a framework, library and its features, than by making projects." You will be making the following features :
This project will give you a hands on experience with the React library. Fullstack development currently has many different stacks and technologies to learn. It is very easy to get overwhelmed and get distracted. React is one of the most popularly used Frontend libraries used by companies such as Facebook, Pinterest, Uber, Instagram and many more. Beginner tutorials and mini projects are good for beginning but a full-fledged project can make you understand concepts with real-world applications. You will learn not just about UI designing but also integrating it with the backend. You will be learning about :
Sign In With Google)[Note: We're using Sign In With Google instead of the traditional way of WhatsApp to keep it simple.]
We can break down the project in the following stages:
Project demo:
"There is no better way to understand a framework, library and its features, than by making projects." You will be making the following features :
This project will give you a hands on experience with the React library. Fullstack development currently has many different stacks and technologies to learn. It is very easy to get overwhelmed and get distracted. React is one of the most popularly used Frontend libraries used by companies such as Facebook, Pinterest, Uber, Instagram and many more. Beginner tutorials and mini projects are good for beginning but a full-fledged project can make you understand concepts with real-world applications. You will learn not just about UI designing but also integrating it with the backend. You will be learning about :
Sign In With Google)[Note: We're using Sign In With Google instead of the traditional way of WhatsApp to keep it simple.]
We can break down the project in the following stages:
Project demo:
Before you get started with building the components it is better to plan your components. This will give you a clear idea on what goes where.
Create your React app using create-react-app.
Your file structure should look similar to the image below.
There are multiple dependencies that you need to install to get started with your project.
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"firebase": "^8.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
You should be able to successfully install the React application with all the required dependencies. You can check the package.json file for verification.
Now you can start designing your UI components. For UI components you can refer the below image. It basically has two major components:
The material-UI icons used for this WhatsApp clone are
The Icons you would be using won't be clickable or show click animation initially. Find out a way to make seem like a button though they are icons.
After making each of the component individually, you should be able to assemble them in the app.js file and should have a UI look somewhat like the image given above.
Firebase is a cloud platform provided by Google to enable mobile and web application development. We will be using Firebase for Google authentication and Firebase Firestore for NoSQL database for our chat application.
firebase.js is in place.Your configuration file should look like
import firebase from 'firebase'
const firebaseConfig = {
apiKey: "<apiKey>",
authDomain: "whatsapp-13503.firebaseapp.com",
databaseURL: "https://whatsapp-13503.firebaseio.com",
projectId: "whatsapp-13503",
storageBucket: "whatsapp-13503.appspot.com",
messagingSenderId: "<messagingSenderId>",
appId: "<appId>"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export {auth,provider} ;
export default db;
You should have access to your firestore database :
After the UI gets ready, now is the time to fetch the data from the database. You need to make different states to manage different components. Those states will be responsible to push data to your Firestore database and get data and display them in real time.
As the final stage, we'll be adding a form of authentication to our application. For keeping it simple, we'll be integrating Sign In With Google with the React application.
Login page to redirect to Google authentication prompt.
Chat section with Google ID avatar on successful login. (Refer to the image of the UI)
Use conditional rendering to add a class of sender (green box) and others (white box) as the chats, as we have in WhatsApp originally. You can use user display name and Google auth id name to add the condition.
React states are local. Authentication uses context API to successfully log in and interact with other components. Context API needs to be understood to get started learning about global state management using libraries such as Redux.
Deploy the application using Firebase.
This would be the final stage of your project. You should be able to sign in with your Google account, have you chats saved and able to send and receive chats.