Lets Chat

screenshot of Lets Chat
express
react
tailwind
firebase

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

Overview

"Let's Chat" is a real-time chat application designed as a fun side project. The application allows users to register and login via email and password, create chat rooms, update their profile information, use random avatars, search for other users, and chat in real-time with emoji support. The technology stack includes React, TailwindCSS, Firebase for authentication, Node/Express for API endpoints, MongoDB for storing chat data, and Socket.io for real-time communication.

Features

  • User Authentication: Register and login using email and password.
  • Profile Page: Update avatar and display name.
  • Random Avatars: Generate avatars using DiceBear API.
  • Chat Rooms: Create chat rooms to interact with others.
  • Online Status: See users' online status.
  • Search Functionality: Find other users easily.
  • Real-time Chat: Chatting experience is real-time.
  • Emoji Picker: Integrated emoji picker for expressive communication.
  • Dark Mode: Option to enable dark mode for better visibility.

Summary

"Let's Chat" is a real-time chat application with essential features like user authentication, profile management, chat rooms, search functionality, and real-time chat experience. By using technologies like React, TailwindCSS, Firebase, Node/Express, MongoDB, and Socket.io, the application offers a seamless communication platform for users to interact in real-time. Setting up the project locally involves cloning the repository, installing dependencies, configuring Firebase, setting environment variables, and running the server and client components.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

firebase
Firebase

Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.