DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A Real time Chat Application with MERN

Let’s Chat

A Real time Chat Application with MERN

A real-time chat application. Another fun side project 🙂

A Real time Chat Application with MERN

A Real time Chat Application with MERN

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.

Getting Started

To run this project locally, follow these steps:

  1. Clone the repository.
  2. Install the dependencies:
    • Navigate to the frontend directory and run npm install.
    • Navigate to the server directory and run npm install.
  3. Set up Firebase:
    • Go to the Firebase Console.
    • Create a new project or select an existing one.
    • Go to the project settings or service accounts section.
    • Click on “Generate new private key” or a similar option.
    • Save the downloaded JSON file as serviceAccountKey.json.
    • Place the downloaded serviceAccountKey.json file in the server/config directory.
  4. Set up Environment Variables:
    • In the frontend directory, create a new file named .env based on the .env.example file.
    • Update the values of the environment variables in the .env file with your Firebase configuration details.
    • In the root directory, create a new file named .env based on the .env.example file.
    • Update the values of the environment variables in the .env file according to your preferences. For example, set the PORT variable to specify the desired port for the server and set MONGO_URI to your MongoDB connection URI.
  5. Run the server:
    • Navigate to the server directory and run npm run start.
  6. Run the client:
    • Navigate to the frontend directory and run npm start.
  7. The application will be accessible at http://localhost:3000.

Please make sure to keep the serviceAccountKey.json file and sensitive information secure and not commit them to version control.

GIFs

A Real time Chat Application with MERN

A Real time Chat Application with MERN

A Real time Chat Application with MERN

GitHub

View Github

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay