Real-Time Chat App
Build a full stack real-time chat application where users can view conversations, send messages, and communicate instantly with other users. The application should include a chat list, active conversation panel, message input, and a contact information sidebar. Messages should appear in real time using sockets or a polling-based solution. This challenge focuses on real-time communication, user-specific conversations, messaging logic, and interactive UI states.
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
- Users must be able to view a list of conversations
- Users must be able to open a conversation
- Users must be able to send a new message
- New messages must appear in real time using sockets or polling
- Each message must display content and timestamp
- Messages must clearly distinguish sender and receiver
- Users must only access their own conversations
- The chat UI must include a message input area
- The interface must include a conversation list sidebar
- The interface must include a chat details or contact panel
- Messages must be stored in a database
- Basic validation must prevent sending empty messages
- The layout must be clean and user-friendly
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.