Skip to content

ArjunDivraniya/ODOOxNMIT

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

35 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SynergSphere πŸš€

Collaborative Project Management & Team Coordination Platform

Winner Project - ODOOxNMIT Hackathon 2024
Empowering teams to collaborate seamlessly with real-time task management, intelligent notifications, and integrated communication.


πŸ”— Quick Links

Live Demo Video Walkthrough API Documentation GitHub Repo


πŸ“Œ Table of Contents


🎯 About the Hackathon

Hackathon: ODOOxNMIT 2024
Theme: Building Collaborative Solutions for Modern Teams
Duration: 48 Hours
Team Size: Solo/Team Project
Achievement: Winner/Finalist πŸ†

Problem Statement:
Design and develop a comprehensive project management system that enables teams to collaborate effectively with features like task management, real-time notifications, team communication, and secure authentication.


🌟 Project Overview

SynergSphere is a full-stack project management platform designed to streamline team collaboration and project tracking. It combines the power of real-time updates, intuitive task management (Kanban-style), and secure role-based access control to help teams work more efficiently.

What makes this project unique?

  • πŸ”„ Real-time collaboration using WebSocket technology (Socket.io)
  • 🎯 Kanban-style task management with drag-and-drop functionality
  • πŸ” Advanced security with JWT authentication and role-based access
  • πŸ“± Responsive design that works seamlessly across all devices
  • πŸ”” Smart notifications for project updates, deadlines, and team activities

🎯 Problem Statement

The Challenge

Modern teams face several collaboration challenges:

  • Scattered communication across multiple platforms
  • Difficulty tracking task progress and team responsibilities
  • Lack of real-time updates leading to miscommunication
  • No centralized project visibility for stakeholders
  • Security concerns with team data and access control

Our Solution

SynergSphere addresses these issues by providing:

  1. Unified Platform - All project management needs in one place
  2. Real-time Synchronization - Instant updates across all team members
  3. Visual Task Management - Clear Kanban boards for easy tracking
  4. Smart Notifications - Stay informed without being overwhelmed
  5. Enterprise-grade Security - Role-based access and secure authentication

Target Users:

  • πŸ‘¨β€πŸ’Ό Project Managers and Team Leads
  • πŸ‘©β€πŸ’» Software Development Teams
  • 🎨 Creative Agencies and Design Teams
  • 🏒 Small to Medium Businesses
  • πŸŽ“ Educational Project Groups

✨ Core Features

πŸ‘€ User Management

  • βœ… Secure user registration and authentication with JWT
  • βœ… Role-based access control (Admin & User roles)
  • βœ… User profile management with customization options
  • βœ… Password encryption using bcrypt

πŸ“Š Project Management

  • βœ… Create, read, update, and delete projects (CRUD operations)
  • βœ… Unique project passkeys for secure team joining
  • βœ… Team member invitation via email
  • βœ… Project timeline tracking (start date & end date)
  • βœ… Project-specific team management

πŸ“ Task Management (Kanban Board)

  • βœ… Visual Kanban board with drag-and-drop functionality
  • βœ… Task status tracking: Todo β†’ In Progress β†’ Done
  • βœ… Priority levels: Low, Medium, High
  • βœ… Task assignment to team members
  • βœ… Due date tracking and deadline reminders
  • βœ… Task tags and categorization
  • βœ… "My Tasks" view for personal task management

πŸ’¬ Real-time Communication

  • βœ… Project-specific chat rooms using Socket.io
  • βœ… Real-time message broadcasting
  • βœ… Message history and persistence
  • βœ… User presence indicators

πŸ”” Smart Notifications

  • βœ… Real-time notification system for:
    • Project invitations
    • Task assignments
    • Task completions
    • Project updates
    • Deadline reminders
    • Message mentions
  • βœ… Unread notification counter
  • βœ… Mark as read/unread functionality
  • βœ… Bulk notification management

🎨 User Interface

  • βœ… Modern, responsive design using Tailwind CSS
  • βœ… Dark/Light theme toggle
  • βœ… Radix UI components for accessibility
  • βœ… Smooth animations with Framer Motion
  • βœ… Mobile-first responsive layout

πŸ›  Tech Stack

Frontend

React TypeScript Vite TailwindCSS

  • Framework: React 18 with TypeScript
  • Build Tool: Vite
  • Styling: Tailwind CSS + shadcn/ui components
  • UI Components: Radix UI primitives
  • State Management: React Context API + TanStack Query
  • Routing: React Router v6
  • Real-time: Socket.io Client
  • Animations: Framer Motion
  • Drag & Drop: @dnd-kit
  • HTTP Client: Axios

Backend

Node.js Express MongoDB Socket.io

  • Runtime: Node.js (v18+)
  • Framework: Express.js v5
  • Database: MongoDB with Mongoose ODM
  • Authentication: JWT (jsonwebtoken) + bcryptjs
  • Real-time: Socket.io v4
  • API Architecture: RESTful API
  • Security: CORS, helmet, express-validator

DevOps & Tools

  • Version Control: Git & GitHub
  • API Testing: Postman
  • Package Manager: npm/pnpm
  • Development: Nodemon (hot reload)
  • Environment: dotenv

πŸ— System Architecture

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚                     CLIENT (Browser)                         β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”     β”‚
β”‚  β”‚   React UI   β”‚  β”‚  Socket.io   β”‚  β”‚    Axios     β”‚     β”‚
β”‚  β”‚  Components  β”‚  β”‚    Client    β”‚  β”‚  HTTP Client β”‚     β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”˜     β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
          β”‚                  β”‚                  β”‚
          β”‚ WebSocket        β”‚ Real-time Events β”‚ HTTP/REST
          β”‚                  β”‚                  β”‚
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚         β–Ό                  β–Ό                  β–Ό             β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”       β”‚
β”‚  β”‚           EXPRESS.JS SERVER (Node.js)           β”‚       β”‚
β”‚  β”‚                                                  β”‚       β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”           β”‚       β”‚
β”‚  β”‚  β”‚  Socket.io   β”‚  β”‚     CORS     β”‚           β”‚       β”‚
β”‚  β”‚  β”‚    Server    β”‚  β”‚  Middleware  β”‚           β”‚       β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜           β”‚       β”‚
β”‚  β”‚                                                  β”‚       β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚       β”‚
β”‚  β”‚  β”‚         MIDDLEWARE LAYER                   β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ JWT Authentication (authMiddleware)    β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ Role Authorization (restrictTo)        β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ Request Validation                     β”‚ β”‚       β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚       β”‚
β”‚  β”‚                                                  β”‚       β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚       β”‚
β”‚  β”‚  β”‚              API ROUTES                   β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  /api/auth       - Authentication         β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  /api/projects   - Project Management     β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  /api/tasks      - Task Operations        β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  /api/messages   - Chat Messaging         β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  /api/notifications - Notifications       β”‚ β”‚       β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚       β”‚
β”‚  β”‚                                                  β”‚       β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚       β”‚
β”‚  β”‚  β”‚            CONTROLLERS                    β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ authController                         β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ projectController                      β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ taskController                         β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ messageController                      β”‚ β”‚       β”‚
β”‚  β”‚  β”‚  β€’ notificationController                 β”‚ β”‚       β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚       β”‚
β”‚  β”‚                       β”‚                         β”‚       β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜       β”‚
β”‚                          β”‚                                  β”‚
β”‚                          β–Ό                                  β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”       β”‚
β”‚  β”‚            MONGOOSE ODM LAYER                   β”‚       β”‚
β”‚  β”‚                                                  β”‚       β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”       β”‚       β”‚
β”‚  β”‚  β”‚   User   β”‚ β”‚ Project  β”‚ β”‚   Task   β”‚       β”‚       β”‚
β”‚  β”‚  β”‚  Model   β”‚ β”‚  Model   β”‚ β”‚  Model   β”‚       β”‚       β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜       β”‚       β”‚
β”‚  β”‚                                                  β”‚       β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”                β”‚       β”‚
β”‚  β”‚  β”‚ Message  β”‚ β”‚ Notification β”‚                β”‚       β”‚
β”‚  β”‚  β”‚  Model   β”‚ β”‚    Model     β”‚                β”‚       β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜                β”‚       β”‚
β”‚  └─────────────────────┬───────────────────────────       β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                         β”‚
                         β–Ό
           β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
           β”‚   MONGODB DATABASE       β”‚
           β”‚                          β”‚
           β”‚  Collections:            β”‚
           β”‚  β€’ users                 β”‚
           β”‚  β€’ projects              β”‚
           β”‚  β€’ tasks                 β”‚
           β”‚  β€’ messages              β”‚
           β”‚  β€’ notifications         β”‚
           β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Data Flow Example: Creating a Task

  1. User clicks "Create Task" in the React UI
  2. Frontend sends POST request to /api/tasks with JWT token
  3. Express middleware validates JWT and extracts user info
  4. taskController.createTask processes the request
  5. Mongoose creates a new Task document in MongoDB
  6. Socket.io broadcasts task creation event to all project members
  7. Backend sends success response to the client
  8. Frontend updates UI and all connected clients receive real-time update

πŸ“š API Documentation

Base URL

http://localhost:5001/api

Authentication Endpoints

Register User

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

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "securePassword123",
  "role": "user"  // or "admin"
}

Login

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

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

Response:
{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "_id": "...",
    "name": "John Doe",
    "email": "john@example.com",
    "role": "user"
  }
}

Get User Profile

GET /api/auth/profile
Authorization: Bearer <your_jwt_token>

Update Profile

PUT /api/auth/profile
Authorization: Bearer <your_jwt_token>
Content-Type: application/json

{
  "name": "John Updated",
  "email": "newemail@example.com"
}

Project Endpoints

Create Project (Admin Only)

POST /api/projects
Authorization: Bearer <admin_token>
Content-Type: application/json

{
  "name": "E-commerce Website",
  "description": "Building a full-featured online store",
  "startDate": "2024-01-01",
  "endDate": "2024-06-30",
  "teamMemberEmails": ["member1@example.com", "member2@example.com"]
}

Response:
{
  "_id": "project_id",
  "name": "E-commerce Website",
  "passkey": "ABC123XYZ",  // Save this for team members to join
  ...
}

Get All Projects

GET /api/projects
Authorization: Bearer <token>

Get Project by ID

GET /api/projects/:projectId
Authorization: Bearer <token>

Update Project

PUT /api/projects/:projectId
Authorization: Bearer <admin_token>
Content-Type: application/json

{
  "name": "Updated Project Name",
  "description": "Updated description"
}

Delete Project

DELETE /api/projects/:projectId
Authorization: Bearer <admin_token>

Join Project with Passkey

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

{
  "passkey": "ABC123XYZ"
}

Remove Team Member

DELETE /api/projects/:projectId/members/:userId
Authorization: Bearer <admin_token>

Task Endpoints

Create Task

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

{
  "title": "Implement User Authentication",
  "description": "Add JWT-based authentication system",
  "status": "todo",  // "todo" | "in-progress" | "done"
  "priority": "high",  // "low" | "medium" | "high"
  "project": "project_id",
  "assignedTo": "user_id",  // optional
  "dueDate": "2024-02-15",
  "tags": ["backend", "security"]
}

Get Tasks for a Project

GET /api/tasks/project/:projectId
Authorization: Bearer <token>

Get My Tasks

GET /api/tasks/my-tasks
Authorization: Bearer <token>

Update Task

PUT /api/tasks/:taskId
Authorization: Bearer <token>
Content-Type: application/json

{
  "status": "in-progress",
  "priority": "medium"
}

Delete Task

DELETE /api/tasks/:taskId
Authorization: Bearer <token>

Message Endpoints

Send Message

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

{
  "projectId": "project_id",
  "content": "Hello team! Let's discuss the timeline."
}

Get Project Messages

GET /api/messages/:projectId
Authorization: Bearer <token>

Notification Endpoints

Get All Notifications

GET /api/notifications
Authorization: Bearer <token>

Get Unread Count

GET /api/notifications/unread-count
Authorization: Bearer <token>

Mark as Read

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

Mark All as Read

PUT /api/notifications/read-all
Authorization: Bearer <token>

Delete Notification

DELETE /api/notifications/:notificationId
Authorization: Bearer <token>

WebSocket Events

Connect to Socket

import io from 'socket.io-client';

const socket = io('http://localhost:5001');

Join Project Room

socket.emit('joinProject', projectId);

Real-time Events Received

// New task created
socket.on('taskCreated', (task) => {
  console.log('New task:', task);
});

// Task updated
socket.on('taskUpdated', (task) => {
  console.log('Task updated:', task);
});

// New message
socket.on('newMessage', (message) => {
  console.log('New message:', message);
});

// New notification
socket.on('newNotification', (notification) => {
  console.log('Notification:', notification);
});

πŸ“¦ Complete API Collection: View Postman Documentation


πŸš€ Installation & Setup

Prerequisites

  • Node.js (v18.0.0 or higher) - Download
  • MongoDB (v6.0 or higher) - Download or use MongoDB Atlas
  • npm or pnpm package manager
  • Git for version control

Step 1: Clone the Repository

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

Step 2: Backend Setup

Install Dependencies

cd Backend
npm install

Configure Environment Variables

Create a .env file in the Backend directory:

# Server Configuration
PORT=5001
NODE_ENV=development

# MongoDB Configuration
MONGODB_URI=mongodb://localhost:27017/synergsphere
# OR for MongoDB Atlas:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/synergsphere

# JWT Configuration
JWT_SECRET=your_super_secret_jwt_key_here_change_in_production
JWT_EXPIRES_IN=7d

# CORS Configuration (Frontend URL)
FRONTEND_URL=http://localhost:5173

Start MongoDB (if running locally)

# Windows
mongod

# macOS/Linux
sudo systemctl start mongod

Run Backend Server

# Development mode (with hot reload)
npm run dev

# Production mode
npm start

Server will run on: http://localhost:5001


Step 3: Frontend Setup

Install Dependencies

cd synergsphere-frontend
npm install
# OR
pnpm install

Configure Environment Variables

Create a .env file in the synergsphere-frontend directory:

VITE_API_URL=http://localhost:5001/api
VITE_SOCKET_URL=http://localhost:5001

Run Frontend Development Server

npm run dev
# OR
pnpm dev

Frontend will run on: http://localhost:5173


Step 4: Verify Installation

  1. Check Backend:

    • Visit http://localhost:5001 - You should see a welcome message
    • Test API endpoint: http://localhost:5001/api/auth/login
  2. Check Frontend:

    • Visit http://localhost:5173
    • You should see the login page
  3. Create Test User:

    # Use Postman or curl
    POST http://localhost:5001/api/auth/register
    
    {
      "name": "Test Admin",
      "email": "admin@test.com",
      "password": "admin123",
      "role": "admin"
    }

Build for Production

Backend

cd Backend
npm start

Frontend

cd synergsphere-frontend
npm run build

# Preview production build
npm run preview

The production build will be in the dist folder.


πŸ“ Project Structure

ODOOxNMIT/
β”‚
β”œβ”€β”€ Backend/                           # Node.js + Express Backend
β”‚   β”œβ”€β”€ config/
β”‚   β”‚   └── db.js                     # MongoDB connection configuration
β”‚   β”‚
β”‚   β”œβ”€β”€ controllers/                   # Business logic handlers
β”‚   β”‚   β”œβ”€β”€ authController.js         # Authentication logic
β”‚   β”‚   β”œβ”€β”€ projectController.js      # Project CRUD operations
β”‚   β”‚   β”œβ”€β”€ taskController.js         # Task management logic
β”‚   β”‚   β”œβ”€β”€ messageController.js      # Chat message handling
β”‚   β”‚   └── notificationController.js # Notification management
β”‚   β”‚
β”‚   β”œβ”€β”€ middleware/
β”‚   β”‚   └── authMiddleware.js         # JWT verification & authorization
β”‚   β”‚
β”‚   β”œβ”€β”€ models/                        # Mongoose schemas
β”‚   β”‚   β”œβ”€β”€ User.js                   # User model (name, email, password, role)
β”‚   β”‚   β”œβ”€β”€ Project.js                # Project model (name, desc, dates, team)
β”‚   β”‚   β”œβ”€β”€ Task.js                   # Task model (title, status, priority)
β”‚   β”‚   β”œβ”€β”€ Message.js                # Message model (content, sender, project)
β”‚   β”‚   └── Notification.js           # Notification model (type, user, data)
β”‚   β”‚
β”‚   β”œβ”€β”€ routes/                        # API endpoints
β”‚   β”‚   β”œβ”€β”€ authRoutes.js             # /api/auth/*
β”‚   β”‚   β”œβ”€β”€ projectRoutes.js          # /api/projects/*
β”‚   β”‚   β”œβ”€β”€ taskRoutes.js             # /api/tasks/*
β”‚   β”‚   β”œβ”€β”€ messageRoutes.js          # /api/messages/*
β”‚   β”‚   └── notificationRoutes.js     # /api/notifications/*
β”‚   β”‚
β”‚   β”œβ”€β”€ .env                          # Environment variables (gitignored)
β”‚   β”œβ”€β”€ server.js                     # Express app + Socket.io setup
β”‚   β”œβ”€β”€ package.json                  # Backend dependencies
β”‚   β”œβ”€β”€ README.md                     # Backend documentation
β”‚   └── API_TESTING_GUIDE.md          # API testing examples
β”‚
β”œβ”€β”€ synergsphere-frontend/            # React + TypeScript Frontend
β”‚   β”œβ”€β”€ public/
β”‚   β”‚   └── robots.txt               # SEO configuration
β”‚   β”‚
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ components/              # Reusable React components
β”‚   β”‚   β”‚   β”œβ”€β”€ ui/                  # shadcn/ui components
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ button.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ card.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ dialog.tsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ input.tsx
β”‚   β”‚   β”‚   β”‚   └── ...              # 40+ UI components
β”‚   β”‚   β”‚   β”‚
β”‚   β”‚   β”‚   β”œβ”€β”€ AppHeader.tsx        # Main navigation header
β”‚   β”‚   β”‚   β”œβ”€β”€ Sidebar.tsx          # Dashboard sidebar
β”‚   β”‚   β”‚   β”œβ”€β”€ KanbanBoard.tsx      # Drag-drop task board
β”‚   β”‚   β”‚   β”œβ”€β”€ TaskManagement.tsx   # Task CRUD interface
β”‚   β”‚   β”‚   β”œβ”€β”€ ProjectManagement.tsx # Project management UI
β”‚   β”‚   β”‚   β”œβ”€β”€ ProjectChat.tsx      # Real-time chat component
β”‚   β”‚   β”‚   β”œβ”€β”€ NotificationsCenter.tsx # Notification panel
β”‚   β”‚   β”‚   β”œβ”€β”€ ProfileModal.tsx     # User profile editor
β”‚   β”‚   β”‚   └── theme-provider.tsx   # Dark/light theme provider
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ contexts/
β”‚   β”‚   β”‚   └── auth-context.tsx     # Global authentication state
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ hooks/
β”‚   β”‚   β”‚   β”œβ”€β”€ use-auth.ts          # Custom auth hook
β”‚   β”‚   β”‚   β”œβ”€β”€ use-mobile.tsx       # Responsive hook
β”‚   β”‚   β”‚   └── use-toast.ts         # Toast notification hook
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ lib/
β”‚   β”‚   β”‚   β”œβ”€β”€ utils.ts             # Utility functions (cn, etc.)
β”‚   β”‚   β”‚   β”œβ”€β”€ mockData.ts          # Sample data for development
β”‚   β”‚   β”‚   └── userMockData.ts      # Mock user data
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ pages/
β”‚   β”‚   β”‚   β”œβ”€β”€ auth/
β”‚   β”‚   β”‚   β”‚   └── AuthPage.tsx     # Login/Register page
β”‚   β”‚   β”‚   β”œβ”€β”€ AdminDashboard.tsx   # Admin view
β”‚   β”‚   β”‚   β”œβ”€β”€ UserDashboard.tsx    # User view
β”‚   β”‚   β”‚   └── NotFound.tsx         # 404 page
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ services/
β”‚   β”‚   β”‚   └── api.ts               # Axios API client + endpoints
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ App.tsx                  # Main app component + routing
β”‚   β”‚   β”œβ”€β”€ main.tsx                 # React entry point
β”‚   β”‚   └── index.css                # Global styles + Tailwind
β”‚   β”‚
β”‚   β”œβ”€β”€ .env                          # Frontend env variables
β”‚   β”œβ”€β”€ package.json                  # Frontend dependencies
β”‚   β”œβ”€β”€ vite.config.ts               # Vite configuration
β”‚   β”œβ”€β”€ tailwind.config.ts           # Tailwind CSS config
β”‚   β”œβ”€β”€ tsconfig.json                # TypeScript config
β”‚   └── components.json              # shadcn/ui config
β”‚
β”œβ”€β”€ BACKEND_COMPLETION_SUMMARY.md     # Backend implementation summary
β”œβ”€β”€ README.md                          # This file (main documentation)
└── .gitignore                        # Git ignore rules

Key Directory Explanations

Backend Structure

  • config/ - Database and app configuration files
  • controllers/ - Business logic separated from routes
  • middleware/ - Request processing middleware (auth, validation)
  • models/ - MongoDB schemas using Mongoose
  • routes/ - API endpoint definitions

Frontend Structure

  • components/ui/ - Reusable UI primitives from shadcn/ui
  • components/ - Feature-specific components
  • contexts/ - React Context for global state
  • hooks/ - Custom React hooks for reusable logic
  • pages/ - Route-level components
  • services/ - API communication layer

πŸ” Environment Variables

Backend Environment Variables

Variable Description Example
PORT Server port number 5001
NODE_ENV Environment mode development or production
MONGODB_URI MongoDB connection string mongodb://localhost:27017/synergsphere
JWT_SECRET Secret key for JWT signing your_super_secret_key_min_32_chars
JWT_EXPIRES_IN JWT token expiration 7d (7 days)
FRONTEND_URL Frontend URL for CORS http://localhost:5173

Frontend Environment Variables

Variable Description Example
VITE_API_URL Backend API base URL http://localhost:5001/api
VITE_SOCKET_URL WebSocket server URL http://localhost:5001

Security Notes:

  • Never commit .env files to version control
  • Use strong, random JWT secrets in production (min 32 characters)
  • For production, use environment variables from hosting platform
  • Consider using services like AWS Secrets Manager or Vault for sensitive data

πŸ“– Usage Guide

For Admins

1. Register as Admin

POST /api/auth/register
{
  "name": "Admin User",
  "email": "admin@company.com",
  "password": "securePassword",
  "role": "admin"
}

2. Create a New Project

  • Login to admin dashboard
  • Click "Create Project" button
  • Fill in project details (name, description, dates)
  • Add team member emails (optional)
  • Save the generated passkey - team members need this to join

3. Manage Projects

  • View all projects in the dashboard
  • Edit project details
  • Add/remove team members
  • Monitor project progress
  • Delete projects when complete

4. Create Tasks

  • Open a project
  • Click "Create Task"
  • Set title, description, priority, status
  • Assign to team members
  • Set due dates and tags

For Team Members

1. Register as User

POST /api/auth/register
{
  "name": "Team Member",
  "email": "member@company.com",
  "password": "password123",
  "role": "user"
}

2. Join a Project

  • Login to user dashboard
  • Click "Join Project"
  • Enter the passkey provided by admin
  • Click "Join"

3. Manage Your Tasks

  • View all your assigned tasks in "My Tasks"
  • Drag tasks across Kanban columns (Todo β†’ In Progress β†’ Done)
  • Update task details
  • Mark tasks as complete

4. Collaborate with Team

  • Open project chat
  • Send messages to team members
  • Receive real-time notifications
  • Respond to task assignments

Real-time Features

Chat

  1. Navigate to a project
  2. Open the chat panel
  3. Type your message
  4. All team members see messages instantly (via Socket.io)

Notifications

  • Automatic notifications for:
    • New project invitations
    • Task assignments
    • Task status changes
    • Approaching deadlines
    • New chat messages
  • Click on notification to navigate to relevant page
  • Mark as read or delete notifications

Kanban Board

  • Drag and drop tasks between columns
  • Changes sync instantly across all users
  • Filter tasks by assignee, priority, or tags
  • Visual progress tracking

πŸ‘¨β€πŸ’» Author

Arjun Divraniya
Full Stack Developer | MERN Stack Enthusiast | Hackathon Winner

Connect With Me

LinkedIn GitHub Portfolio


πŸ“„ License

This project is licensed under the MIT License - see below for details:

MIT License

Copyright (c) 2024 Arjun Divraniya

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

πŸ™ Acknowledgments

  • ODOOxNMIT for organizing an inspiring hackathon
  • shadcn/ui for the beautiful component library
  • Radix UI for accessible component primitives
  • Socket.io for making real-time communication seamless
  • MongoDB for the flexible NoSQL database
  • The open-source community for amazing tools and libraries

⭐ Star This Repository

If you found this project helpful or interesting, please consider giving it a star! ⭐

# Clone and explore
git clone https://github.com/yourusername/synergsphere.git
cd synergsphere

Made with ❀️ by Arjun Divraniya

Built in 48 hours for ODOOxNMIT Hackathon 2024

⬆ Back to Top

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 91.6%
  • JavaScript 7.7%
  • Other 0.7%