Chatter

Web application for instant messaging. Deployed to Heroku: https://chatter-messaging-app.herokuapp.com

Technologies and libraries used:

• Server - Node, Express
• WebSocket - socket.io
• Authentication - JSON Web Token, Google Auth
• Database - MongoDB, connected via mongoose
• Client Framework - React, Redux Toolkit
• Styles - Tailwind CSS
• Testing - Jest, React Testing Library
• Toast messages - React-Toastify
• Emoji - React Emoji Picker

Architecture:

Limitations:

• Messages are currently stored on the client side with the limit of 15 messages per channel. The client store is cleaned up each time the page is refreshed.
• Messages are not stored on the server or database.

Planned Improvements:

• Increase test coverage.
• Get user images from Google Account.
• Update channel details.
• Close channel panel once selected.
• Show online users.

Main interaction scenarios as GIFs:

Screenshots:

Desktop (macOS, Chrome):

Mobile (iOS, Chrome):