PB
Pranav Bafna

Messaging App - Copy this React, Tailwind Component to your project

Design an intuitive and feature-rich user interface for a messaging application. The layout should feature a contact list on the left side with names, statuses, and recent activity timestamps, while the selected chat appears on the right, showcasing the conversation with messages aligned by sender, timestamps, and read receipts. Enhance functionality by adding three dots to the right of each sent message; clicking these dots opens a dropdown with three options: Edit (marks the message as "edited" after modification), Delete (opens a modal asking whether to "Delete from me" or "Delete from everyone," with corresponding actions), and Forward (opens a modal displaying contact names for the user to select and forward the message). Replace the settings button in the sidebar with a pencil icon that opens a dropdown menu containing Create New Group, Settings, and Logout. Selecting "Create New Group" opens a modal where users can search and select contacts, input a required group name, and click a button to create the group, which then appears in the chat list. Ensure a modern, clean design with rounded edges, a soft color palette, and smooth interactions to enhance user experience.

Prompt

About

MessagingApp - A sleek UI with a contact list, chat bubbles, timestamps, and profile pics, professionally built with React and Tailwind. Start coding now!

Share

Last updated 1 month ago