rajesh1028 / chatify

A real-time chatting application where multiple users can communicate between them

Chatify

Chatify.com is basic Chat application inspired from Whatsapp.

Tech Stack

Frontend: HTML, CSS, JavaScript

Backend: NodeJS, Express

DataBase: MongoDB

NPM Packages: Bcrypt, Nodemon, Mongoose, Socket.io, dotenv, passport, passport-google-oauth20

Features

Our Authentication

Google OAuth Authentication

Status

Private Chat

Group Chat

How to Use our Application

Register and Login:

• To register, open the application and Fill in the required details such as name, email, and password.
• Once you fill in the details, click on the "Continue" button.
• You will be redirected to Login Page.
• Fill in the required details such as email, and password.
• Once you fill in the details, click on the "Continue" button.
• You will be redirected to our Home Page.

Continue with Google:

• If you have a Google account, you can directly log in using the "Continue with Google" button.
• Click on the button and enter your Google account details.
• You will be redirected to the Home page of the application.

Home Page:

• Once you log in, you will be redirected to the Home page.
• On the Home page, you will see a list of contacts you can chat with.
• Click on the contact you want to chat with.
• You will be redirected to the chat page with the selected contact.

Chat Page:

• On the chat page, you can send and receive messages with the selected contact.
• Please Note:- You may need to login two or more accounts, to check the chat Functionality.

Group Chat Functionality:

• To start group chat, click on the "Group Chat" button on the Home page.
• Select Group and add username.
• Click on the "Join ChatRoom" button to enter the chat room.
• You will be redirected to the group chat page.
• To add more users to the chat room, you can use the same page, to add more users.
• To send a message, type the message in the text box and click on the send button.
• To exit the group chat page, click on the "Go Out" button.

Status Functionality:

• To add a status, click on the "Add Status" button on the Status Tab.
• Enter the status message and image link address.
• Once you add the status, click on the "Create" button.
• You will see a list of statuses posted by your contacts.

HomePage

Register

Group Chat

Private Chat

Status

chatify's Issues

Cant add status

• Please add the option to add picture or text as status for the icons on the right side.
• User should be able to view the status.
• Edit status if possible can be added
• Remove status if possible can be added

Add option to go back to the chat from ChatRoom

Add option to go back to the chat from ChatRoom.

Login/Register Backend

• Create User Register Route
• Save the Data on MongoDB and password using bcrypt
• Send Proper messages
• Create User Login Form
• Find the user and on successful login generate the token

Add form validation

User can enter a as an email and one as a password, with this he will able to login into application. This should not be possible.

Google Oauth

• Use passport dependency
• Use Google passport dependency
• add google oauth route
• fetch the neccessary data and create user
• generate token and send them to frontend
• add callback route
• redirect the user to frontend
• show the name in the frontend
• fix the redirecting issue
• figure out how to send data to frontend
• fix all possible bugs

When clicked on user redirect properly

Once user logged in and try to click any one of the name link, he will redirected to page not found

ChatRoom functionality

Add functionality to Chat room and add how it works in the Readme.md

Welcome Page

• basic navbar
• add login and register button
• add background
• add background to all pages

Login/Register - Frontend

• Create Login Form
• Link to register Form
• Submitting the Form makes the login request to the backend
• Add necessary CSS
• Create Register From
• Submitting the Form makes the register request to the backend
• Add continue to google button

status area

• ui for the area
• opening status
• switch between tabs

Project Review

1. Do not keep console statements in the code.
2. Good job on backend implementation.
3. Start writing comments.
4. Do not use external packages directly for your core functionalities
5. More could've been done from you side
6. Good job on authentication part

ReadMe For Project

• Add logo
• Basic Overview
• Show The Features
• Mention Tech Stack