Build Realtime Chat Application Using React And Firebase

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

Leave a Reply

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

© 2023 Codewitham