Build Realtime Chat Application Using React And Firebase

A M
March 9, 2023
2 Comments

Build Realtime Chat Application Using React And Firebase

Share It With Your Firends:

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

Share It With Your Friends

2 Comments

Top 10 SaaS Ideas for 2023: The Ultimate Guide for Entrepreneurs | codewitham
July 9, 2023 at 6:45 am
[…] AI Chatbot Solutions are all about creating and deploying conversational agents for customer service, sales, […]

Log in to Reply
10 AI Tools That Are Revolutionizing Customer Service - codewitham
June 4, 2023 at 3:29 pm
[…] like parallel processing and GPU acceleration, making it the perfect choice for sophisticated AI applications in industries like healthcare, autonomous vehicles, and scientific […]

Log in to Reply