MERN Stack - Chat Application

Webapp is live here

Technologies Stack

• MERN
• ReacJS
• NodeJS
• ExpressJS
• MongoDB
• Socket.io
• Material UI

To-Do List

Fronted

• Login Page.
• Chat window template.
• List of users(Conversations).
• Set active conversation.
• Render particular user's chats.
• Create new message form.
• Connect backend.
• Setup socket IO Client.
• Add Emotes.
• Change the color scheme.
• Fetch users fom db.
• Change the msg background and font colors.
• Set up socket IO 'msg-sent', 'msg-pending', and 'msg-not-sent' events.
• Separate icons for msg statuses.
• Responsiveness.
• Back Button in mobile view.
• Add date.
• Select a message.
• Dropdown on a message.
• Align checkboxes, online status dot!
• Delete a message.
• Delete a whole convo (functionality of 3 dots).
• Message notifications.
• Forward a message.
• Identify the type of user, i.e, Learner/Educator/Institute.
• Create a group conversation.

Backend

• Create a Mongo DB cluster.
• Create placeholder users DB.
• Create placeholder chats DB.
• Setup Socket IO server.
• Online user communication.
• Implement Wait Queues for offline users.
• Connect to mongoDB cluster.
• Insert new Message into Database.
• Connect to users database.
• Add status field to the chats collection.
• Set up socket IO 'msg-sent', 'msg-pending', and 'msg-not-sent' events.
• Besides flushing messages to a newly logged in user, inform those messages' senders that these messages are now sent.
• Setup Wait queues for socket io events as well.
• Update messages' statuses on the database after flushing them.
• Delete a message.
• Delete a whole convo end-point.
• Message notifications.
• Forward a message.
• Create a group functionality.
• Add users to group.

Other (Or Common)

• Differentiate sent, pending and unset message.
• Differentiate between active and inactive(offline) users.
• Differentiate read and unread messages.

Feel free to contibute and open any issues.