TaskMaster

A comprehensive full-stack collaborative task management application designed for teams and individuals to manage projects and tasks efficiently. Built with Django backend and Vue.js/Nuxt.js frontend, featuring role-based permissions, team collaboration, and dynamic Kanban boards.

✨ Features

🔐 User Management & Authentication

• Secure Authentication: JWT-based login and registration system
• User Profiles: Personal profile pages with bio and avatar support
• Persistent Sessions: Maintained login state across sessions

📋 Task & Project Management

• Personal Tasks: Create and manage individual tasks
• Project Organization: Group related tasks under projects
• CRUD Operations: Full create, read, update, delete functionality
• Task Assignment: Assign tasks to project members
• Priority Levels: Set task priorities (High, Medium, Low)
• Deadlines: Set and track due dates for tasks
• Status Tracking: Monitor task progress through different stages

👥 Team Collaboration

• Role-Based Access Control: Distinct Owner and Member permissions
• Project Ownership: Full project control for owners
• Member Permissions: Complete task CRUD access for project members
• Email Invitations: Invite users via in-app email notifications
• Invitation Management: Accept/decline project invitations
• Team Management: Add/remove members, voluntary project leaving

📊 Dynamic Interface

• Dual View Modes: Switch between List and Kanban board views
• Drag & Drop Kanban: Interactive task status management
• Real-time Updates: Instant persistence of board changes
• Personal Dashboard: Individual task overview and management
• Project Dashboard: Collaborative project and task view
• Efficient Pagination: Optimized data loading for large task sets
• Status Filtering: Filter tasks by completion status

🚀 Tech Stack

Backend (Django)

• Framework: Django 5+
• API: Django REST Framework (DRF)
• Authentication: djangorestframework-simplejwt
• Database: SQLite3 (development)
• Server: Gunicorn WSGI
• Documentation: drf-spectacular (OpenAPI 3.0)

Frontend (Vue.js/Nuxt.js)

• Framework: Nuxt 3 (Vue 3)
• Language: TypeScript with <script setup> syntax
• State Management: Pinia stores
• UI Framework: Nuxt UI components
• API Client: Custom $api plugin with $fetch
• Drag & Drop: vue-draggable-next
• Validation: Zod schemas

Infrastructure

• Containerization: Docker & Docker Compose
• Web Server: Nginx (reverse proxy)
• Architecture: Decoupled SPA with headless API

📦 Installation

Prerequisites

• Docker and Docker Compose
• Node.js 18+ (for local development)
• Python 3.9+ (for local development)

Setup with Docker (Recommended)

1. Clone the repository

   git clone https://github.com/MurtazaD1410/taskmaster.git
   cd taskmaster

2. Build and start with Docker Compose

   docker-compose up --build

3. Access the application

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:8000
   • API Documentation: http://localhost:8000/api/schema/swagger-ui/

Local Development Setup

Backend (Django)

1. Navigate to backend directory

   cd backend

2. Create virtual environment

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies

   pip install -r requirements.txt

4. Run migrations

   python manage.py migrate

5. Create superuser (optional)

   python manage.py createsuperuser

6. Start development server

   python manage.py runserver

Frontend (Nuxt.js)

1. Navigate to frontend directory

   cd frontend

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

⭐ If you found this project helpful, please give it a star on GitHub!