TaskFlow - Full-Stack Task Management & Collaboration Application

A modern, production-ready task management and collaboration platform similar to Trello, Notion, and Asana. Built with the MERN stack (MongoDB, Express.js, React.js, Node.js) with real-time collaboration features powered by Socket.io.

🚀 Features

Core Functionality

• Complete Authentication System

  • JWT-based authentication with access and refresh tokens
  • OAuth integration (Google & GitHub)
  • Email verification and password reset
  • Session management
  • Role-based access control (Admin, Manager, Member, Guest)

• Workspace & Project Management

  • Create and manage multiple workspaces
  • Organize projects within workspaces
  • Team collaboration with role-based permissions
  • Project templates for quick setup

• Advanced Task Management

  • Drag-and-drop Kanban boards
  • Multiple views: Kanban, List, Calendar, Timeline
  • Task properties: title, description, priority, status, due dates
  • Assignees, labels, and custom fields
  • Checklists and subtasks
  • Task dependencies
  • Time tracking

• Real-time Collaboration

  • Live updates across all connected users
  • Presence indicators (who's viewing/editing)
  • Real-time comments and mentions
  • Instant notifications

• File Management

  • Local file upload system
  • Multiple file type support
  • File attachments on tasks
  • Organized storage by date

• Notifications

  • In-app notifications
  • Mock email service (ready for production email integration)
  • Customizable notification preferences

• Analytics & Reporting

  • Activity logs and audit trails
  • Task completion metrics
  • Team productivity insights

• UI/UX Excellence

  • Modern, clean corporate design
  • Dark mode and light mode support
  • Fully responsive (mobile, tablet, desktop)
  • Smooth animations and transitions
  • Toast notifications
  • Loading states and skeletons

🛠️ Tech Stack

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JWT, Passport.js (Google OAuth, GitHub OAuth)
• Real-time: Socket.io
• File Upload: Multer
• Security: Helmet, CORS, Rate Limiting, bcryptjs
• Validation: express-validator

Frontend

• Framework: React 18
• Styling: Tailwind CSS
• State Management: Context API
• Routing: React Router v6
• HTTP Client: Axios
• Real-time: Socket.io-client
• UI Components: Headless UI, Heroicons
• Drag & Drop: @dnd-kit
• Notifications: react-hot-toast
• Date Handling: date-fns
• Charts: Chart.js, react-chartjs-2

📦 Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• MongoDB (v5 or higher)
• npm or yarn

1. Clone the Repository

git clone <repository-url>cd TaskFlowTaskManagementApp

2. Backend Setup

cd backend
# Install dependencies
npm install
# Create .env file
cp .env.example .env
# Edit .env file with your configuration
nano .env

Configure environment variables in .env:

# Server ConfigurationNODE_ENV=developmentPORT=5000CLIENT_URL=http://localhost:3000# DatabaseMONGODB_URI=mongodb://localhost:27017/taskflow# JWT Secrets (Generate secure random strings)JWT_SECRET=your_super_secret_jwt_key_hereJWT_REFRESH_SECRET=your_refresh_secret_hereJWT_EXPIRE=7dJWT_REFRESH_EXPIRE=30d# OAuth - Google (Optional)GOOGLE_CLIENT_ID=your_google_client_idGOOGLE_CLIENT_SECRET=your_google_client_secretGOOGLE_CALLBACK_URL=http://localhost:5000/api/auth/google/callback# OAuth - GitHub (Optional)GITHUB_CLIENT_ID=your_github_client_idGITHUB_CLIENT_SECRET=your_github_client_secretGITHUB_CALLBACK_URL=http://localhost:5000/api/auth/github/callback# Session SecretSESSION_SECRET=your_session_secret_here# File UploadMAX_FILE_SIZE=10485760UPLOAD_DIR=./uploads

Start MongoDB:

# If using local MongoDB
mongod
# Or use MongoDB Atlas (cloud) by updating MONGODB_URI in .env

Run the backend server:

# Development mode with auto-restart
npm run dev
# Production mode
npm start

The backend API will be available at http://localhost:5000

3. Frontend Setup

cd frontend
# Install dependencies
npm install
# Create .env fileecho"REACT_APP_API_URL=http://localhost:5000/api"> .env
echo"REACT_APP_SOCKET_URL=http://localhost:5000">> .env
# Start the development server
npm start

The frontend will be available at http://localhost:3000

🔧 Configuration

OAuth Setup (Optional)

Google OAuth

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URI: http://localhost:5000/api/auth/google/callback
6. Copy Client ID and Client Secret to .env

GitHub OAuth

1. Go to GitHub Developer Settings
2. Create new OAuth App
3. Set Authorization callback URL: http://localhost:5000/api/auth/github/callback
4. Copy Client ID and Client Secret to .env

Email Service (Production)

For production, replace the mock email service with a real provider:

Option 1: SendGrid

npm install @sendgrid/mail

Option 2: Resend

npm install resend

Update backend/utils/emailService.js with your chosen provider.

Cloudinary Setup (Production File Storage)

1. Sign up at Cloudinary
2. Get your credentials from dashboard
3. Add to .env:

CLOUDINARY_CLOUD_NAME=your_cloud_nameCLOUDINARY_API_KEY=your_api_keyCLOUDINARY_API_SECRET=your_api_secret

4. Update file upload middleware to use Cloudinary SDK

📁 Project Structure

taskflow/
├── backend/
│ ├── config/
│ │ ├── database.js # MongoDB ***
│ │ └── passport.js # Passport strategies
│ ├── controllers/
│ │ ├── authController.js # Authentication logic
│ │ └── taskController.js # Task CRUD operations
│ ├── models/
│ │ ├── User.js # User schema
│ │ ├── Workspace.js # Workspace schema
│ │ ├── Project.js # Project schema
│ │ ├── Task.js # Task schema
│ │ ├── Comment.js # Comment schema
│ │ ├── Notification.js # Notification schema
│ │ ├── ActivityLog.js # Activity log schema
│ │ └── Template.js # Template schema
│ ├── routes/
│ │ ├── authRoutes.js # Auth endpoints
│ │ └── taskRoutes.js # Task endpoints
│ ├── middleware/
│ │ ├── auth.js # JWT verification
│ │ ├── errorHandler.js # Global error handling
│ │ ├── validation.js # Input validation
│ │ └── upload.js # File upload handling
│ ├── socket/
│ │ └── index.js # Socket.io configuration
│ ├── utils/
│ │ ├── tokenUtils.js # JWT helpers
│ │ └── emailService.js # Email sending
│ ├── uploads/ # File storage directory
│ ├── .env.example # Environment template
│ ├── package.json
│ └── server.js # Main server file
1 ├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/
│ │ │ ├── LandingPage.js # Home page
│ │ │ ├── Login.js # Login page
│ │ │ ├── Register.js # Registration
│ │ │ ├── Dashboard.js # Main dashboard
│ │ │ ├── KanbanBoard.js # Kanban view
│ │ │ └── NotFound.js # 404 page
│ │ ├── context/
│ │ │ ├── AuthContext.js # Authentication state
│ │ │ ├── ThemeContext.js # Theme management
│ │ │ └── SocketContext.js# Socket.io ***
│ │ ├── services/
│ │ │ └── api.js # API client & endpoints
│ │ ├── styles/
│ │ │ └── index.css # Global styles
│ │ ├── App.js # Main app component
│ │ └── index.js # Entry point
│ ├── tailwind.config.js # Tailwind configuration
│ └── package.json
└── README.md

🎯 API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• POST /api/auth/logout - Logout user
• POST /api/auth/refresh-token - Refresh access token
• GET /api/auth/me - Get current user
• PUT /api/auth/profile - Update profile
• PUT /api/auth/change-password - Change password
• POST /api/auth/forgot-password - Request password reset
• PUT /api/auth/reset-password/:token - Reset password
• GET /api/auth/verify-email/:token - Verify email
• GET /api/auth/google - Google OAuth
• GET /api/auth/github - GitHub OAuth

Tasks

• GET /api/tasks - Get all tasks (with filters)
• GET /api/tasks/:id - Get single task
• POST /api/tasks - Create task
• PUT /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task
• PUT /api/tasks/:id/move - Move task (drag & drop)
• POST /api/tasks/:id/attachments - Upload attachment

Health Check

• GET /api/health - Server health status
• GET /api/socket/status - Active socket ***s

🔐 Security Features

• JWT Authentication with access and refresh tokens
• Password Hashing using bcryptjs
• Input Validation with express-validator
• Rate Limiting to prevent brute-force attacks
• Helmet.js for security headers
• CORS configuration
• XSS Protection via input sanitization
• SQL/NoSQL Injection prevention via Mongoose
• File Upload Validation (type, size, extension)

🚦 Running in Production

Backend Deployment

cd backend
# Set environment to productionexport NODE_ENV=production
# Install only production dependencies
npm install --production
# Start server
npm start

Or use PM2 for process management:

npm install -g pm2
pm2 start server.js --name taskflow-api
pm2 save
pm2 startup

Frontend Deployment

cd frontend
# Build for production
npm run build
# Serve with a static server
npx serve -s build

Or deploy to:

• Vercel
• Netlify
• AWS S3 + CloudFront
• Heroku

Database

For production, use:

• MongoDB Atlas (managed cloud database)
• AWS DocumentDB
• Self-hosted MongoDB with replica sets

📝 Environment Variables

Required

• MONGODB_URI - Database *** string
• JWT_SECRET - JWT signing secret
• JWT_REFRESH_SECRET - Refresh token secret

Optional

• GOOGLE_CLIENT_ID - For Google OAuth
• GITHUB_CLIENT_ID - For GitHub OAuth
• CLOUDINARY_* - For cloud file storage

🧪 Testing

# Backend testscd backend
npm test# Frontend testscd frontend
npm test

📊 Database Schema

Collections

1. users - User accounts and authentication
2. workspaces - Team workspaces
3. projects - Projects within workspaces
4. tasks - Individual tasks/cards
5. comments - Task comments
6. notifications - User notifications
7. activitylogs - Audit trail
8. templates - Project and task templates

🤝 Contributing

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

📄 License

This project is licensed under the MIT License.

👥 Support

For support, email support@taskflow.com or open an issue in the repository.

🎉 Acknowledgments

• Built with modern best practices
• Inspired by Trello, Asana, and Notion
• Uses industry-standard security measures

---

Happy Task Managing! 🚀