Implement Real-time Messaging System

[RUKAYAT-CODER]

Overview

Create a real-time messaging system for communication between students and instructors.

Background

Direct communication between learners and instructors is essential for clarifying doubts and providing personalized guidance.

Specifications

Components to Create:

• ConversationList showing all active conversations
• MessageThread for displaying conversation history
• MessageComposer with rich text support
• UnreadIndicator for new messages

Tasks:

• Implement WebSocket connection for real-time updates
• Add typing indicators
• Create read receipts functionality
• Enable file attachment support

Impacted Files:

• src/components/messaging/ConversationList.tsx (new)
• src/components/messaging/MessageThread.tsx (new)
• src/components/messaging/MessageComposer.tsx (new)
• src/components/ui/RichTextEditor.tsx (new)
• src/hooks/useMessaging.tsx (new)
• src/pages/Messages.tsx (update)

Labels: frontend, messaging, real-time, websockets, priority-high

Acceptance Criteria

• Messages are sent and received in real-time
• Typing indicators show when the other party is composing
• Read receipts indicate when messages have been seen
• File attachments can be uploaded and viewed
• Message history is paginated for performance

Figma Link

🙌Contribution Guidelines:

Assignment required before PR submission
Timeframe: 24 48 hours
PR description must include: Close #10
Join the Telegram group
Star the repo⭐
For more context, please refer to the project README here 🚀.

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[nottherealalanturing]

@nottherealalanturing has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this issue. I’ll implement a real-time messaging system using WebSockets, covering conversations, message threads, typing indicators, read receipts, and file attachments.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @nottherealalanturing to this issue.

[drips-wave]

Congratulations, @nottherealalanturing! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @nottherealalanturing: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

⚠️ Important: When opening a PR, please link it to this issue to ensure it gets tracked accurately.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊