~shahper.shahin
Back to Selected Work
Full-Stack Systems & Real-TimeYear 2025

BRB: Better Resolve Bug — Real-Time Developer Collaboration

Real-time project collaboration platform with partner discovery, WebSocket messaging, and RESTful project governance.

React.jsNode.jsExpress.jsMongoDBSocket.IOMulterJWTbcrypt
01

The Problem

Independent developers, students, and hackathon participants often lack structured channels to find complementary teammates, discuss specific code bugs, and collaborate in real time with project context attached.

Built a comprehensive web platform integrating real-time messaging, project blogs, and collaboration requests in a decoupled MERN architecture.

02

The System & Architecture

Express.js REST API with Socket.IO room management, JWT authentication middleware, and MongoDB Mongoose models.

System Schematic

BRB Real-Time Collaboration Pipeline

4 Components • 3 Data Paths
client

React SPA Client

Browser Frontend

service

Express API

REST Endpoints

protocol

Socket.IO Gateway

Room Multiplexing

storage

MongoDB Store

Persistent Data

Execution Sequence & Interconnects
01React SPA ClientExpress APIHTTP Requests / REST
02React SPA ClientSocket.IO GatewayReal-Time Events
03Express APIMongoDB StoreMongoose CRUD
03

My Engineering Work

  • Implemented JWT session authentication with bcrypt salt hashing and route-level authorization middleware
  • Designed Socket.IO room lifecycle for direct developer chats and project discussion threads
  • Configured Multer middleware for multipart file attachments and project screenshot uploads
  • Added client-side message delivery states with optimistic rendering to eliminate perceived latency
socket-handler.js
javascript
io.on('connection', (socket) => {
  socket.on('join_project_room', ({ projectId, userId }) => {
    socket.join(projectId);
    io.to(projectId).emit('user_joined', { userId, timestamp: Date.now() });
  });

  socket.on('send_message', async (data) => {
    const saved = await Message.create(data);
    io.to(data.projectId).emit('receive_message', saved);
  });
});
04

Decisions & Trade-offs

Challenge: Preventing message dropouts and UI stutter during intermittent network disruptions

Solution: Implemented client-side pending message states with automatic reconnection handlers and message acknowledgment callbacks

Engineering Trade-off: Increased client state complexity to guarantee consistent conversation views across tabs
05

Validation & Limitations

// Evaluated & Working
  • Reliable bidirectional messaging with instant UI updates across multi-user project rooms
  • Modular REST API architecture cleanly separated from real-time WebSocket event listeners
// Current Limitations & Next Steps
  • Does not implement end-to-end cryptographic message encryption
  • Uploaded media files are stored on server disk via Multer rather than cloud object storage in current build
06

Evidence & Verification

Verify the implementation directly via source code, commit history, and setup documentation:

Ref: Full setup instructions for React frontend and Express/Socket.IO backend in repository