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.

Installation

To run the “Let’s Chat” application locally, follow these steps:

1. Clone the repository.
2. Install 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 and create/select a project.
   • In the project settings or service accounts section, click on “Generate new private key” and save the JSON file as serviceAccountKey.json.
   • Place serviceAccountKey.json in the server/config directory.
4. Set up Environment Variables:
   • Create a new file named .env in the frontend directory based on the .env.example file and update Firebase configuration values.
   • Create a new file named .env in the root directory based on the .env.example file and update variables like PORT and MONGO_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. Access the application at http://localhost:3000.

Ensure to keep sensitive information like serviceAccountKey.json secure and avoid committing them to version control.

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.