Winner Project - ODOOxNMIT Hackathon 2024
Empowering teams to collaborate seamlessly with real-time task management, intelligent notifications, and integrated communication.
- About the Hackathon
- Project Overview
- Problem Statement
- Core Features
- Tech Stack
- System Architecture
- API Documentation
- Installation Guide
- Project Structure
- Environment Variables
- Usage Guide
- Future Enhancements
- Interview Prep
- Resume Description
- Author
- License
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.
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
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
SynergSphere addresses these issues by providing:
- Unified Platform - All project management needs in one place
- Real-time Synchronization - Instant updates across all team members
- Visual Task Management - Clear Kanban boards for easy tracking
- Smart Notifications - Stay informed without being overwhelmed
- 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
- β Secure user registration and authentication with JWT
- β Role-based access control (Admin & User roles)
- β User profile management with customization options
- β Password encryption using bcrypt
- β 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
- β 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
- β Project-specific chat rooms using Socket.io
- β Real-time message broadcasting
- β Message history and persistence
- β User presence indicators
- β
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
- β Modern, responsive design using Tailwind CSS
- β Dark/Light theme toggle
- β Radix UI components for accessibility
- β Smooth animations with Framer Motion
- β Mobile-first responsive layout
- 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
- 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
- Version Control: Git & GitHub
- API Testing: Postman
- Package Manager: npm/pnpm
- Development: Nodemon (hot reload)
- Environment: dotenv
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β 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 β
ββββββββββββββββββββββββββββ
- User clicks "Create Task" in the React UI
- Frontend sends POST request to
/api/taskswith JWT token - Express middleware validates JWT and extracts user info
taskController.createTaskprocesses the request- Mongoose creates a new Task document in MongoDB
- Socket.io broadcasts task creation event to all project members
- Backend sends success response to the client
- Frontend updates UI and all connected clients receive real-time update
http://localhost:5001/api
POST /api/auth/register
Content-Type: application/json
{
"name": "John Doe",
"email": "john@example.com",
"password": "securePassword123",
"role": "user" // or "admin"
}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 /api/auth/profile
Authorization: Bearer <your_jwt_token>PUT /api/auth/profile
Authorization: Bearer <your_jwt_token>
Content-Type: application/json
{
"name": "John Updated",
"email": "newemail@example.com"
}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 /api/projects
Authorization: Bearer <token>GET /api/projects/:projectId
Authorization: Bearer <token>PUT /api/projects/:projectId
Authorization: Bearer <admin_token>
Content-Type: application/json
{
"name": "Updated Project Name",
"description": "Updated description"
}DELETE /api/projects/:projectId
Authorization: Bearer <admin_token>POST /api/projects/join
Authorization: Bearer <token>
Content-Type: application/json
{
"passkey": "ABC123XYZ"
}DELETE /api/projects/:projectId/members/:userId
Authorization: Bearer <admin_token>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 /api/tasks/project/:projectId
Authorization: Bearer <token>GET /api/tasks/my-tasks
Authorization: Bearer <token>PUT /api/tasks/:taskId
Authorization: Bearer <token>
Content-Type: application/json
{
"status": "in-progress",
"priority": "medium"
}DELETE /api/tasks/:taskId
Authorization: Bearer <token>POST /api/messages
Authorization: Bearer <token>
Content-Type: application/json
{
"projectId": "project_id",
"content": "Hello team! Let's discuss the timeline."
}GET /api/messages/:projectId
Authorization: Bearer <token>GET /api/notifications
Authorization: Bearer <token>GET /api/notifications/unread-count
Authorization: Bearer <token>PUT /api/notifications/:notificationId/read
Authorization: Bearer <token>PUT /api/notifications/read-all
Authorization: Bearer <token>DELETE /api/notifications/:notificationId
Authorization: Bearer <token>import io from 'socket.io-client';
const socket = io('http://localhost:5001');socket.emit('joinProject', projectId);// 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
- 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
git clone https://github.com/yourusername/synergsphere.git
cd synergspherecd Backend
npm installCreate 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# Windows
mongod
# macOS/Linux
sudo systemctl start mongod# Development mode (with hot reload)
npm run dev
# Production mode
npm startServer will run on: http://localhost:5001
cd synergsphere-frontend
npm install
# OR
pnpm installCreate a .env file in the synergsphere-frontend directory:
VITE_API_URL=http://localhost:5001/api
VITE_SOCKET_URL=http://localhost:5001npm run dev
# OR
pnpm devFrontend will run on: http://localhost:5173
-
Check Backend:
- Visit
http://localhost:5001- You should see a welcome message - Test API endpoint:
http://localhost:5001/api/auth/login
- Visit
-
Check Frontend:
- Visit
http://localhost:5173 - You should see the login page
- Visit
-
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" }
cd Backend
npm startcd synergsphere-frontend
npm run build
# Preview production build
npm run previewThe production build will be in the dist folder.
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
config/- Database and app configuration filescontrollers/- Business logic separated from routesmiddleware/- Request processing middleware (auth, validation)models/- MongoDB schemas using Mongooseroutes/- API endpoint definitions
components/ui/- Reusable UI primitives from shadcn/uicomponents/- Feature-specific componentscontexts/- React Context for global statehooks/- Custom React hooks for reusable logicpages/- Route-level componentsservices/- API communication layer
| 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 |
| 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
.envfiles 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
POST /api/auth/register
{
"name": "Admin User",
"email": "admin@company.com",
"password": "securePassword",
"role": "admin"
}- 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
- View all projects in the dashboard
- Edit project details
- Add/remove team members
- Monitor project progress
- Delete projects when complete
- Open a project
- Click "Create Task"
- Set title, description, priority, status
- Assign to team members
- Set due dates and tags
POST /api/auth/register
{
"name": "Team Member",
"email": "member@company.com",
"password": "password123",
"role": "user"
}- Login to user dashboard
- Click "Join Project"
- Enter the passkey provided by admin
- Click "Join"
- View all your assigned tasks in "My Tasks"
- Drag tasks across Kanban columns (Todo β In Progress β Done)
- Update task details
- Mark tasks as complete
- Open project chat
- Send messages to team members
- Receive real-time notifications
- Respond to task assignments
- Navigate to a project
- Open the chat panel
- Type your message
- All team members see messages instantly (via Socket.io)
- 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
- Drag and drop tasks between columns
- Changes sync instantly across all users
- Filter tasks by assignee, priority, or tags
- Visual progress tracking
Arjun Divraniya
Full Stack Developer | MERN Stack Enthusiast | Hackathon Winner
- π§ Email: arjun.divraniya@example.com
- πΌ LinkedIn: linkedin.com/in/arjundivraniya
- π GitHub: github.com/arjundivraniya
- π Portfolio: arjundivraniya.dev
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.
- 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
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