Whatsapp Clone.

Redux | Redux Saga

• Redux to handle all state
• Redux Saga to handle side effects

Chat Info Panel

• Chat Information panel
• User can modify group avatar, name
• List of all participants in the group

Emoji Container

• Emoji container built from scratch
• User can search for an emoji
• Intersection observer to observe category in view

Attachment Modal

• User can preview attachments before sending
• Icons mapped to file type, play video, etc
• Custom footer to preview files, user can add more

Active User Indicater

• Bullet indicating online status of user
• Video call bullet to check if user is online and can be called.
• Last seen time

Change Avatar in Real Time

• User can click their picture and set it as avatar
• Ask for webcam, microphone permission modal
• User can upload picture and set it as avatar as well
• Image is compressed before upload

Change Information in Real Time.

• Modify user details in real time
• User can edit bio in real time

Send Message in Real Time

• User can send images, videos, audios and documents
• Each message is properly structure and parsed before sending via redux saga.
• Calculation of duration of video is dynamically implemented.
• A thumbnail of an uploaded video / image is dynamically created. This thumbnail is highly compressed version of real image.

Message Preview Modal.

• User can preview messages
• Control left and right via mouse or keyboard to switch between messages.
• A preview footer to track all of the messages

Custom Video Player.

• A video player built from scratch with controls
• Progress bar to seek tracks, adjust volume, etc

Send Captured Image.

• Click a picture using your webcam and send that as a message.
• Custom modal to preview captured image

Record Audio

• Record audio and send it as a message
• Duration indicater

Minimize Videos

• User can minimize video and continue using other functionalities of the app.
• User can play, mute, seek and make the minimized video full screen.

Send and Download File.

• Send document can be downloaded
• Documents are also send in real time

Video Call

• User can call any online authenticated user
• Call info modal when a user is calling, they can accept or reject call
• User can mute their audio
• User can also hide their video