ITDCFeD – Week #11 | Real-time Chat Application + Typing Indicator + Online Status + Message Reactions

, , , , , , ,


 

1. تعارف

آئی ٹی درسگاہ سرٹیفائیڈ فرنٹ اینڈ ڈویلپر (ITDCFeD) پروگرام کے گیارہویں ہفتے میں خوش آمدید۔ اس Week #11 میں production-grade real-time chat application بنایا جائے گا جو WhatsApp/Discord جیسے features رکھتا ہے:

  • Real-time Messaging (instant delivery)

  • Typing Indicators (دوسرے user ٹائپ کر رہے ہیں)

  • Online/Offline Status (real-time user presence)

  • Message Animations (slide-in effects)

  • Responsive Sidebar (users list)

2. اس لیکچر / پروجیکٹ کے اہداف

Week #11 کے اختتام تک آپ:

  • Event-Driven Programming (input, keypress, setInterval)

  • Real-time State Management (messages array + users array)

  • Typing Detection (input event + Set data structure)

  • CSS Animations (@keyframes messageSlide + typing dots)

  • Auto-scroll (chat container scrollHeight)

  • Simulated WebSocket Logic (setTimeout responses)

3. Live Demo اور Source Code (CodePen)

🔗 Live Demo + Source Code (CodePen):
https://codepen.io/mmshahid73/pen/EayoBbe

استعمال کا طریقہ:

  • Message type کریں → Typing indicator دکھے گا

  • Enter/Send → instant message + bot auto-reply

  • Users Sidebar → online/offline status changes (10s interval)

  • Scroll → auto-scroll to bottom

  • Mobile → responsive sidebar collapse

4. پروجیکٹ کی ساخت – Technical Deep Dive

4.1 HTML – Chat UI Architecture

text
Sidebar → Users List (online status + active user)
Chat Header → Partner info + actions (emoji, attach)
Messages Container → Scrollable + flex column
Typing Indicator → Animated dots + usernames
Message Input → Flex input + send button

4.2 CSS – WhatsApp-style Design

text
✅ Bubble Chat: sent(right, gradient) vs received(left, light)
✅ Typing Animation: 3 staggered dots (animation-delay)
✅ Status Badges: Green(online) vs Red(offline)
✅ Glassmorphism: backdrop-filter + rgba backgrounds
✅ Message Slide: translateX(20px→0) + opacity fade
✅ Responsive: Mobile sidebar height: 200px

4.3 JavaScript – Real-time Logic

text
1. State: messages[], users[], typingUsers(Set)
2. Typing Detection: input event → Set.add/delete
3. Auto Responses: setTimeout(1-3s random delay)
4. Rendering: innerHTML template literals + scrollTop
5. Status Updates: setInterval(10s) user status toggle
6. Time Formatting: toLocaleTimeString('ur-PK')

5. Week #11 اسائنمنٹ / Homework

لازمی کام:

  1. CodePen Fork کریں: https://codepen.io/mmshahid73/pen/EayoBbe

  2. Private Chat implement کریں (user click → 1:1 chat)

  3. Message Reactions add کریں (👍 ❤️ 😂)

  4. File Upload chat میں (Week #10 drag-drop reuse)

  5. Read Receipts (seen ✅ double-tick)

  6. Forum Share: CodePen + private chat demo + screenshots

Bonus Challenges:

text
- LocalStorage message persistence
- Message editing/deletion
- Voice messages (Web Audio API)
- Push notifications (Notification API)
- Socket.io integration (real WebSocket)

6. Production Applications + Portfolio Value

Enterprise Chat Features:
✅ Customer Support (live chat widgets)
✅ Team Collaboration (Slack/Discord clones)
✅ E-learning (student-teacher messaging)
✅ SaaS Dashboards (internal notifications)
✅ Social Apps (group messaging)

Week #1-11 Portfolio: Full-Stack Frontend + Real-time Apps!

7. اختتامی پیغام

Week #11 کا یہ Real-time Chat Application آپ کو WebSocket-level interactivity سکھا دیتا ہے جو Facebook Messenger, WhatsApp, Slack استعمال کرتے ہیں۔ اب fork کریں، private messaging add کریں، reactions implement کریں، اور فورم پر share کر کے ITDCFeD advanced frontend track مکمل کریں!

-
Tags: , , , , , , ,

کوئی تبصرے نہیں:

ایک تبصرہ شائع کریں

سبسکرائب کریں در: تبصرے شائع کریں (Atom)