Back to Overview

Orbit

Tags:Front-EndBack-EndFull-StackWebsite
Technologies:NextJSTypeScriptTaildwind CSSshadcn/uiPostgreSQLPusherWebRTC
Visit WebsiteGitView Source

Meet Orbit! A full-stack real-time communication platform designed to bridge the gap between traditional social media feeds and synchronous chat. This project was a massive excuse to dive deep into WebSockets, peer-to-peer signaling, and complex client-side state to build a seamless, sub-second social experience.

The Stack

  • Framework: Next.js (App Router) for the core architecture.
  • Language: TypeScript, keeping the entire full-stack type-safe.
  • Styling: Tailwind CSS paired with Shadcn UI for clean, accessible, and consistent components.
  • Database: SQL, queried and managed through Drizzle ORM.
  • Package Manager: Bun, for fast installs and script execution.
  • Real-Time: Pusher for instant text messaging, combined with WebRTC for peer-to-peer audio and video calls.

Features & Social Graph

Orbit isn't just a chat app; it's a space for serendipitous discovery and building connections. I built out a full social ecosystem from scratch:

  • Instant messaging featuring sub-second delivery, read receipts, message replies, and typing indicators.
  • Peer-to-peer WebRTC audio and video calls, with custom signaling and stream management.
  • A random matchmaking system that pairs users up for spontaneous conversations.
  • A robust social feed complete with hashtag parsing, mentions, and a responsive timeline.
  • A friendship system to send invites, manage requests, and build a private network.
  • Full internationalization (i18n) supporting both English and German locales.

Trust & Safety

Because a social platform is only as good as its moderation, I couldn't just skip the admin tools. I built a comprehensive moderation dashboard with automated reporting features and a reliable banning system to ensure a safe environment for users.

The Challenge

Building a real-time application meant wrestling with complex client-side state. Every incoming event needed to update the UI instantly without blocking it. Implementing WebRTC from scratch—managing RTCPeerConnection states, handling local/remote media streams, and negotiating ICE servers—was a massive learning curve, but incredibly rewarding to build out by hand rather than relying on a heavy third-party video SDK.