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

Related tags

React Apps react nodejs firebase express mongodb socketio mern-stack tailwindcss real-time-chat-app
Overview

Let's Chat

A real-time chat application. Another fun side project :)

Screenshot from 2022-09-07 16-27-25

Screenshot from 2022-09-07 17-11-16

GIFs are attached at the end.

Technologies Used

  • React and TailwindCSS for the frontend
  • Firebase for authentication
  • Node/Express for creating API endpoints
  • MongoDB for storing chat room members and their messages
  • Socket.io for making the app real-time

Basic Features

  • Users can register/login via email and password.
  • Profile page where users can update their avatar and display name.
  • Generate random avatars using DiceBear API
  • Users can create a room to chat with others.
  • Users can see online status.
  • Search functionality.
  • Chatting is real-time.
  • Emoji picker is also integrated.
  • Dark mode can be enabled.

GIFs

chrome-capture-2022-8-7

chrome-capture-2022-8-7 (1)

chrome-capture-2022-8-7 (2)

You might also like...
Messanger - An messaging app buil on React and Redux with socket.io for real time chatting
Messanger - An messaging app buil on React and Redux with socket.io for real time chatting

An messaging app build on React and Redux with socket.io for real time chatting as MERN project you can make a gruop chat as well Login and sigup authenicate with bcrypt and json web token and complete chat is saved on Mongodb

Yash Raj 36 Dec 27, 2022
Tinde-Chater is a Full Stack Chatting App. Uses Socket.io for real time communication and stores user details in encrypted format in Mongo DB Database.
Tinde-Chater is a Full Stack Chatting App. Uses Socket.io for real time communication and stores user details in encrypted format in Mongo DB Database.

Tinde-Chater is a Full Stack Chatting App. Uses Socket.io for real time communication and stores user details in encrypted format in Mongo DB Database.

Nitish Kumar 3 Jul 26, 2022
A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

NzM 13 Dec 15, 2022
Assignment of Milestone 11 (Client Side) , Making an Website (Travel Related) using Firebase Authentication, Node, Express, MongoDB , Heroku, React Router, JavaScript (ES6) & React Bootstrap Etc.
Assignment of Milestone 11 (Client Side) , Making an Website (Travel Related) using Firebase Authentication, Node, Express, MongoDB , Heroku, React Router, JavaScript (ES6) & React Bootstrap Etc.

Simple Site of 'Travel Related Service' (Holiday Dreams) - Assignment (Milestone - 11) This Repo is for 'Client Side' This Assignment is mainly on Nod

Yasir Monon 2 Aug 27, 2022
Small chat system written by React, Socket.IO, Express, HTTP and Cors.
Small chat system written by React, Socket.IO, Express, HTTP and Cors.

React-SocketIO Chat System The project is a small chat system which socket server has been written by Socket.IO, Express, HTTP, Cors and etc., and Rea

Ali Bahaari 4 Sep 3, 2022
Discord Clone using React, Node, Express, Socket-IO and Mysql
Discord Clone using React, Node, Express, Socket-IO and Mysql

React Discord Clone Functional Discord Clone written in Typescript using React, Socket IO, NodeJS, Express and MySQL View the live verison at - http:

Eric Ellbogen 401 Dec 27, 2022
CoderHouse - A Clubhouse project using Node, Express, Mongo, webRTC, socket.io, and React JS

codershouse-mern - This Project is Under Development. Below are some of the impl

Bishal Das 35 Nov 18, 2022
Chat App it is a simple web tool for chatting in real time! 🤭
Chat App it is a simple web tool for chatting in real time! 🤭

Chat App 💬 🖥️ Project Chat App it is a simple web tool for chatting in real time! 🤭 In this application it was possible to deepen knowledge in fron

Caio Lemec 3 Dec 3, 2021
A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bug-corrections.

web-chat-real-time A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bu

João Melo 1 Nov 14, 2022
Comments
  • Update and rename chatMessage.js to optimized chatMessage.js

    Update and rename chatMessage.js to optimized chatMessage.js

    To use the input validation and pagination features, you will need to install the express-validator package and add the relevant middleware to your routes. You can do this by adding the following lines at the top of your file:

    const { check, validationResult } = require("express-validator");

    app.post( "/messages", [ check("sender").isString(), check("recipient").isString(), check("content").isString(), check("chat

    opened by Kidus-berhanu 0
Owner
Hana Belay
Hana Belay
GitHub
🗣 React + Node.js + MongoDB Real-time chat WebApp

React + Node.js + MongoDB Real-time chat WebApp for teachers and students React16，React-Router4，Redux，Node.js，MongoDB，Antd-Mobile The project is divid

Xingbo Jia 5 Nov 1, 2022
A real-time chat application made using ReactJs, ExpressJs, NodeJs, and Socket.io.

insta-chat Live Site ScreenShots Instachat is a real-time chat app made with ReactJs on the front-end and ExpressJs , NodeJS , Socket.io web socket li

Midhun Chandran 12 Jun 12, 2022
Discord-clone - Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Express, MongoDB and Redis

Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Ex

Milad Ranjbar 205 Dec 18, 2022
Realtime Chat App with React, Node.js, Socket.io and MongoDB

reactchatapp Realtime Chat App Features/Components Uses React Js for UI Backend using NodeJs Authentication using JWT MongoDB for database Socket.io f

Aayush Jha 15 Dec 22, 2022
Chat Application Using React, Node.js and Socket.io with MongoDB

Steps to Start the App Install the Public Dependencies Install the Server Dependencies In the Server Directory there's a .env file. Change the value o

Kishan Sheth 244 Dec 31, 2022
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

Asif Azad 22 Aug 30, 2022
Hexlet-chat: a simple real-time chat application using react

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

Aleksandr Chusovitin 2 Nov 27, 2022
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.

Smile Gupta 24 Jun 20, 2022
Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx| Nodejs + Express + Mongodb + React + Redis + Nginx

Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx How to use Docker to build and develop Nodejs, Express, Mongodb, React, and Redis

null 17 Aug 1, 2022
Real time chat, created using React & Firebase

Real time chat, created using React & Firebase This app provides all main functions you except from messenger To start chatting you need to Sign In to

whereareyo 8 Dec 15, 2022