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:wght@200;300&family=Poppins:wght@200&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 App
Navbar.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 Navbar
Chatbox.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 ChatBox
Form.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 Form
MessageContainer.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
2 Comments
[…] AI Chatbot Solutions are all about creating and deploying conversational agents for customer service, sales, […]
[…] like parallel processing and GPU acceleration, making it the perfect choice for sophisticated AI applications in industries like healthcare, autonomous vehicles, and scientific […]