Team Chat Dashboard
Build a modern and clean team chat dashboard based on the provided design. The interface should include a left sidebar with navigation icons, a conversations list, a central chat area, and a right panel containing a team directory and shared files. Use HTML for structure, CSS for styling, and JavaScript for interactivity and dynamic rendering. Integrate an API or mock JSON data source to load conversations, team members, messages, and shared files dynamically. The final result should focus on clean dashboard structure, reusable chat components, responsive layout, modern UI styling, and dynamic content updates.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- 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
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.