🚀 Community Hub API Integration & Real-time Features

[hillmatthew2000]

🚀 Community Hub API Integration & Real-time Features

📋 Problem

Community Hub currently uses mock data. Need to integrate real API endpoints and add WebSocket real-time features.

✅ What's Already Done

• ✅ Complete UI components and navigation
• ✅ Backend API routes in communityRoutes.ts
• ✅ Database models (Discussion, Reply, Vote)
• ✅ JWT authentication system
• ✅ TypeScript types and interfaces

🎯 What Needs To Be Done

Phase 1: Replace Mock Data with API

Current Problem - CommunityHub.tsx uses fake data:

// ❌ This needs to be replaced
useEffect(() => {
  setDiscussions(mockDiscussions);
}, []);

Solution - Connect to real API:

// ✅ Replace with this
const fetchDiscussions = async () => {
  const response = await api.get('/community/discussions');
  setDiscussions(response.data.data.discussions);
};

Available API Endpoints:

GET  /api/community/discussions      # Get all discussions
POST /api/community/discussions     # Create discussion (auth required)
POST /api/community/vote           # Vote on discussion (auth required)

Phase 2: Add Real-time Features

Add WebSocket server for:

• Live vote count updates
• New reply notifications
• Online user presence
• Real-time discussion updates

� Implementation Checklist

🔴 High Priority (Phase 1)

• Replace mock data in CommunityHub.tsx
• Add API calls to services/api.ts
• Connect voting buttons to backend
• Add error handling for API failures
• Test with real backend server

🟡 Medium Priority (Phase 2)

• Set up WebSocket server with Socket.IO
• Add real-time vote updates
• Implement new reply notifications
• Add user online presence indicators

🟢 Low Priority (Phase 3)

• Discussion detail page with replies
• Advanced search and filtering
• User profile integration
• Discussion moderation tools

� Key Files to Modify

Frontend:

• src/pages/CommunityHub.tsx - Remove mock data, add API calls
• src/services/api.ts - Add community API methods
• src/components/Community/DiscussionCard.tsx - Connect voting

Backend:

• src/index.ts - Add WebSocket server setup
• src/websocket/communitySocket.ts - WebSocket event handlers (new file)

� Getting Started

1. Start backend server on localhost:4000
2. Test API endpoints with Postman/curl
3. Replace mock imports in CommunityHub component
4. Add error states and loading indicators
5. Test voting functionality with authenticated users

✅ Definition of Done

• No more mock data - all API connected
• Voting works with real backend
• Error handling for network issues
• Real-time updates working via WebSocket
• All CRUD operations tested and functional

[SrinjoyeeDey]

@hillmatthew2000 , are you interested to work on it alone?

[harshneyy]

I am interested!

[SrinjoyeeDey]

Assigned @harshneyy and @hillmatthew2000 both can work on it

[hillmatthew2000]

@harshneyy excited to be working on this together! Let me know if you have any questions or need anything. I will be working on this throughout today. Please let me know if you want to schedule a time to work together.

[harshneyy]

Thanks @hillmatthew2000 ....i am busy rn ....i am thinking to start working on it after 3 hours...will let you know if i get stuck somewhere or need help ...thanks 😊

[SrinjoyeeDey]

Okay @harshneyy and @hillmatthew2000, please coordinate and work together on this. Since this is an important section of the project, I’d like it to be completed as soon as possible. ⚡

[harshneyy]

@SrinjoyeeDey I have now finished the work for Phase 1 and have submitted my pull request for it.

I saw your note about wanting to get Phase 2 and 3 finished quickly. I can start working on Phase 2, but it might take me until the end of the week.

If you'd like to speed things up, please feel free to open up Phase 2 and 3 for other contributors to work on. Thank you!

[hillmatthew2000]

@harshneyy You are awesome. Thanks for wrapping that up! I'll see what I can do for phase 2. Sorry for taking so long @SrinjoyeeDey work has been very busy.

[SrinjoyeeDey]

@hillmatthew2000 , nice that you are cooperating , yes I am eagerly waiting for phase 2

[SrinjoyeeDey]

@harshneyy, could you please let me know if you are working on Phase 2 as well?