Skip to content

README.md

Latest commit

 

History

History
446 lines (355 loc) · 12 KB

README.md

File metadata and controls

446 lines (355 loc) · 12 KB
Raw

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 Configuration
NODE_ENV=development
PORT=5000
CLIENT_URL=http://localhost:3000

# Database
MONGODB_URI=mongodb://localhost:27017/taskflow

# JWT Secrets (Generate secure random strings)
JWT_SECRET=your_super_secret_jwt_key_here
JWT_REFRESH_SECRET=your_refresh_secret_here
JWT_EXPIRE=7d
JWT_REFRESH_EXPIRE=30d

# OAuth - Google (Optional)
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:5000/api/auth/google/callback

# OAuth - GitHub (Optional)
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GITHUB_CALLBACK_URL=http://localhost:5000/api/auth/github/callback

# Session Secret
SESSION_SECRET=your_session_secret_here

# File Upload
MAX_FILE_SIZE=10485760
UPLOAD_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 file
echo "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_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
  1. 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 production
export 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 tests
cd backend
npm test

# Frontend tests
cd 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! 🚀