Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shimul-zahan/mvc-client

A responsive, real-time chat application frontend built with React.js and Socket.IO. Features secure authentication, instant messaging, media sharing, notifications, and dark mode. Designed with reusable components and efficient state management for scalability and seamless user experience.
https://github.com/shimul-zahan/mvc-client

audio-call chatting-app mongodb mongoose nodejs reactjs realtime-chat redux redux-toolkit socket-io video-call webrtc

Last synced: 15 days ago
JSON representation

A responsive, real-time chat application frontend built with React.js and Socket.IO. Features secure authentication, instant messaging, media sharing, notifications, and dark mode. Designed with reusable components and efficient state management for scalability and seamless user experience.

Awesome Lists containing this project

README 

        
# WhatsApp Clone Project Plan



## Introduction



This project is a full-stack WhatsApp-like chat application that allows users to send messages, make voice and video calls, send and receive multimedia files, and manage user accounts. The goal is to create a feature-rich chat application with all the basic and advanced features found in WhatsApp, along with a few unique features.



## Tech Stack



- **Frontend**: React (for web), React Native (for mobile), WebSocket (for real-time communication), Redux (state management)

- **Backend**: Node.js with Express.js, WebSocket for real-time communication

- **Database**: MongoDB (for storing user data, messages, media, etc.)

- **Authentication**: JWT (JSON Web Tokens) for secure authentication

- **Storage**: Firebase Storage or AWS S3 (for storing media files)

- **Voice/Video Calls**: WebRTC or third-party APIs (e.g., Twilio, Agora)

- **Push Notifications**: Firebase Cloud Messaging (FCM)



## Basic Features



1. **User Authentication**: 

   - Users can sign up, log in, and manage their accounts.

   - Passwords are securely hashed and stored.

   - JWT is used for authentication.



2. **Real-Time Messaging**:

   - Users can send and receive messages in real-time.

   - WebSocket or Socket.io will be used to handle real-time communication.



3. **Group Chats**:

   - Users can create group chats with multiple participants.

   - Admins can manage group settings, including adding/removing users.



4. **Media Sharing**:

   - Users can send and receive images, videos, audio files, and documents.

   - Media files are stored securely in Firebase Storage or AWS S3.



5. **Push Notifications**:

   - Users will receive push notifications for new messages and call alerts.



6. **Voice and Video Calls**:

   - Users can make real-time voice and video calls.

   - WebRTC or a third-party API like Twilio or Agora will be used to implement this feature.



7. **Status (Story)**:

   - Users can post status updates (stories) that disappear after 24 hours.

   - Stories can be text, image, or video-based.



## Additional Features



1. **Block User Feature**:

   - **Description**: Allow users to block other users, preventing them from sending messages or interacting with the user in any way.

   - **Implementation**: 

     - Add a "Block User" option in the user profile.

     - Store blocked users in the database with a reference to the user.

     - On the backend, check if a user is blocked before allowing them to send a message.

     - On the frontend, hide the blocked user's messages and prevent new messages from being received from the blocked user.



2. **Background Change (Theme Customization)**:

   - **Description**: Allow users to change the chat background or theme to customize the look and feel of their chat screen.

   - **Implementation**: 

     - Add an option in the settings to change the background or theme (light/dark mode).

     - Store the user's preference in the database or local storage.

     - Apply the selected background or theme across the app.



3. **Conversation Type Change**:

   - **Description**: Enable users to switch between different types of conversation (e.g., text-based, voice, or video) during an active chat.

   - **Implementation**:

     - Provide buttons in the chat interface to switch between text, voice, and video modes.

     - Use WebRTC or a third-party service for switching between video and voice calls.

     - For text, ensure that the chat interface updates dynamically to accommodate voice/video features.



4. **Get All Images, Links, and Files Separately**:

   - **Description**: Extract all media files (images, links, and documents) shared in a conversation and display them separately in the chat.

   - **Implementation**:

     - Filter messages for media types (image, video, link, document).

     - Store the media separately and create a dedicated UI for displaying all images, links, and files shared in the chat.



5. **Sending Voice Messages**:

   - **Description**: Enable users to send voice messages within the chat.

   - **Implementation**:

     - Integrate Web Audio API or use libraries like `react-native-audio` to record audio messages.

     - Allow the user to press and hold a button to record, and send the audio as a message once released.

     - Play the voice message in the chat when received.



6. **Stories (Status Updates)**:

   - **Description**: Allow users to post status updates (similar to WhatsApp Stories) that disappear after 24 hours.

   - **Implementation**:

     - Create a UI for posting and viewing status updates, which are visible to other users for a limited time.

     - Store the status updates in the database with an expiration time (e.g., 24 hours).

     - Show the status updates in a separate section or at the top of the chat list.



7. **Story Reactions**:

   - **Description**: Allow users to react to a status update (story) using emojis or reactions.

   - **Implementation**:

     - Add reaction options (emojis) to each status update.

     - Allow users to click on a status and react by selecting an emoji.

     - Store reactions in the database and display them to the story owner.



## Final Thoughts



### Backend Changes:

- Update the database schema to store information about blocked users, story status, and reactions.

- Integrate media storage solutions like Firebase Storage or AWS S3.



### Frontend Changes:

- Design the UI components for blocking users, changing the background, and viewing media files.

- Implement real-time updates using Socket.io for chat and story reactions.



### Testing:

- Test the app thoroughly, particularly for real-time features like voice messages and story updates.



### Some update

- add polling system

- add event system

- and notes/schedule/Agreement