This is an app where we can talk one-on-one or join group chats with others. It's easy to use and lets us have conversations privately or with a bunch of people at the same time.
- Login and Signup
-
The registration page collects basic user details like name, email, and password and other details. It encrypts the provided password for security. When someone already has an account and clicks "Login," they're taken to a login page where they enter their registered email to access their account.
- Main page of Chat App
-
The main page of the chat app displays all your available chats. It's where you see and access the conversations you're a part of, making it easy to jump into your chats quickly.
- Seacrh User feature
- This feature allows users to search for friends and start new chats with them. It makes it simple to find specific friends and begin conversations easily.
- Conversation One to One
-
In this interface, conversations happen directly between two people, just like a private chat. It's a one-on-one conversation between you and another person
- Show Profile
-
This feature lets users view both their own profile and the profile of another person they're chatting with. It allows for checking details and information about both users involved in the conversation.
- Feature if the user is online or not and Typing
-
This feature shows whether a user is currently online or offline. Additionally, it lets the other user know when someone is typing a message, signaling that they're in the process of composing a response.
- Group Chat Feature
-
When you click "New Group Chat," a window pops up where you can name the group. You need to add at least two friends to create the group. In the modal, you can search for friends and add them. Once you've added friends, a new group chat is created, and you'll see the interface for that group chat.
-
In this interface, when a user sends a message in a group chat, the message appears in the chat window for everyone in the group to see. Each message typically shows the sender's name or profile picture along with the text of the message. It's a way for everyone in the group to follow the conversation and see who said what.
-
In this interface, users can view group details such as the list of members and identify who the admin is. If you're the admin, you can add new members to the group. Additionally, the admin has the capability to change the group's name.
- Logout
-
The navbar has a dropdown on User's name from where user can click on logout button which directs the user back to the login page.
The app was created with the following technologies
- MongoDB
- Express.JS
- ReactJS
- NodeJS
- ChakraUI
- Socket.io
- CryptoJS
- JWT Authentication
Have NodeJS and MongoDB installed on your machine.
| VARIABLE | Sample value |
|---|---|
| DATABASE | mongodb://localhost/chatroom |
| JWT_SECRET | |
| SECRET_KEY |
- Clone the repo
git clone https://github.com/gaurav147-star/Flipho_Chat_Room.git
-
cd ./Flipho_Chat_Room - Install node dependencies in all folders.
npm install
- Create a new .env file in server directory.
- Setup the environment variables as described above.
- Start the server
nodemon ./index.js
- Start the client
npm start
- The frontend is now running at http://localhost:3000/ and backend is now running at http://localhost:8000/