devradar

next.jsfastifyprismavscode-extension

the discord for VS Code that lets you see what friends are coding in real-time. a three-tier architecture with a VS Code extension, Fastify backend with WebSocket support, and a Next.js web dashboard.

view source (github) demo →

Metrics

architecture

3-tier

extension + api + web

real-time

WebSocket

live presence updates

database

PostgreSQL

prisma ORM + redis cache

Architecture

VS Code Extension

Fastify API Server

PostgreSQL + Redis

WebSocket Hub

Next.js Dashboard

Presence Tracking: VS Code extension captures real-time coding activity and broadcasts presence via WebSocket connections to the Fastify server.

Data Layer: PostgreSQL with Prisma ORM for persistent storage, Redis for session caching and real-time presence state.

Code Snippet

packages/extension/src/extension.ts

// activate presence tracking on editor focus
vscode.window.onDidChangeActiveTextEditor((editor) => {
if (editor) {
  websocket.send(JSON.stringify({
    type: 'presence',
    file: editor.document.fileName,
    language: editor.document.languageId,
    timestamp: Date.now(),
  }));
}
});

Production Readiness

Developer Experience

VS Code Extension: Native editor integration with real-time presence broadcasting and friend activity feed.
Web Dashboard: Next.js 16 dashboard for viewing developer activity, managing connections, and team analytics.

Infrastructure

WebSocket Server: Fastify-based real-time communication hub for instant presence updates across all clients.
Monorepo Architecture: pnpm + Turbo workspace with shared packages for types, validation (Zod), and utilities.

About

DevRadar brings social presence to the coding experience. Built as a monorepo with three main packages including a VS Code extension for client-side presence tracking, a Fastify server with WebSocket support for real-time communication, and a Next.js web dashboard for viewing developer activity and managing connections.