Whatsapp 2 - Chat app made with React and Firebase

Overview

Whatsapp 2

image

Getting Started with Create React App

This project was bootstrapped with Create React App.

Table of contents ✒️

Overview 🎯

The long awaited app has finally been released. There is no more 12 days of waiting! Welcome to the Whatsapp 2!

Links 🔗

My process 🧩

Built with 🔨

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • JavaScript(React.js)
  • Create React App
  • Firebase
  • Firestore
  • Google authentication

What I learned 📝

  • Create a document in Firestore:
await messagesRef.add({
			text: formValue, // text from the input
			createdAt: firebase.firestore.FieldValue.serverTimestamp(), // timestamp
			uid, // user id
			photoURL, // user photo url
		});
  • Use the Firebase authentication:
const signInWithGoogle = () => {
		const provider = new firebase.auth.GoogleAuthProvider(); //gets the google autentication
		auth.signInWithPopup(provider); //shows google popup
	};

Useful resources

  • Firebase authentication - This helped me understand how the Firebase authentication works. I'd recommend it to anyone who wants to understand this.

Author🙋🏻

You might also like...
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

A chat application created using React,js and Chat Engine

⭐️ Chat-App ⭐️ A Chat Application created using React.js and Chat Engine Live Site Getting Started with Create React App This project was bootstrapped

A React Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.
A React Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.

Chat-Room This is a fully responsive React chat application with social authentication including Google and Facebook using Firebase online statuses, g

Chat - Microsoft Teams Clone build using Chat engine api and React JS
Chat - Microsoft Teams Clone build using Chat engine api and React JS

Chat Application Website - Site deployed here Introduction This is Microsoft Tea

A full Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.
A full Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.

Iced-Chat A full Realtime Chat Application with Social Auth and dedicated chat APIs/sockets. It uses Firebase(from google) for auth. It also uses Chat

Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Node/Express, and Socket.io
Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Node/Express, and Socket.io

Let's Chat A real-time chat application. Another fun side project :) GIFs are attached at the end. Technologies Used React and TailwindCSS for the fro

cute-chat is a real-time chatting app using reactJS and Google's firebase.
cute-chat is a real-time chatting app using reactJS and Google's firebase.

cute-chat A Realtime Texting/Chatting App Table of Contents About The Project Built With Demo Database Structure Features Future Possible Updates Gett

a chat application using react chat-engine api

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Hexlet-chat: a simple real-time chat application using react

Hexlet tests and linter status Hexlet-chat study project at hexlet.io Overview H

Owner
Álvaro J.
let's goooooooooooooooooooooo
Álvaro J.
Responsive whatsapp clone using React (Typescript), tailwindcss and firebase

Responsive whatsapp clone using React (Typescript), tailwindcss and firebase

Medjahdi Islem 11 Nov 17, 2022
Clonando whatsapp wep com ReactJS + Firebase

CLONANDO WHATSAPP WEB ?? ?? Clone do Whatsapp Web usando React JS e Firebase Este projeto consiste em praticar e aprender com o clone do whatsapp web

João Pedro Moreira 14 Jun 23, 2022
A chat app made with ReactJS and Google Firebase

Laser Chat A chat app made with ReactJS and Google Firebase. To host your own chat server, first open the terminal and type in git clone https://githu

Eesa Zahed 8 Aug 19, 2022
Chat-app-frontend - A chat app massenger with expressjs and reactjs

Chat App Messenger A chat app messenger with expressjs and reactjs Contact with

Amin Malekzadeh 11 Nov 29, 2022
Laser Chat version 2.0 - made with React and Google Firebase - Eesa Zahed

Laser Chat 2.0 This is an open chat web app that I made using Google Firebase. Hosting a server To host your own chat server, first open the terminal

Eesa Zahed 4 Sep 13, 2022
A Whatsapp clone built on React and Node

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

Kshitij Bisht 1 Apr 6, 2022
A junction between the application of the knowledge acquired throughout the study of ReactJs and a brief minimalist redesign of the Whatsapp application in its desktop version.

Whatsapp Clone Tecnologias | Projeto | Use ?? Tecnologias Esta aplicação foi desenvolvida com as seguintes tecnologias: HTML 5 CSS 3 JavaScript React

Ernane Ferreira 6 Feb 21, 2022
An example of a WhatsApp UI clone using Ionic React

ionic-react-whatsapp-clone An example of a WhatsApp UI clone using Ionic React (Dark Mode, IOS only... for now) If you'd like to support, you can buy

Alan Montgomery 19 Dec 16, 2022
Clone of the current Whatsapp Web UI.

Clone of the current Whatsapp Web UI.

Karen Okonkwo 636 Dec 30, 2022
I had cloned the home UI of whatsapp using ReactJS

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

sparsh gupta 20 Nov 8, 2021