Learn How To Build a Realtime Chat App using React and Firebase. Follow step-by-step instructions with optimized timestamps to create components, configure Firebase, enable Google authentication, implement user authentication, and store and retrieve messages in Firestore. With access to the source code provided by CodeWithAM, you’ll have everything you need to get started on building your own realtime chat application.
index.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];300&family=Poppins:[email protected]&display=swap');
body {
margin: 0;
padding: 0;
font-family: "Poppins";
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Reset default margin and padding */
/* Set box-sizing to border-box */
*,
*::before,
*::after {
box-sizing: border-box;
}
.chatbox {
max-width: 600px;
margin: 20px auto;
background-color: #f7f7f7;
font-family: sans-serif;
}
/* Header styles */
.header {
display: flex;
align-items: center;
padding: 15px 20px;
justify-content: space-between;
margin-bottom: 20px;
background-color: #0f1720;
}
.header h3 {
font-size: 22px;
margin: 0;
color: #fff;
font-weight: 300;
}
.header button {
padding: 10px 14px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
}
/* Message box styles */
.messages-container {
min-height: 600px;
overflow-y: scroll;
padding: 20px;
margin-bottom: 20px;
}
.message-box {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.message-box img {
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 50%;
}
.message-box p {
padding: 10px 13px;
background-color: #fff;
border-radius: 20px;
}
.message-box.current-user {
display: flex;
flex-direction: row-reverse;
}
.message-box.current-user img {
order: 2;
margin-right: 10px;
}
.message-box.current-user p {
order: 1;
background-color: #007bff;
color: #fff;
margin-left: 0;
margin-right: 10px;
}
/* Form styles */
form {
display: flex;
padding: 15px 20px;
align-items: center;
background-color: #0f1720;
}
input[type="text"] {
flex: 1;
padding: 10px 14px;
font-size: 16px;
border: none;
color: #fff;
outline: none;
border-radius: 20px;
background-color: #2f3c4b;
margin-right: 10px;
}
button {
padding: 10px 14px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
}
/* Responsive styles */
@media screen and (max-width: 600px) {
.chatbox {
margin: auto;
width: 100%;
}
.header {
align-items: center;
}
.header h1 {
font-size: 20px;
}
.messages-container {
height: 450px;
}
.message-box img {
width: 30px;
height: 30px;
margin-right: 5px;
}
.message-box p {
font-size: 14px;
padding: 5px 10px;
}
form{
position: fixed;
bottom: 0;
width: 100%;
}
input[type="text"] {
font-size: 14px;
padding: 8px;
}
button {
padding: 8px 12px;
margin-left: 10px;
font-size: 14px;
}
}
App.js
import React from 'react'
import ChatBox from './components/Chatbox'
const App = () => {
return (
<div>
<ChatBox/>
</div>
)
}
export default AppNavbar.jsx
import React from 'react'
import { Auth, Provider } from "../firebase-config"
import { useAuthState } from "react-firebase-hooks/auth"
import { signInWithPopup } from 'firebase/auth'
import { signOut } from 'firebase/auth'
const Navbar = () => {
const [user] = useAuthState(Auth)
const signIn = async () => {
signInWithPopup(Auth, Provider)
.then((res) => console.log(res))
.catch(err => console.log(err))
}
const logOut = async () => {
signOut(Auth)
.then(() => alert("you are now logged out"))
.catch(err => console.log(err))
}
return (
<div className='header'>
<h3>ChatApp</h3>
{!user ?
<button onClick={signIn}>Sign In</button>
:
<button onClick={logOut}>Logout</button>
}
</div>
)
}
export default NavbarChatbox.js
import React from 'react'
import Form from './Form'
import MessageContainer from './MessageContainer'
import Navbar from './Navbar'
const ChatBox = () => {
return (
<div className='chatbox'>
<Navbar/>
<MessageContainer/>
<Form/>
</div>
)
}
export default ChatBoxForm.jsx
import React from 'react'
import { useState } from 'react'
import { useAuthState } from "react-firebase-hooks/auth"
import { Auth, db } from '../firebase-config'
import { collection, addDoc } from 'firebase/firestore'
const Form = () => {
const [message, setMessage] = useState("")
const [user] = useAuthState(Auth)
const messageRef = collection(db, "messages")
const handleSubmit = async (e) => {
e.preventDefault()
console.log(message);
if(user){
const res = await addDoc(messageRef, {
message: message,
user: user.displayName,
logo: user.photoURL,
uid: user.uid
})
console.log(res);
alert("send..")
setMessage("")
}
}
return (
<form onSubmit={handleSubmit}>
<input type="text" name="message" placeholder='type message...' onChange={e=>setMessage(e.target.value)} value={message} />
<button type='submit'>send</button>
</form>
)
}
export default FormMessageContainer.jsx
import React, { useState, useEffect } from 'react'
import { Auth, db } from '../firebase-config'
import { collection, getDocs } from 'firebase/firestore'
import { useAuthState } from 'react-firebase-hooks/auth'
const MessageContainer = () => {
const [chat, setChat] = useState([])
const [user] = useAuthState(Auth)
const chatRef = collection(db, "messages")
useEffect(() => {
const getMessages = async () => {
const res = await getDocs(chatRef)
if (res) {
setChat(res.docs.map(doc => ({ ...doc.data(), id: doc.id })))
}
}
getMessages()
}, [chat])
return (
<div className='messages-container'>
{user && chat ?
<>
{chat.map(message=>(
<div className={`message-box ${user.uid === message.uid ? "current-user" : ""}`}>
<img src={message.logo} alt={message.user} />
<p>{message.message}</p>
</div>
))}
</>
:
<p>Make sure to login</p>
}
</div>
)
}
export default MessageContainer