Overview:

This project is a recreation of the Facebook Messenger web application using React and CSS. It is still in its early stages but most of the basic functionalities are already implemented. It is important to note that this is not an official Facebook product and it is not maintained by any Facebook employees.

Features:

Compose component: Allows users to send messages and attachments. It includes the option to add icons for sending photos, cash, location, etc.
ConversationList component: Renders the ConversationSearch component and fetches users from the Random User API using Axios.
ConversationListItem component: Provides an overview of a single conversation, displaying a photo, name (or group title), and a snippet of the most recent message. It uses Shave library to trim the displayed message for consistent spacing.
ConversationSearch component: A simple input element styled to resemble the Facebook Messenger search bar. The placeholder is initially centered and moves to the left when the input is focused.
Message component: Works in conjunction with MessageList. It has various props for styling different groups of messages such as the message body, timestamp, whether it is sent by the user or someone else, and whether it represents the start or end of a message sequence.

Summary:

The Facebook Messenger web application recreation project is a work-in-progress that aims to replicate the functionality of the official Facebook Messenger using React and CSS. It provides components for composing and sending messages, rendering conversation lists, displaying individual conversation items, searching conversations, and displaying messages. Although it is not an official Facebook product and not maintained by Facebook employees, it offers a starting point for building a messaging application similar to Facebook Messenger.

Sejr

React Messenger

Vuefire Quickstart