Dojo Project Overview

Dojo is a full-stack, real-time communication platform designed to provide a "Discord-like" experience with support for organized communities (Guilds), instant messaging, and high-performance voice/video conferencing.

1. Backend Implementation (Node.js / TypeScript)

The backend acts as the central API and real-time signaling hub for the application.

• Architecture & Database:
  • Built with Express and TypeORM for a structured, scalable codebase.
  • PostgreSQL database manages complex relational data including Users, Guilds, Channels, Messages, Roles, and Friendships.
• Real-Time Communication:
  • Socket.io: Handles instant messaging, user presence (online/offline/status), and signaling for call actions like ringing and busy states.
  • Mediasoup (SFU): Implements a Selective Forwarding Unit to route WebRTC audio and video streams efficiently for multi-user calls.
• Authentication & Security:
  • Secure user registration and login utilizing JWT (JSON Web Tokens) for session management.
  • Password security handled via bcryptjs hashing.
  • Route protection ensured through checkJwt and auth middleware.
• File & Asset Management:
  • Multer integration for handling uploads of guild icons, user avatars, chat attachments, and custom soundboard effects (SFX).
  • Dedicated UploadAsset entity to track and serve files securely.

2. Frontend Implementation (React / Vite)

The frontend is a modern Single Page Application (SPA) built for high interactivity and real-time updates.

• Core UI Framework:
  • Developed with React 19 and Vite for optimized performance and developer experience.
  • Styled using Tailwind CSS for a responsive, desktop-class interface.
• State & Navigation:
  • React Router handles complex navigation between the dashboard, authentication pages, and invite links.
  • Global authentication and user state managed via React Context.
• Key Feature Modules:
  • Real-time Chat: Supports rich text rendering through React Markdown and GFM, featuring real-time message delivery and deletion.
  • Media Interaction: Custom hooks (e.g., useMediasoup) and components (e.g., VideoGrid, VideoPlayer) manage live WebRTC media streams.
  • Drag and Drop: Integrated @dnd-kit for intuitive reordering of channels and guilds within the sidebar.
  • Social & Presence: Real-time user status updates, friend request management, and interactive user profile popups.
  • Context Menus: Comprehensive right-click menus for managing guilds, channels, and users.