Messenger Web App Clone

This project is a Messenger web app clone that aims to provide users with a real-time messaging experience similar to popular messaging platforms. The app incorporates a range of features and integrations to enhance communication, user authentication, and overall usability.

Demo

You can explore a live demo of the Messenger web app clone by visiting the following link: Messenger Web App Demo Feel free to interact with the demo and test out the available features.

Features

1. Real-time Messaging using Pusher: The app leverages the Pusher service to enable instant message delivery and updates, ensuring that users can engage in seamless conversations with minimal delay.

2. Message Notifications and Alerts: Users receive notifications and alerts whenever they receive new messages or when specific events occur, keeping them informed and allowing prompt responses.

3. Credential Authentication with NextAuth: User authentication is handled using the NextAuth authentication library. It offers secure registration, login, and account management functionalities, ensuring the privacy and protection of user information.

4. Google Authentication Integration: Users have the option to authenticate using their Google accounts, simplifying the login process for those who already have Google credentials and providing an additional level of convenience.

5. GitHub Authentication Integration: Similarly, users can authenticate using their GitHub accounts. This integration caters to developers or users associated with GitHub, enabling them to log in using their existing credentials.

6. File and Image Upload using Cloudinary CDN: The app integrates with Cloudinary, a cloud-based media management platform, enabling seamless uploading and storage of files and images. This feature facilitates easy sharing and viewing of multimedia content within conversations.

7. Message Read Receipts: Users can see if their sent messages have been read by the recipients, providing valuable information about the status of communication and ensuring message acknowledgment.

8. Online/Offline User Status: The app displays the online/offline status of users, indicating their availability for conversation. This feature helps users identify who is currently active and ready to engage in real-time communication.

9. Group Chats and One-on-One Messaging: Users can participate in both group chats and one-on-one messaging. Group chats foster collaborative discussions among multiple users, while one-on-one messaging enables private and personalized interactions.

10. Message Attachments and File Sharing: Users can attach files, such as documents or images, to their messages, facilitating easy and efficient content sharing within conversations.

11. User Profile Customization and Settings: Users have the ability to customize their profiles by adding profile pictures, setting display names, and modifying other relevant information. The app also provides various settings options, allowing users to personalize their messaging experience according to their preferences.

12. Creating and Managing Chat Rooms and Channels: Users can create and manage chat rooms and channels based on specific topics, projects, or interests. This feature promotes organized communication within designated groups and facilitates efficient collaboration.

Technologies Used

• Front-end: Typescript, React, Next.js, Tailwind
• Back-end: Node.js
• Real-time Messaging: Pusher
• Authentication: NextAuth
• File and Image Upload: Cloudinary CDN