TaskHub - Modern Project Management System

A full-stack project management application built with the MERN stack, featuring real-time collaboration, drag-and-drop task boards, and comprehensive workspace management.

• Workspace Management: Create and manage multiple workspaces with team collaboration
• Project Organization: Organize work into projects with customizable statuses
• Task Management: Create, assign, and track tasks with priorities and due dates
• Drag & Drop Kanban Board: Visual task management with native HTML5 drag-and-drop
• List View: Alternative table-based view for task management
• Member Permissions: Granular role-based access control (Owner, Admin, Member, Viewer)

• Real-time Progress Tracking: Visual progress indicators for projects and tasks
• Subtasks: Break down complex tasks into manageable subtasks
• Comments & Activity: Track task discussions and activity history
• File Attachments: Attach files to tasks for better context
• Task Watchers: Follow tasks to receive updates
• Email Notifications: Stay informed about task updates
• Dark Mode: Full dark theme support with system preference detection
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices

• Invite System: Invite team members via email with pending approval workflow
• Member Management: Add, remove, and manage team member roles
• Workspace Settings: Configure member permissions and workspace preferences
• Project Permissions: Control who can create projects and invite members

• React 19 - Latest React with improved performance
• React Router v7 - Modern routing with SSR support
• TypeScript - Type-safe development
• Tailwind CSS v4 - Utility-first styling
• Radix UI - Accessible component primitives
• TanStack Query - Powerful data fetching and caching
• React Hook Form - Performant form management
• Zod - Schema validation
• date-fns - Modern date utility library
• Sonner - Beautiful toast notifications
• Recharts - Composable charting library

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - Secure authentication
• Bcrypt - Password hashing
• Nodemailer - Email sending
• Joi - Request validation

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm (v9 or higher)
• MongoDB (v6 or higher)

git clone https://github.com/Ishwar-Bonde/TaskHub-PMS.git
cd TaskHub-PMS

cd backend
npm install

Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/taskhub
JWT_SECRET=your_jwt_secret_key_here
JWT_EXPIRES_IN=7d

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASSWORD=your_app_password
EMAIL_FROM=TaskHub <noreply@taskhub.com>

CLIENT_URL=http://localhost:5173

cd frontend
npm install --legacy-peer-deps

Create a .env file in the frontend directory:

VITE_API_URL=http://localhost:5000/api

Start Backend:

cd backend
npm run dev

Backend will run on http://localhost:5000

Start Frontend:

cd frontend
npm run dev

Frontend will run on http://localhost:5173

Backend:

cd backend
npm start

Frontend:

cd frontend
npm run build
npm run start

taskhub/
├── backend/
│   ├── controllers/       # Request handlers
│   ├── models/           # MongoDB schemas
│   ├── routes/           # API routes
│   ├── middleware/       # Custom middleware
│   ├── libs/             # Utility functions
│   └── index.js          # Entry point
│
├── frontend/
│   ├── app/
│   │   ├── components/   # Reusable components
│   │   ├── hooks/        # Custom React hooks
│   │   ├── lib/          # Utility functions
│   │   ├── provider/     # Context providers
│   │   ├── routes/       # Page components
│   │   └── types/        # TypeScript types
│   ├── public/           # Static assets
│   └── vite.config.ts    # Vite configuration
│
└── README.md

1. Sign Up: Create a new account with your email
2. Verify Email: Check your inbox for verification link
3. Create Workspace: Set up your first workspace
4. Invite Team: Add team members to collaborate
5. Create Project: Start organizing your work
6. Add Tasks: Create tasks and assign to team members

• Owner: Full control over workspace, can delete workspace
• Admin: Manage members, projects, and settings
• Member: Create and manage assigned tasks
• Viewer: Read-only access to workspace content

Board View:

• Drag tasks between columns (To Do, In Progress, Done)
• Visual progress indicators
• Quick task creation
• Filter by status

List View:

• Table-based layout
• Sort by multiple criteria
• Bulk operations
• Detailed task information

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

• JWT-based authentication
• Password hashing with bcrypt
• HTTP-only cookies
• CORS protection
• Input validation and sanitization
• XSS protection
• Rate limiting
• Secure password reset flow

The app supports light, dark, and system themes. Users can customize their preference in Settings > Appearance.

Customize email templates in backend/libs/send-email.js

Modify Tailwind configuration in frontend/tailwind.config.js

POST   /api/auth/register          - Register new user
POST   /api/auth/login             - Login user
POST   /api/auth/verify-email      - Verify email
POST   /api/auth/forgot-password   - Request password reset
POST   /api/auth/reset-password    - Reset password
GET    /api/auth/me                - Get current user

GET    /api/workspaces             - Get all workspaces
POST   /api/workspaces             - Create workspace
GET    /api/workspaces/:id         - Get workspace details
PUT    /api/workspaces/:id         - Update workspace
DELETE /api/workspaces/:id         - Delete workspace
POST   /api/workspaces/:id/invite  - Invite member

GET    /api/projects/:workspaceId  - Get workspace projects
POST   /api/projects/:workspaceId  - Create project
GET    /api/projects/:id           - Get project details
PUT    /api/projects/:id           - Update project
DELETE /api/projects/:id           - Delete project

POST   /api/tasks/:projectId/create-task  - Create task
GET    /api/tasks/:id                     - Get task details
PUT    /api/tasks/:id/status              - Update task status
PUT    /api/tasks/:id/title               - Update task title
PUT    /api/tasks/:id/description         - Update description
PUT    /api/tasks/:id/assignees           - Update assignees
PUT    /api/tasks/:id/priority            - Update priority
POST   /api/tasks/:id/add-subtask         - Add subtask
POST   /api/tasks/:id/add-comment         - Add comment

# Run backend tests
cd backend
npm test

# Run frontend tests
cd frontend
npm test

Port already in use:

# Kill process on port 5000
npx kill-port 5000

# Kill process on port 5173
npx kill-port 5173

MongoDB connection error:

• Ensure MongoDB is running
• Check connection string in .env
• Verify network connectivity

React 19 peer dependency warnings:

• Use --legacy-peer-deps flag when installing packages
• This is expected with React 19 as some packages haven't updated yet

Vite cache issues:

cd frontend
rm -rf node_modules/.vite
rm -rf .react-router
npm run dev

Windows-specific issues:

# Use PowerShell commands
Remove-Item -Recurse -Force node_modules/.vite
Remove-Item -Recurse -Force .react-router

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Use TypeScript for type safety
• Follow ESLint configuration
• Write meaningful commit messages
• Add comments for complex logic
• Update documentation as needed

See CONTRIBUTING.md for detailed guidelines.

This project is licensed under the MIT License - see the LICENSE file for details.

• Ishwar Bonde - Initial work - GitHub

• React team for React 19
• Vercel team for React Router v7
• Radix UI for accessible components
• TanStack for Query library
• All open-source contributors

For questions or support, please reach out:

• GitHub Issues: Create an issue
• GitHub Profile: @Ishwar-Bonde

• Real-time collaboration with WebSockets
• Advanced analytics and reporting
• Time tracking integration
• Calendar view for tasks
• Mobile app (React Native)
• Integrations (Slack, GitHub, etc.)
• Custom fields for tasks
• Gantt chart view
• Export to PDF/Excel
• API rate limiting dashboard

Give a ⭐️ if this project helped you!

Built with ❤️ using the MERN stack