Skip to content

RADXIshan/SyncSpace

BranchesTags

Repository files navigation

🚀 SyncSpace - Modern Team Collaboration Platform

SyncSpace Logo

A comprehensive real-time team collaboration platform with video conferencing, messaging, polls, voice messages, AI assistance, and advanced productivity tools

React Node.js Express.js Socket.IO PostgreSQL Tailwind CSS Google Gemini

🚀 Live Demo | 📖 Documentation | 🛠 Setup Guide

📋 Table of Contents

🌟 Overview

SyncSpace is a cutting-edge team collaboration platform that seamlessly integrates real-time messaging, HD video conferencing, interactive polls, voice messages, AI-powered assistance, and comprehensive project management tools. Built with modern web technologies and designed for scalability, it empowers teams to communicate, collaborate, and stay productive from anywhere.

📸 Screenshots

Dashboard

Dashboard Main dashboard with organization overview, quick stats, and navigation

Team Chat & Messaging

Team Chats Real-time team messaging with reactions, replies, and file sharing

Messages & Direct Messaging

Messages Private 1-on-1 conversations with full message history

Meeting Room

Meeting Page HD video conferencing with screen sharing and in-meeting chat

Meeting Reports & Analytics

Meeting Reports AI-powered meeting summaries with participant analytics

Calendar & Events

Calendar Integrated calendar with event management and meeting scheduling

AI Assistant

AI Assistant Google Gemini-powered AI assistant with workspace context awareness

Smart Search

Smart Search Universal search across all content types with instant navigation

Keyboard Shortcuts

Shortcuts Power user shortcuts for enhanced productivity

Notifications

Notification Page Comprehensive notification center with filtering and categorization

Create Organization

Create Organization Organization creation with custom roles and channel setup

Join Organization

Join Organization Simple organization joining with access code

Key Highlights:

  • 🎯 All-in-One Platform: Messaging, video calls, polls, notes, calendar, and more
  • 🤖 AI-Powered: Google Gemini integration with real-time workspace awareness
  • ⚡ Real-Time Everything: Instant updates via WebSocket connections
  • 🔍 Universal Search: Search across 10+ content types with instant navigation
  • 🎨 Modern Design: Beautiful glass-morphism UI with smooth animations
  • 🔒 Secure: JWT authentication, role-based access control, encrypted connections

Platform Statistics

  • 64+ React Components: Comprehensive UI component library
  • 16+ API Routes: RESTful API endpoints with full CRUD operations
  • 15+ Controllers: Business logic handlers for all features
  • 5 Context Providers: Global state management (Auth, Socket, Notifications, Toast, Unread)
  • Real-time WebSocket: Instant bidirectional communication with Socket.IO
  • 3-Tier Architecture: Client (React), Server (Express), Email Service (Microservice)
  • PostgreSQL Database: Serverless Neon database with full-text search
  • Cloud Storage: Cloudinary CDN for media files and images
  • AI Integration: Google Gemini AI for intelligent assistance
  • 10+ Search Categories: Universal search across all content types

What Makes SyncSpace Special?

  • 🎯 All-in-One Solution: Everything your team needs in one platform - messaging, video, polls, notes, calendar
  • ⚡ Real-Time Everything: Instant updates, live presence, typing indicators, real-time collaboration
  • 🎨 Modern UI/UX: Beautiful glass-morphism design with smooth animations and transitions
  • 🔒 Enterprise-Grade Security: JWT authentication, role-based access control, secure WebSocket connections
  • 📊 Advanced Analytics: AI-powered meeting reports, engagement metrics, productivity insights
  • 🌐 Cloud-Native: Serverless architecture, auto-scaling, global CDN with Cloudinary
  • 📱 Mobile-First: Fully responsive design optimized for all devices and screen sizes
  • 🤖 AI-Powered: Google Gemini integration for intelligent assistance and auto-summaries
  • 🔍 Universal Search: Search across 10+ content types with instant navigation
  • ⚡ Feature Hub: Quick access to all productivity tools with keyboard shortcuts
  • 🎯 Productivity Tools: Built-in Pomodoro timer, keyboard shortcuts, and AI assistant

Landing Page Features

  • Hero Section: Eye-catching hero with animated elements and call-to-action
  • Feature Showcase: Comprehensive feature highlights with visual demonstrations
  • Statistics Display: Real-time platform statistics and metrics
  • Testimonials: User reviews and feedback from satisfied teams
  • Pricing Plans: Transparent pricing information with feature breakdown
  • Feature Comparison: Compare plans side-by-side to find the best fit
  • FAQ Section: Common questions answered with detailed explanations
  • Responsive Navigation: Mobile-friendly navigation with smooth scrolling

UI/UX Enhancements

  • Custom Cursor: Interactive cursor effects for enhanced user experience
  • Particle System: Dynamic background particles for visual appeal
  • Scroll Progress: Visual scroll indicators to track page position
  • Animated Buttons: Smooth button interactions with hover effects
  • Error Boundaries: Graceful error handling to prevent app crashes
  • Loading States: Skeleton screens and spinners for better UX
  • Toast Notifications: Non-intrusive alerts for user feedback
  • Modal Dialogs: Confirmation and input modals for user actions
  • Route Guards: Protected and public route handling for security
  • Glass-morphism Design: Modern frosted glass effect throughout the UI

✨ Key Features

🎤 Communication Suite

Real-Time Messaging

  • Multi-channel team chat with threading
  • Private direct messages
  • Message reactions (👍, ❤️, and more)
  • Reply and quote functionality
  • Edit and delete messages
  • File attachments with preview
  • Typing indicators
  • Read receipts

Voice Messages

  • WhatsApp-style voice recording
  • Audio playback with controls
  • Voice message reactions and replies
  • Download voice messages
  • Duration tracking

Quick Polls

  • Create instant polls with multiple options
  • Real-time voting and results
  • Single or multiple choice
  • Anonymous voting option
  • Poll reactions and replies
  • Visual progress bars
  • Vote count tracking

Message Pinning

  • Pin important messages to channel top
  • Quick access to pinned content
  • Jump to pinned message
  • Unpin functionality
  • Visual pin indicators

Direct Messaging

  • Private 1-on-1 conversations
  • Real-time message delivery
  • File sharing in DMs
  • Message history
  • Unread message tracking

🎥 Video Conferencing

  • HD Video Calls: Crystal-clear video with WebRTC
  • Screen Sharing: Share your screen with participants
  • Meeting Preparation: Test camera/mic before joining
  • Real-Time Chat: Integrated chat during meetings
  • Participant Management: See who's in the meeting
  • Connection Monitoring: Real-time connection status
  • Meeting Reports: Automatic report generation with analytics
  • Meeting Settings: Customize audio/video preferences
  • Meeting Modal: Quick meeting creation interface

🔍 Smart Features

Smart Search (Ctrl+K)

  • Universal Search: Search across all content types
    • Messages in channels
    • Direct messages
    • Files and attachments
    • Meetings and meeting reports
    • Notes and documents
    • Channels and users
    • Notices and announcements
    • Calendar events
  • Category Browsing: Click any category tab to browse all items
  • Instant Navigation: Click any result to jump directly to its location
  • Real-time Results: See results as you type with debounced search
  • Smart Filtering: Filter by specific content types
  • Full-text Search: Powered by PostgreSQL full-text search
  • Single Character Search: Find content with just one letter
  • Content Previews: See message/file previews in results
  • Keyboard Shortcut: Quick access with Ctrl+K

Focus Mode

  • Built-in Pomodoro timer
  • Distraction-free interface
  • Productivity tracking
  • Custom work/break intervals
  • Keyboard shortcut (Ctrl+Shift+F)

Keyboard Shortcuts

  • Power user shortcuts for all features
  • Customizable key bindings
  • Quick access panel (Ctrl+/)
  • Shortcut cheat sheet

AI Assistant (Powered by Google Gemini)

  • Real-time Context Awareness: AI has live access to your workspace data
    • Your organizations, channels, and members
    • Online users and their status
    • Organization roles and permissions
    • Active meetings and recent activity
    • Meeting chat transcripts and participants
    • Channel messages and discussions
  • Intelligent Assistance:
    • Answers questions about your specific workspace
    • "What's my organization name?"
    • "Who's online right now?"
    • "What channels do I have?"
    • "What permissions does the Admin role have?"
    • "Summarize the chat so far" (in meetings)
    • "What did [name] say about [topic]?"
  • Meeting Context:
    • Full access to meeting participants and their settings
    • Real-time chat transcript analysis
    • Meeting notes and action items extraction
    • Audio/video troubleshooting assistance
    • Screen sharing tips and controls
  • Channel Context:
    • Access to channel messages and history
    • Member lists and roles
    • Pinned messages and important discussions
    • Channel-specific insights and summaries
  • Platform Help:
    • Feature explanations and navigation
    • Best practices and troubleshooting
    • Workflow recommendations
    • Keyboard shortcuts and tips
  • Meeting Summaries:
    • Auto-generates meeting summaries with AI
    • Manual summary generation for reports
    • Analyzes meeting chat and participants
    • Extracts key discussion points and action items
  • Accessible via Feature Hub (Ctrl+Shift+A)
  • Conversational Interface: Natural language understanding
  • Context Retention: Remembers conversation history within session

Feature Hub

  • Floating quick-access menu (⚡ button)
  • One-click feature activation
  • Smart Search (Ctrl+K)
  • Focus Mode with Pomodoro timer (Ctrl+Shift+F)
  • Keyboard Shortcuts panel (Ctrl+/)
  • AI Assistant integration (Ctrl+Shift+A)
  • Smooth animations and transitions
  • Bottom-right corner positioning
  • Keyboard-first navigation

🔍 Smart Search Deep Dive

The Smart Search feature is a powerful universal search system that helps you find anything in your workspace instantly.

Search Capabilities

10 Content Categories:

  1. Messages - Search all channel messages with full-text search
  2. Direct Messages - Find conversations with specific users
  3. Files - Search uploaded files by name, type, or content
  4. Meetings - Find scheduled meetings by title or description
  5. Meeting Reports - Search meeting summaries and analytics
  6. Notes - Find collaborative notes and documents
  7. Channels - Discover channels by name or description
  8. Users - Find team members by name or email
  9. Notices - Search announcements and important updates
  10. Events - Find calendar events and reminders

Search Features

  • Type to Search: Real-time results as you type (150ms debounce)
  • Browse Categories: Click any tab to see all items in that category
  • Single Character Search: Find content with just one letter
  • Full-Text Search: PostgreSQL-powered text search with ranking
  • Content Previews: See message/file content in search results
  • Smart Navigation: Click any result to jump directly to its location
  • Result Caching: Instant results for repeated searches
  • Organization Filtering: Only see content you have access to
  • Keyboard Navigation: Full keyboard support for power users

Navigation Behavior

When you click a search result, Smart Search automatically:

  • Messages/Files → Opens the channel where the content is located
  • Direct Messages → Opens the DM conversation with that user
  • Channels → Navigates to the channel page
  • Meetings → Opens the calendar view
  • Meeting Reports → Opens the channel's reports page
  • Notes → Opens the channel where the note is shared
  • Users → Opens a DM conversation with that user
  • Notices → Opens the dashboard with notices
  • Events → Opens the calendar view

Technical Implementation

  • Backend: PostgreSQL full-text search with to_tsvector and to_tsquery
  • Frontend: React with debounced search and AbortController for request cancellation
  • Caching: Client-side Map-based cache for instant repeated searches
  • Performance: Optimized queries with proper indexes and limits (40-50 results per category)
  • Security: All queries filtered by user's organization membership and permissions

🏢 Organization Management

  • Multi-Organization Support: Join and manage multiple orgs
  • Role-Based Access Control: Admin, moderator, member roles
  • Channel Management: Create and organize team channels
  • Member Invitations: Email-based invite system
  • Activity Tracking: Monitor member engagement
  • Custom Branding: Organization-specific settings
  • Organization Settings: Customize org preferences
  • Member Management: Add, remove, and manage members
  • Channel Editing: Modify channel details and permissions

📊 Productivity Tools

  • Smart Calendar: FullCalendar integration with event management
  • Notes System: Collaborative note-taking and sharing
  • Notice Board: Important announcements and updates
  • Meeting Reports: Comprehensive analytics and insights
  • Notification Center: Categorized, filterable notifications
  • File Management: Cloud storage with Cloudinary
  • Direct Messaging: Private 1-on-1 conversations
  • User Status: Online/offline/away presence indicators
  • Mentions System: @mention users in messages
  • Typing Indicators: See when others are typing
  • Connection Status: Real-time connection monitoring
  • Unread Tracking: Track unread messages across channels

🗄️ Database Schema

SyncSpace uses PostgreSQL (Neon serverless) with a comprehensive relational schema designed for scalability and performance.

Database Overview

  • 18 Tables: Users, Organizations, Channels, Messages, Meetings, Events, and more
  • 30+ Relationships: Complex foreign key relationships with cascade behaviors
  • 50+ Indexes: Optimized for fast queries and full-text search
  • JSONB Support: Flexible schema for evolving features
  • Role-Based Access Control: Granular permissions system

Core Tables

User Management

  • users - User accounts and authentication
  • org_members - User-organization memberships
  • org_roles - Custom roles with permissions

Organization Structure

  • organisations - Workspace/team information
  • org_channels - Team channels within organizations
  • org_notes - Collaborative notes
  • org_notices - Announcements and notices

Communication

  • channel_messages - Team channel messages
  • direct_messages - Private 1-on-1 messages
  • meeting_messages - In-meeting chat messages
  • message_reactions - Emoji reactions
  • pinned_channel_messages - Pinned messages

Collaboration Tools

  • polls - Interactive polls
  • poll_votes - Poll voting records
  • events - Calendar events
  • meeting_reports - Meeting analytics and summaries

System

  • notifications - User notifications
  • channel_read_status - Unread message tracking

Key Relationships

users (1) ──→ (N) channel_messages
users (1) ──→ (N) direct_messages
users (N) ←──→ (N) organisations (via org_members)
organisations (1) ──→ (N) org_channels
org_channels (1) ──→ (N) channel_messages
org_channels (1) ──→ (N) polls
polls (1) ──→ (N) poll_votes
channel_messages (1) ──→ (N) message_reactions

Database Features

  • Full-Text Search: PostgreSQL to_tsvector and to_tsquery for instant search
  • Cascade Deletes: Automatic cleanup of related records
  • Unique Constraints: Prevent duplicate memberships and votes
  • Timestamp Tracking: created_at and updated_at on all tables
  • JSONB Columns: Flexible storage for arrays and objects
  • Indexed Queries: Optimized for common access patterns

Security

  • Bcrypt Password Hashing: 10 salt rounds
  • JWT Authentication: 7-day expiration
  • Role-Based Permissions: 8 granular permission types
  • Parameterized Queries: SQL injection prevention
  • Email Verification: OTP-based verification

Visual Schema Diagram

┌──────────────────────┐         ┌──────────────────────┐         ┌──────────────────────┐
│       users          │         │    org_members       │         │     org_roles        │
├──────────────────────┤         ├──────────────────────┤         ├──────────────────────┤
│ PK user_id          │◄────────│ FK user_id          │────────►│ PK role_id          │
│    name             │         │ FK org_id           │         │    role_name        │
│    email            │         │    role             │         │    permissions...   │
│    password         │         └──────────────────────┘         └──────────────────────┘
│ FK org_id           │─────┐
└──────────────────────┘     │
                             ▼
                  ┌──────────────────────┐
                  │   organisations      │
                  ├──────────────────────┤
                  │ PK org_id           │
                  │    org_name         │
                  │    org_code         │
                  └──────────────────────┘
                             │
        ┌────────────────────┼────────────────────┐
        ▼                    ▼                    ▼
┌──────────────────────┐  ┌──────────────────────┐  ┌──────────────────────┐
│   org_channels       │  │     org_notes        │  │    org_notices       │
├──────────────────────┤  ├──────────────────────┤  ├──────────────────────┤
│ PK channel_id       │  │ PK note_id          │  │ PK notice_id        │
│ FK org_id           │  │ FK org_id           │  │ FK org_id           │
└──────────────────────┘  └──────────────────────┘  └──────────────────────┘
        │
        ├──────────────────────┬──────────────────────┐
        ▼                      ▼                      ▼
┌──────────────────────┐  ┌──────────────────────┐  ┌──────────────────────┐
│  channel_messages    │  │       polls          │  │  meeting_reports     │
├──────────────────────┤  ├──────────────────────┤  ├──────────────────────┤
│ PK message_id       │  │ PK poll_id          │  │ PK report_id        │
│ FK channel_id       │  │ FK channel_id       │  │    room_id          │
│ FK user_id          │  │    question         │  │    meeting_title    │
│    content          │  │    options (JSONB)  │  │    summary          │
└──────────────────────┘  └──────────────────────┘  └──────────────────────┘
        │                          │
        ▼                          ▼
┌──────────────────────┐  ┌──────────────────────┐
│  message_reactions   │  │    poll_votes        │
├──────────────────────┤  ├──────────────────────┤
│ FK message_id       │  │ FK poll_id          │
│ FK user_id          │  │ FK user_id          │
│    emoji            │  │    selected_options │
└──────────────────────┘  └──────────────────────┘

For detailed schema documentation including all columns, constraints, and relationships, see:

🏗 Architecture

System Architecture Diagram

┌─────────────────────────────────────────────────────────────────────┐
│                         CLIENT LAYER (React 19)                      │
├─────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐              │
│  │   Pages      │  │  Components  │  │   Context    │              │
│  │              │  │              │  │              │              │
│  │ • Landing    │  │ • TeamChat   │  │ • Auth       │              │
│  │ • Dashboard  │  │ • Messages   │  │ • Socket     │              │
│  │ • Meeting    │  │ • Polls      │  │ • Notif      │              │
│  │ • Calendar   │  │ • Voice      │  │ • Unread     │              │
│  └──────────────┘  └──────────────┘  └──────────────┘              │
│                                                                       │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │              Vite 7 + Tailwind CSS 4                         │  │
│  └──────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────┘
                                  │
                                  │ HTTPS/WSS
                                  ▼
┌─────────────────────────────────────────────────────────────────────┐
│                      API LAYER (Express.js)                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐              │
│  │   Routes     │  │ Controllers  │  │  Middleware  │              │
│  │              │  │              │  │              │              │
│  │ • Auth       │  │ • Messages   │  │ • JWT Auth   │              │
│  │ • Messages   │  │ • Meetings   │  │ • Multer     │              │
│  │ • Meetings   │  │ • Polls      │  │ • CORS       │              │
│  │ • Polls      │  │ • Reports    │  │ • Error      │              │
│  └──────────────┘  └──────────────┘  └──────────────┘              │
│                                                                       │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │              Socket.IO Server (WebSocket)                     │  │
│  │  • Real-time messaging  • Presence  • Typing indicators       │  │
│  └──────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────┘
                                  │
                    ┌─────────────┼─────────────┐
                    │             │             │
                    ▼             ▼             ▼
         ┌──────────────┐ ┌──────────┐ ┌──────────────┐
         │  PostgreSQL  │ │Cloudinary│ │   Nodemailer │
         │    (Neon)    │ │  Media   │ │    Email     │
         │              │ │ Storage  │ │   Service    │
         └──────────────┘ └──────────┘ └──────────────┘

Data Flow Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                          USER ACTIONS                                │
└─────────────────────────────────────────────────────────────────────┘
                                  │
                    ┌─────────────┼─────────────┐
                    │             │             │
                    ▼             ▼             ▼
         ┌──────────────┐ ┌──────────┐ ┌──────────────┐
         │   REST API   │ │ WebSocket│ │  File Upload │
         │   (Axios)    │ │(Socket.IO)│ │   (Multer)   │
         └──────────────┘ └──────────┘ └──────────────┘
                    │             │             │
                    └─────────────┼─────────────┘
                                  ▼
                    ┌──────────────────────────┐
                    │   Express Middleware     │
                    │  • JWT Verification      │
                    │  • Request Validation    │
                    │  • Error Handling        │
                    └──────────────────────────┘
                                  │
                    ┌─────────────┼─────────────┐
                    │             │             │
                    ▼             ▼             ▼
         ┌──────────────┐ ┌──────────┐ ┌──────────────┐
         │  Controller  │ │  Socket  │ │   Service    │
         │    Logic     │ │ Handlers │ │    Layer     │
         └──────────────┘ └──────────┘ └──────────────┘
                    │             │             │
                    └─────────────┼─────────────┘
                                  ▼
                    ┌──────────────────────────┐
                    │    Database Queries      │
                    │  • PostgreSQL (Neon)     │
                    │  • Optimized Queries     │
                    │  • Transaction Support   │
                    └──────────────────────────┘
                                  │
                    ┌─────────────┼─────────────┐
                    │             │             │
                    ▼             ▼             ▼
         ┌──────────────┐ ┌──────────┐ ┌──────────────┐
         │   Response   │ │  Socket  │ │  File URLs   │
         │     JSON     │ │  Emit    │ │ (Cloudinary) │
         └──────────────┘ └──────────┘ └──────────────┘
                    │             │             │
                    └─────────────┼─────────────┘
                                  ▼
                    ┌──────────────────────────┐
                    │    React State Update    │
                    │  • Context Providers     │
                    │  • Component Re-render   │
                    │  • UI Update             │
                    └──────────────────────────┘

User Flow Diagram

┌─────────────────────────────────────────────────────────────────────┐
│                      NEW USER JOURNEY                                │
└─────────────────────────────────────────────────────────────────────┘

    Landing Page
         │
         ▼
    Sign Up ──────► Email Verification (OTP)
         │                    │
         │                    ▼
         │              Verify Email
         │                    │
         └────────────────────┘
                    │
                    ▼
         Create/Join Organization
                    │
         ┌──────────┼──────────┐
         │          │          │
         ▼          ▼          ▼
    Dashboard   Channels   Calendar
         │          │          │
         └──────────┼──────────┘
                    │
         ┌──────────┼──────────┬──────────┐
         │          │          │          │
         ▼          ▼          ▼          ▼
    Team Chat  Meetings   Polls    Voice Msgs
         │          │          │          │
         └──────────┼──────────┴──────────┘
                    │
                    ▼
         Collaborate & Communicate

┌─────────────────────────────────────────────────────────────────────┐
│                    MESSAGING FLOW                                    │
└─────────────────────────────────────────────────────────────────────┘

    Select Channel/User
           │
           ▼
    ┌──────────────────┐
    │  Message Input   │
    └──────────────────┘
           │
    ┌──────┼──────┬──────┬──────┐
    │      │      │      │      │
    ▼      ▼      ▼      ▼      ▼
  Text   File  Voice  Poll  Reply
    │      │      │      │      │
    └──────┼──────┴──────┴──────┘
           │
           ▼
    Send via Socket.IO
           │
           ▼
    Server Processing
           │
    ┌──────┼──────┐
    │      │      │
    ▼      ▼      ▼
   Save   Emit  Notify
    │      │      │
    └──────┼──────┘
           │
           ▼
    Real-time Update
           │
    ┌──────┼──────┬──────┐
    │      │      │      │
    ▼      ▼      ▼      ▼
  React  Reply  Pin  Delete

🛠 Tech Stack

Frontend

  • React 19.1.1 - Latest React with concurrent features
  • Vite 7.1.2 - Lightning-fast build tool
  • Tailwind CSS 4.1.12 - Utility-first CSS framework
  • Socket.IO Client 4.8.1 - Real-time bidirectional communication
  • Axios 1.11.0 - HTTP client for API requests
  • React Router 7.8.1 - Client-side routing
  • FullCalendar 6.1.19 - Calendar and scheduling
  • Lucide React 0.541.0 - Beautiful icon library
  • React Hot Toast 2.6.0 - Elegant notifications
  • React DatePicker 8.7.0 - Date selection component
  • date-fns 4.1.0 - Modern date utility library

Backend

  • Node.js - JavaScript runtime
  • Express.js 4.19.2 - Web application framework
  • Socket.IO 4.8.1 - WebSocket server
  • PostgreSQL (Neon 1.0.1) - Serverless Postgres database
  • JWT 9.0.2 - JSON Web Token authentication
  • Bcrypt 6.0.0 - Password hashing
  • Multer 2.0.2 - File upload handling
  • Nodemailer 7.0.6 - Email service
  • Cloudinary 2.8.0 - Media storage and CDN
  • Cookie Parser 1.4.7 - Cookie parsing middleware
  • CORS 2.8.5 - Cross-origin resource sharing
  • Dotenv 17.2.1 - Environment variable management
  • Google Generative AI 0.24.1 - Gemini AI integration

Email Service (Microservice)

  • Express.js 4.18.2 - Lightweight web framework
  • Nodemailer 7.0.6 - Email sending service
  • CORS 2.8.5 - Cross-origin support
  • Dotenv 16.3.1 - Environment configuration

DevOps & Deployment

  • Vercel - Serverless deployment platform
  • GitHub - Version control
  • Environment Variables - Secure configuration management
  • Nodemon 3.1.10 - Development auto-reload

📦 Installation

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v18 or higher)
  • npm or yarn
  • PostgreSQL database (or Neon account)
  • Cloudinary account
  • Git

Clone the Repository

git clone https://github.com/yourusername/syncspace.git
cd syncspace

Install Dependencies

Client Setup

cd client
npm install

Server Setup

cd ../server
npm install

Email Service Setup

cd ../email-service
npm install

⚙️ Configuration

Environment Variables

Create .env files in each directory with the following variables:

Client .env (client/.env)

VITE_API_URL=http://localhost:3000
VITE_SOCKET_URL=http://localhost:3000
VITE_EMAIL_SERVICE_URL=http://localhost:3001

Server .env (server/.env)

# Server Configuration
PORT=3000
NODE_ENV=development

# Database (Neon PostgreSQL)
DATABASE_URL=postgresql://username:password@host/database?sslmode=require

# JWT Secret
JWT_SECRET=your_super_secret_jwt_key_here

# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Email Service
EMAIL_SERVICE_URL=http://localhost:3001

# AI Configuration
GEMINI_API_KEY=your_gemini_api_key_here

# CORS
CLIENT_URL=http://localhost:5173

# Production URLs (for deployment)
# CLIENT_URL=https://syncspace-client.vercel.app

Email Service .env (email-service/.env)

# Email Configuration
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_specific_password

# Server Configuration
PORT=3001

Database Setup

  1. Create a PostgreSQL database (recommended: Neon)
  2. Run the database schema (tables will be created automatically on first run)
  3. Update DATABASE_URL in server .env

Cloudinary Setup

  1. Sign up at Cloudinary
  2. Get your Cloud Name, API Key, and API Secret
  3. Update the Cloudinary variables in server .env

Email Setup

For Gmail:

  1. Enable 2-Factor Authentication
  2. Generate an App Password
  3. Use the App Password in EMAIL_PASS

🚀 Usage

Development Mode

Run all services concurrently:

Terminal 1 - Client

cd client
npm run dev

Client will run on http://localhost:5173

Terminal 2 - Server

cd server
npm start

Server will run on http://localhost:3000

Terminal 3 - Email Service

cd email-service
npm start

Email service will run on http://localhost:3001

Production Build

Build Client

cd client
npm run build

Start Server

cd server
npm start

Access the Application

Open your browser and navigate to:

  • Client: http://localhost:5173
  • API: http://localhost:3000
  • Email Service: http://localhost:3001
  • Health Check: http://localhost:3000/health

📚 API Documentation

Authentication Endpoints

Register User

POST /api/auth/register
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "securePassword123"
}

Login

POST /api/auth/login
Content-Type: application/json

{
  "email": "john@example.com",
  "password": "securePassword123"
}

Verify Email

POST /api/auth/verify-email
Content-Type: application/json

{
  "email": "john@example.com",
  "otp": "123456"
}

Forgot Password

POST /api/auth/forgot-password
Content-Type: application/json

{
  "email": "john@example.com"
}

Reset Password

POST /api/auth/reset-password
Content-Type: application/json

{
  "token": "reset_token",
  "newPassword": "newSecurePassword123"
}

Organization Endpoints

Create Organization

POST /api/organizations
Authorization: Bearer <token>
Content-Type: application/json

{
  "name": "My Team",
  "description": "Our awesome team workspace"
}

Get User Organizations

GET /api/organizations/user
Authorization: Bearer <token>

Channel Endpoints

Create Channel

POST /api/channels
Authorization: Bearer <token>
Content-Type: application/json

{
  "name": "general",
  "organizationId": 1,
  "isPrivate": false
}

Get Channel Messages

GET /api/channels/:channelId/messages
Authorization: Bearer <token>

Message Endpoints

Send Message

POST /api/messages
Authorization: Bearer <token>
Content-Type: application/json

{
  "channelId": 1,
  "content": "Hello team!",
  "type": "text"
}

React to Message

POST /api/messages/:messageId/reactions
Authorization: Bearer <token>
Content-Type: application/json

{
  "emoji": "👍"
}

Pin Message

POST /api/messages/:messageId/pin
Authorization: Bearer <token>

Poll Endpoints

Create Poll

POST /api/polls
Authorization: Bearer <token>
Content-Type: application/json

{
  "channelId": 1,
  "question": "What's for lunch?",
  "options": ["Pizza", "Burgers", "Salad"],
  "allowMultiple": false,
  "anonymous": false
}

Vote on Poll

POST /api/polls/:pollId/vote
Authorization: Bearer <token>
Content-Type: application/json

{
  "optionIndex": 0
}

Meeting Endpoints

Create Meeting Report

POST /api/meeting-reports
Authorization: Bearer <token>
Content-Type: application/json

{
  "organizationId": 1,
  "title": "Weekly Standup",
  "duration": 1800,
  "participants": ["user1@example.com", "user2@example.com"]
}

Get Meeting Reports

GET /api/meeting-reports?organizationId=1
Authorization: Bearer <token>

Search Endpoints

Smart Search (Universal)

GET /api/search?q=project
Authorization: Bearer <token>

Response includes all categories:

{
  "messages": [...],
  "directMessages": [...],
  "files": [...],
  "meetings": [...],
  "meetingReports": [...],
  "notes": [...],
  "channels": [...],
  "users": [...],
  "notices": [...],
  "events": [...]
}

Browse Category

GET /api/search/category/:category
Authorization: Bearer <token>

Supported categories:

  • messages - All channel messages
  • directMessages - All DM conversations
  • files - All uploaded files
  • meetings - All scheduled meetings
  • meetingReports - All meeting reports
  • notes - All notes
  • channels - All channels
  • users - All organization members
  • notices - All announcements
  • events - All calendar events

AI Endpoints

Chat with AI Assistant

POST /api/ai/chat
Authorization: Bearer <token>
Content-Type: application/json

{
  "message": "How do I create a meeting?",
  "conversationHistory": []
}

Generate Meeting Summary

POST /api/ai/generate-summary
Authorization: Bearer <token>
Content-Type: application/json

{
  "meetingData": {
    "title": "Team Standup",
    "participants": [...],
    "duration_minutes": 30,
    "messages": [...],
    "started_at": "2024-01-01T10:00:00Z",
    "ended_at": "2024-01-01T10:30:00Z"
  }
}

Event/Calendar Endpoints

Create Event

POST /api/events
Authorization: Bearer <token>
Content-Type: application/json

{
  "title": "Team Meeting",
  "start": "2024-01-15T10:00:00Z",
  "end": "2024-01-15T11:00:00Z",
  "organizationId": 1
}

Get Events

GET /api/events?organizationId=1
Authorization: Bearer <token>

Note Endpoints

Create Note

POST /api/notes
Authorization: Bearer <token>
Content-Type: application/json

{
  "title": "Meeting Notes",
  "content": "Discussion points...",
  "organizationId": 1
}

Get Notes

GET /api/notes?organizationId=1
Authorization: Bearer <token>

Notice Endpoints

Create Notice

POST /api/notices
Authorization: Bearer <token>
Content-Type: application/json

{
  "title": "Important Announcement",
  "content": "Please read...",
  "organizationId": 1
}

Get Notices

GET /api/notices?organizationId=1
Authorization: Bearer <token>

Notification Endpoints

Get Notifications

GET /api/notifications
Authorization: Bearer <token>

Mark as Read

PUT /api/notifications/:notificationId/read
Authorization: Bearer <token>

User Endpoints

Get User Profile

GET /api/users/profile
Authorization: Bearer <token>

Update User Status

PUT /api/users/status
Authorization: Bearer <token>
Content-Type: application/json

{
  "status": "online"
}

Direct Message Endpoints

Send Direct Message

POST /api/direct-messages
Authorization: Bearer <token>
Content-Type: application/json

{
  "recipientId": 2,
  "content": "Hello!",
  "type": "text"
}

Get Direct Messages

GET /api/direct-messages/:userId
Authorization: Bearer <token>

WebSocket Events

Connect to Organization

socket.emit('join', { userId, organizationId });

Send Message

socket.emit('sendMessage', { channelId, content, type });

Typing Indicator

socket.emit('typing', { channelId, isTyping: true });

User Status Update

socket.emit('statusUpdate', { status: 'online' });

Listen for Messages

socket.on('newMessage', (message) => {
  // Handle new message
});

Listen for Typing

socket.on('userTyping', ({ userId, channelId, isTyping }) => {
  // Show typing indicator
});

Listen for User Status

socket.on('userStatusChanged', ({ userId, status }) => {
  // Update user status
});

Listen for Reactions

socket.on('messageReaction', ({ messageId, emoji, userId }) => {
  // Update message reactions
});

Listen for Polls

socket.on('newPoll', (poll) => {
  // Display new poll
});

socket.on('pollVote', ({ pollId, optionIndex, userId }) => {
  // Update poll results
});

📁 Project Structure

syncspace/
├── client/                      # React frontend
│   ├── public/                  # Static assets
│   │   └── icon.png            # App icon
│   ├── src/
│   │   ├── assets/             # Images, fonts, etc.
│   │   ├── components/         # React components (65+ components)
│   │   │   ├── AIAssistant.jsx          # AI-powered chat assistant
│   │   │   ├── AnimatedButton.jsx       # Animated UI button
│   │   │   ├── Calendar.jsx             # Event calendar
│   │   │   ├── ChannelPage.jsx          # Channel view
│   │   │   ├── ConfirmationModal.jsx    # Confirmation dialogs
│   │   │   ├── ConnectionStatus.jsx     # Network status indicator
│   │   │   ├── CreateOrgModal.jsx       # Organization creation
│   │   │   ├── CustomCursor.jsx         # Custom cursor effect
│   │   │   ├── Dashboard.jsx            # Main dashboard
│   │   │   ├── EditChannel.jsx          # Channel editing
│   │   │   ├── EmojiPicker.jsx          # Emoji selection
│   │   │   ├── ErrorBoundary.jsx        # Error handling
│   │   │   ├── EventInputForm.jsx       # Event creation form
│   │   │   ├── EventModal.jsx           # Event details modal
│   │   │   ├── FAQList.jsx              # FAQ section
│   │   │   ├── FeatureHub.jsx           # Feature quick access
│   │   │   ├── FileUpload.jsx           # File upload component
│   │   │   ├── FocusMode.jsx            # Pomodoro timer
│   │   │   ├── Footer.jsx               # Page footer
│   │   │   ├── InviteModal.jsx          # Member invitation
│   │   │   ├── JoinedOrgDash.jsx        # Org dashboard view
│   │   │   ├── JoinOrgModal.jsx         # Join organization
│   │   │   ├── KeyboardShortcuts.jsx    # Shortcuts panel
│   │   │   ├── LandingComparison.jsx    # Feature comparison
│   │   │   ├── LandingFeatures.jsx      # Features showcase
│   │   │   ├── LandingHero.jsx          # Landing hero section
│   │   │   ├── LandingNav.jsx           # Landing navigation
│   │   │   ├── LandingPricing.jsx       # Pricing section
│   │   │   ├── LandingStats.jsx         # Statistics display
│   │   │   ├── LandingTestimonials.jsx  # User testimonials
│   │   │   ├── MeetingChat.jsx          # In-meeting chat
│   │   │   ├── MeetingModal.jsx         # Meeting creation
│   │   │   ├── MeetingReports.jsx       # Meeting analytics
│   │   │   ├── MeetingReportsOverview.jsx # Reports overview
│   │   │   ├── MeetingRoom.jsx          # Video conference room
│   │   │   ├── MeetingSettings.jsx      # Meeting preferences
│   │   │   ├── MentionsList.jsx         # User mentions
│   │   │   ├── MessageReactions.jsx     # Message reactions
│   │   │   ├── Messages.jsx             # Message display
│   │   │   ├── NoteEditModal.jsx        # Note editing
│   │   │   ├── NoteInputModal.jsx       # Note creation
│   │   │   ├── NoteViewModal.jsx        # Note viewing
│   │   │   ├── NoticeBoard.jsx          # Announcements board
│   │   │   ├── NoticeModal.jsx          # Notice creation
│   │   │   ├── NoticeViewModal.jsx      # Notice viewing
│   │   │   ├── Notifications.jsx        # Notification center
│   │   │   ├── OnlineCounter.jsx        # Online users count
│   │   │   ├── OnlineStatus.jsx         # User status indicator
│   │   │   ├── OnlineUsersList.jsx      # Online users list
│   │   │   ├── OrgSettingsModal.jsx     # Org settings
│   │   │   ├── ParticleSystem.jsx       # Particle effects
│   │   │   ├── PinnedMessages.jsx       # Pinned messages view
│   │   │   ├── PollDisplay.jsx          # Poll results display
│   │   │   ├── ProtectedRoute.jsx       # Auth route guard
│   │   │   ├── PublicRoute.jsx          # Public route guard
│   │   │   ├── QuickPoll.jsx            # Poll creation
│   │   │   ├── ScrollProgress.jsx       # Scroll indicator
│   │   │   ├── Settings.jsx             # User settings
│   │   │   ├── Sidebar.jsx              # Navigation sidebar
│   │   │   ├── SmartSearch.jsx          # Advanced search
│   │   │   ├── StatusSelector.jsx       # Status selection
│   │   │   ├── TeamChat.jsx             # Team messaging
│   │   │   ├── TypingIndicator.jsx      # Typing status
│   │   │   └── VoiceRecorder.jsx        # Voice messages
│   │   ├── context/            # React Context providers
│   │   │   ├── AuthContext.jsx
│   │   │   ├── NotificationContext.jsx
│   │   │   ├── SocketContext.jsx
│   │   │   ├── ToastContext.jsx
│   │   │   └── UnreadContext.jsx
│   │   ├── hooks/              # Custom React hooks
│   │   │   └── useKeyboardShortcuts.js
│   │   ├── pages/              # Page components
│   │   │   ├── ForgotPassword.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── Landing.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── MeetingPrep.jsx
│   │   │   ├── MeetingReportsPage.jsx
│   │   │   ├── ResetPassword.jsx
│   │   │   ├── Signup.jsx
│   │   │   └── VerifyMail.jsx
│   │   ├── styles/             # CSS modules
│   │   ├── utils/              # Utility functions
│   │   │   ├── meetingDebug.js
│   │   │   └── meetingReports.js
│   │   ├── App.jsx             # Main App component
│   │   ├── index.css           # Global styles
│   │   └── main.jsx            # Entry point
│   ├── .env                    # Environment variables
│   ├── index.html              # HTML template
│   ├── package.json            # Dependencies
│   ├── vite.config.js          # Vite configuration
│   └── vercel.json             # Vercel deployment config
│
├── server/                      # Express backend
│   ├── src/
│   │   ├── configs/            # Configuration files
│   │   │   └── socket.js       # Socket.IO setup
│   │   ├── controllers/        # Route controllers
│   │   │   ├── authControllers.js
│   │   │   ├── directMessageControllers.js
│   │   │   ├── eventControllers.js
│   │   │   ├── meetingChatControllers.js
│   │   │   ├── meetingControllers.js
│   │   │   ├── meetingReportControllers.js
│   │   │   ├── messageControllers.js
│   │   │   ├── noteController.js
│   │   │   ├── noticeControllers.js
│   │   │   ├── notificationControllers.js
│   │   │   ├── orgControllers.js
│   │   │   ├── pollControllers.js
│   │   │   └── searchControllers.js
│   │   ├── database/           # Database models & queries
│   │   ├── middleware/         # Express middleware
│   │   ├── routes/             # API routes
│   │   │   ├── authRoutes.js
│   │   │   ├── debugRoutes.js
│   │   │   ├── directMessageRoutes.js
│   │   │   ├── eventRoutes.js
│   │   │   ├── meetingChatRoutes.js
│   │   │   ├── meetingReportRoutes.js
│   │   │   ├── meetingRoutes.js
│   │   │   ├── messageRoutes.js
│   │   │   ├── noteRoutes.js
│   │   │   ├── noticeRoutes.js
│   │   │   ├── notificationRoutes.js
│   │   │   ├── orgRoutes.js
│   │   │   ├── pollRoutes.js
│   │   │   ├── searchRoutes.js
│   │   │   └── userRoutes.js
│   │   ├── templates/          # Email templates
│   │   ├── utils/              # Utility functions
│   │   └── server.js           # Server entry point
│   ├── .env                    # Environment variables
│   ├── package.json            # Dependencies
│   └── vercel.json             # Vercel deployment config
│
├── email-service/               # Email microservice
│   ├── src/
│   │   └── index.js            # Email service logic
│   ├── .env                    # Environment variables
│   ├── package.json            # Dependencies
│   └── vercel.json             # Vercel deployment config
│
├── .gitignore                   # Git ignore rules
└── README.md                    # This file

🤝 Contributing

I welcome contributions! Here's how you can help:

Getting Started

  1. Fork the repository
  2. Clone your fork 
    git clone https://github.com/yourusername/syncspace.git
  3. Create a feature branch 
    git checkout -b feature/amazing-feature
  4. Make your changes
  5. Commit your changes 
    git commit -m "Add amazing feature"
  6. Push to your branch 
    git push origin feature/amazing-feature
  7. Open a Pull Request

Contribution Guidelines

  • Follow the existing code style and conventions
  • Write clear, descriptive commit messages
  • Add comments for complex logic
  • Update documentation as needed
  • Test your changes thoroughly
  • Ensure all existing tests pass
  • Add new tests for new features

Code Style

  • JavaScript/React: Use ES6+ syntax, functional components with hooks
  • CSS: Use Tailwind utility classes, avoid custom CSS when possible
  • Naming: Use camelCase for variables/functions, PascalCase for components
  • Files: One component per file, named after the component

Reporting Issues

Found a bug or have a feature request? Please open an issue with:

  • Clear description of the problem/feature
  • Steps to reproduce (for bugs)
  • Expected vs actual behavior
  • Screenshots (if applicable)
  • Environment details (browser, OS, etc.)

🔧 Troubleshooting

Common Issues

Port Already in Use

# Kill process on port 3000 (server)
lsof -ti:3000 | xargs kill -9

# Kill process on port 5173 (client)
lsof -ti:5173 | xargs kill -9

# Kill process on port 3001 (email service)
lsof -ti:3001 | xargs kill -9

Database Connection Issues

  • Verify DATABASE_URL is correct in server .env
  • Check Neon database is active and accessible
  • Ensure SSL mode is enabled: ?sslmode=require

CORS Errors

  • Verify CLIENT_URL matches your frontend URL
  • Check allowed origins in server/src/server.js
  • Clear browser cache and cookies

Socket.IO Connection Failed

  • Ensure VITE_SOCKET_URL matches server URL
  • Check firewall settings
  • Verify WebSocket support in your environment

Email Not Sending

  • Verify email credentials in email-service/.env
  • For Gmail, use App Password (not regular password)
  • Check EMAIL_SERVICE_URL in server .env

File Upload Issues

  • Verify Cloudinary credentials
  • Check file size limits (default: 10MB)
  • Ensure proper MIME types

Development Tips

  • Use npm run start:dev for auto-reload with nodemon
  • Check browser console for client-side errors
  • Monitor server logs for backend issues
  • Use /health endpoint to verify server status
  • Clear localStorage if experiencing auth issues

👥 Authors

Built with ❤️ by the Ishan Roy

⭐ Star this repo if you find it helpful!

Made with 💙 by developers, for developers

About

syncspace-client.vercel.app

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages