Task Master - Task Management Web Application

Task Master is a powerful task management full-stack MERN-based web application that allows users to efficiently manage their tasks with a wide range of features such as task sorting, calendar integration, notifications, & much more.

This application is ideal for individuals, teams, or organisations looking for a comprehensive tool to track, assign & prioritise tasks in real-time with minimal effort & cost

Technologies Used:

• Programming Languages

  • JavaScript

• Package Manage

  • npm

• Cloud

  • GCP (Google Cloud Platform) or AWS (Amazon Web Services)

• Database

  • MongoDB
  • Redis (Cache)

• Frontend

  • Vite
  • React.js
  • Full Calendar
  • Redux Toolkit
  • react-redux
  • axios
  • chart.js
  • date-fns
  • react-draggable
  • @dnd-kit/core
  • @dnd-kit/sortable
  • @dnd-kit/utilities
  • react-hot-toast
  • react-icons
  • react-router-dom
  • styled-components
  • socket.io-client

  (To Be Used) :-

  • React Tooltip
  • React Helmet
  • React Spinners
  • React bits
  • OAuth2

• Backend

  • Node.js
  • bcrypt
  • body-parser
  • cookie-parser
  • cors
  • crypto
  • dotenv
  • express
  • express-rate-limiter
  • express-slow-down
  • express-mongo-sanitize
  • helmet
  • http (for Socket.io server)
  • jsonwebtoken
  • mongoose
  • multer
  • node
  • nodemailer
  • nodemon
  • router
  • socket.io

TODO

User Authentication

• Basic login/register
• Remember me feature for presistent login
• Change password using OTP
  • Email
• Add/delete avatar
• Captcha on registration form (Google's reCAPTCHA v2)
• Profile update
  • Profile name
  • Bio
• Clean account deletion (without any data stored on server/database)
• Account verification
  • Email
• Settings
  • Account
  • Password change
  • More personalisation

Security Features

• Session management
  • Implement Refresh Tokens for secure & continuous sessions
  • Expire session tokens after a set duration
  • Manage upto 5 sessions (each lasting 7 days)
  • LRU session strategy
  • Device deduplication
  • Log out from all devices simultaneously
• Cookie-based Token Delivery
• Rate limiting
• Delay spammed queries
• [] XML, SQL, DLL, LDAP injection protection
• [] Prevent web scraping
  • Robots.txt
  • Captchas
  • Rate Limiting
  • [] IP Blocking (Use extra links that can't be found by any user, but a web scrapper could & if they visit that link, we block that IP address from accessing the content)
• Add XSS protection
  • Implement on backend
  • Implement on frontend
    • Sanitise user-generated content before rendering (DOMPurify)
      • Created comprehensive sanitize.js utility with 6 sanitization functions
      • Applied sanitization to TaskCard descriptions
      • Applied sanitization to CommentItem content
      • Applied sanitization to ChatWindow messages
    • [] Use strict CSP on frontend (Content-Security-Policy meta tag)
      • Note: CSP temporarily disabled in development due to backend on different port (localhost:8000)
      • TODO: Re-enable in production with proper connect-src configuration
• Add CSRF protection
  • Implement on backend
  • Implement on frontend
    • Created CSRF Redux slice for token management
    • Added CSRF token fetching utility in api.service.js
    • Automatic token inclusion in all API request headers (X-CSRF-Token)
    • Initialize CSRF token on app load in App.jsx
    • Token stored in Redux with loading and error states
• Performance Optimizations
  • React.memo for component memoization
    • TaskCard wrapped with React.memo
    • CommentItem wrapped with React.memo
    • NotificationItem wrapped with React.memo
  • useCallback for event handler memoization
    • All TaskCard event handlers memoized
    • CommentItem handlers optimized
    • NotificationItem handlers optimized
  • useMemo for expensive calculations
    • Analytics statistics calculations memoized
    • Analytics trend data generation memoized
    • Analytics chart data memoized
    • TaskCard date calculations memoized
    • CommentItem content rendering memoized
    • NotificationItem icon/title memoized
  • Debouncing (TaskSearch component - already implemented)
  • Code splitting with React.lazy (11 pages lazy-loaded)
• [] Protection against Eavesdropping & MiTM (Man-in-the-Middle) attacks
  • [] Implement SSL certificate from Let's Encrypt
  • [] Add CertBot to renew SSL certificate automatically
  • [] Enforce HTTPS to secure communications
• E2EE (End-to-end encryption) functions
• [] Encrypted file uploads
• Passwords are hashed & salted before storing in database
• [] Privacy Controls: Add user controls for account/tasks visibility, such as sharing tasks with specific people only
• [] MFA (Multi-Factor Authentication) support (eg, OTP + password) for enhanced account security
• [] Provide feedback during password creation to encourage strong passwords
• [] Audit logs: track, log, & view sensitive actions like logins & profile updates (Optional)

Task Management

• CRUD endpoints on backend
• Task creation on frontend
  • Task creation modal with full form
  • Task editing with inline updates
  • Task cards (grid & list views)
  • Task filters (status, priority, category)
  • Task search with real-time results
  • Bulk operations UI (select multiple, bulk actions)
• File upload
  • Backend
  • Frontend (attachments in task modal)
• [] Custom task status pipelines (eg, Intial → Pending → Started → Review → Completed)
• Drag & drop task prioritization within lists
  • Kanban board view with drag & drop functionality
  • Drag between columns to change task status
  • Reorder tasks within columns
  • Three-way view toggle (grid/list/kanban)
  • Backend reorder endpoint
• Recurring tasks
• [] Encrypted tasks w/ end-to-end encryption (only available on user's own private key not stored anywhere using AES-256)
• [] Quick task creation modal via shortcut (eg, /new command)
• Add support for tasks dependent on other tasks / Ability to break down a larger tasks into smaller, more manageble tasks
• Allow tasks to repeat on a schedule (daily, weekly, quarterly, financial-yearly, yearly, etc) (Recurring Tasks)
• Set priority levels for tasks (with default & customisable settings)
• Add the ability to set & track task due dates
• Allow users to add detailed descriptions or notes to each task
• Organise tasks into default or custom categories
• Archive completed tasks
• Recycle bin (30 day lifecycle)
• Bulk operations (update, delete multiple tasks)
  • Backend API
  • Frontend UI with bulk actions bar
• Search and filter tasks with advanced filters
  • Backend search API
  • Frontend search component with debouncing
  • Advanced filters (status, priority, category, sort)
• Task statistics and analytics
  • Backend aggregation API
  • Frontend charts & dashboards
    • Chart.js integration with react-chartjs-2
    • StatCard component for key metrics display
    • TasksTrendChart (line chart with 7-day trend)
    • PriorityDistributionChart (doughnut chart)
    • CategoryDistributionChart (horizontal bar chart)
    • Comprehensive Analytics page with real-time data
    • Dark mode support for all charts
    • Performance summary section
• Real-time task updates
  • Socket.io client integration with Redux
  • Real-time task creation/update/deletion sync
  • Real-time archive notifications