GitHub

Build the full team chat dashboard based on the provided design

Use semantic HTML5 structure

Style the full interface using CSS

Use JavaScript for dynamic rendering and UI interactions

Create a left sidebar with navigation icons and active states

Build a conversations list with avatars, names, message previews, timestamps, and tags

Create a chat header with selected user information and call action

Build a central message area with incoming and outgoing message bubbles

Display avatars beside relevant messages

Create a message input field with send button

Build a right-side directory panel with team member list

Add a shared files section with file name, type, size, and action icon

Integrate at least one API or mock API for messages, users, and files

Render conversation and message data dynamically using JavaScript

Allow switching between conversations

Update the active chat content when a conversation is selected

Add hover and active states for buttons, navigation items, and chat rows

Use a clean spacing system and consistent typography throughout

Make the layout responsive for tablet and mobile devices

Keep code clean and organized across HTML, CSS, and JavaScript files

Team Chat Dashboard