DevLoopFeed

DevLoopFeed is a developer-focused social platform that combines a feed, profiles, messaging, activity tracking, saved collections, reporting, and real-time collaborative coding rooms in one place.

The core idea is simple: developers should be able to share work, discover other developers, discuss posts, send feedback, and jump into a collaborative coding room without leaving the platform.

Highlights

• Developer feed with all/following filters, infinite scrolling, post creation, editing, deletion, likes, comments, replies, reports, and saved collections.
• Profile and portfolio system with skills, education, experience, projects, posts, heatmap contributions, followers, following, feedback, block, and report actions.
• Real-time messaging with Socket.IO, unread states, seen logic, message reports, unsend, feedback messages, and conversation hiding.
• Real-time collaborative coding rooms with problem add/select/unselect, Yjs-based code sync, presence, chat, audio call, code execution, and room problem status.
• Secure authentication with email OTP signup, Google OAuth, forgot password OTP, access/refresh tokens, refresh-token session storage, blacklist checks, logout all devices, and account deletion.
• Background cleanup using BullMQ for post and account deletion so heavy work does not block the user request.
• ImageKit media handling, Redis caching/session support, RTK Query caching, optimistic updates, and reusable frontend UI patterns.

Tech Stack

Frontend

• React 19
• Vite
• Redux Toolkit and RTK Query
• React Router
• Tailwind CSS
• Socket.IO Client
• Monaco Editor
• Yjs
• PeerJS
• Lucide icons

Backend

• Node.js
• Express 5
• MongoDB and Mongoose
• Redis and ioredis
• Socket.IO
• BullMQ
• JWT auth
• Zod validation
• Multer
• ImageKit
• Resend email
• Google OAuth
• Judge0/RapidAPI for code execution

Project Structure

devloop-feed/
  devloop-feed-api/      Backend API, sockets, workers, services, models
  devloop-feed-web/      Frontend React app
  README.md              Setup and project overview
  docs.md                Development journey and feature story

Local Setup

1. Clone and install

git clone <repo-url>
cd devloop-feed

cd devloop-feed-api
npm install

cd ../devloop-feed-web
npm install

2. Backend environment

Create devloop-feed-api/.env.

Required values used by the backend include:

NODE_ENV=development
PORT=8080
DB_URI=

REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_PASSWORD=

PRIVATE_JWT_KEY_BS64=
PUBLIC_JWT_KEY_BS64=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

IMAGE_KIT_PUBLIC=
IMAGE_KIT_PRIVATE=
IMAGE_KIT_URL_ENDPOINT=

RESEND_API_KEY=
SENDER_EMAIL=

RAPIDAPI_JUDGE0_KEY=
RAPIDAPI_JUDGE0_HOST=judge029.p.rapidapi.com
JUDGE0_API_URL=https://judge029.p.rapidapi.com

3. Frontend environment

Use devloop-feed-web/.env.example as the reference:

VITE_GOOGLE_CLIENT_ID=

VITE_TURN_URLS=
VITE_TURN_USERNAME=
VITE_TURN_CREDENTIAL=

VITE_PEER_HOST=
VITE_PEER_PORT=
VITE_PEER_PATH=
VITE_PEER_SECURE=

TURN and custom PeerJS server values are optional. Without them, the audio call feature falls back to Google STUN and PeerJS defaults.

4. Run the app

Start Redis and MongoDB first.

Backend:

cd devloop-feed-api
npm run dev

Frontend:

cd devloop-feed-web
npm run dev

Useful Commands

Frontend build:

cd devloop-feed-web
npm run build

Frontend lint:

cd devloop-feed-web
npm run lint

Backend dev server:

cd devloop-feed-api
npm run dev

Core Feature Manual

Authentication

• Users can register with email OTP.
• Users can sign in with email/password or Google OAuth.
• Forgot password uses OTP verification.
• Refresh tokens are stored per session and checked before issuing new access tokens.
• Logout revokes the current session.
• Logout from all devices revokes all refresh-token sessions.
• Account deletion supports password verification for normal accounts and OTP verification for Google accounts.

Feed and Posts

• The home feed supports All and Following.
• All shows mixed latest posts.
• Following shows only posts from followed users.
• Posts support images, captions, project metadata, likes, comments, replies, feedback, reports, saving, editing, and deletion.
• Heavy post deletion cleanup runs in a BullMQ worker.

Comments and Replies

• Comments are paginated.
• A user's own comments can be prioritized for visibility on non-owned posts.
• One-level replies are supported.
• Comments and replies contribute to the activity heatmap.
• Deleting comments/replies updates related contribution records.

Messaging

• Conversations are real-time through Socket.IO.
• Messages support seen/unseen state, unread badges, date dividers, feedback previews, unsend, and report actions.
• Conversation hiding is supported without immediately deleting messages for both users.

Collaborative Coding

• Users can request collaboration through chat.
• A room is created after the request is accepted.
• Room presence shows whether each participant is in the room.
• Problems can be added, selected, unselected, solved, and tracked.
• Code sync uses Yjs updates to reduce conflict and flicker.
• Code execution uses Judge0/RapidAPI and updates room problem status when all tests pass.
• Audio call is available when both participants are inside the room.
• Blocked-room behavior allows the blocked user to keep access to their work in solo mode.

Dashboard and Portfolio

• Dashboard includes activity, posts, rooms, portfolio, and more settings.
• Portfolio sections include general info, skills, education, experience, projects, languages, and interests.
• Portfolio preview shows how the profile appears to others.
• Activity modals allow direct actions like unlike, delete comment, delete feedback, and unfollow.

Safety and Moderation

• Users can report posts, messages, and profiles.
• Users can view their submitted reports.
• Users can block/unblock others.
• Backend checks prevent blocked users from bypassing UI restrictions through direct API calls.

Future Optimizations

• Redis write-back caching can be introduced to reduce database bottlenecks during high traffic.
• Split large frontend chunks using route-level lazy loading and manual Rollup chunks.
• Move heavy collaborative code sync persistence to a dedicated real-time service if rooms scale.
• Add a production TURN provider for more reliable WebRTC audio across strict networks.
• Add automated integration tests for auth, post cleanup, chat, block rules, and collab room flows.
• Add observability for BullMQ jobs, socket events, and code execution failures.
• Add admin moderation dashboard for reports, blocked content review, and abuse tracking.

Notes

This project is still evolving. The current focus is building a strong full-stack portfolio-grade product with real user workflows, realtime systems, background jobs, and scalable architecture patterns.