🚀 Project Management System

A comprehensive, full-stack project management application designed for modern teams. Built with React TypeScript frontend, Flask Python backend, GraphQL API, and PostgreSQL database.

🎯 Overview

This Project Management System provides a complete solution for managing teams, projects, and tasks in a collaborative environment. The application features role-based access control, real-time updates, and an intuitive Kanban board interface for task management.

Key Highlights

• 🔐 Secure Authentication: JWT-based authentication with persistent sessions
• 👥 Role-Based Access: Three user roles with hierarchical permissions
• 📊 Kanban Board: Drag-and-drop task management with visual status tracking
• 🎨 Modern UI: Material-UI components with responsive design
• ⚡ Real-time API: GraphQL for efficient data operations
• 🗄️ Scalable Database: PostgreSQL with proper normalization
• 🚀 Production Ready: Docker support and deployment configurations

✨ Features

User Management

• User Registration & Authentication: Secure signup/login with password hashing
• Role Assignment: Admin can assign roles (Admin, Project Manager, Coordinator)
• User Profile Management: View and edit user information
• Session Persistence: Stay logged in across browser sessions

Project Management

• Project Creation: Create projects with detailed descriptions
• Progress Tracking: Visual progress bars showing completion percentage
• Project Assignment: Assign projects to team members
• Project Overview: Dashboard view of all projects with key metrics

Task Management

• Kanban Board: Visual task board with three columns (To Do, In Progress, Completed)
• Drag & Drop: Intuitive task status updates via drag and drop
• Task Assignment: Assign tasks to specific team members
• Task Details: Rich task descriptions with creation timestamps
• Priority Indicators: Visual priority indicators for better organization

Dashboard & Analytics

• Role-Based Dashboard: Customized dashboard based on user permissions
• Quick Actions: Direct access to key features from dashboard
• Status Overview: At-a-glance view of projects and tasks
• Navigation: Seamless navigation between different sections

🛠️ Technology Stack

Backend Technologies

• Flask 3.0+: Lightweight and flexible Python web framework
• Ariadne 0.23+: GraphQL-first approach with schema-first design
• SQLAlchemy 2.0+: Powerful ORM with modern async support
• PostgreSQL 15+: Robust relational database with ACID compliance
• JWT Extended: Secure JSON Web Token implementation
• Bcrypt: Industry-standard password hashing
• Flask-CORS: Cross-origin resource sharing support
• Gunicorn: Production WSGI HTTP Server

Frontend Technologies

• React 19: Latest React with concurrent features
• TypeScript 5+: Static type checking for enhanced development
• Material-UI (MUI) 6+: Google's Material Design components
• Apollo Client 3+: Comprehensive GraphQL client
• React Router DOM 6+: Declarative routing for React
• React DnD: Drag and drop functionality
• Emotion: CSS-in-JS styling solution

Development Tools

• Vite: Fast build tool and development server
• ESLint: Code linting for consistent style
• Prettier: Code formatting
• Python Poetry: Dependency management for Python
• npm: Node.js package management

🏗️ Architecture

System Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   React Client  │◄──►│  Flask Server   │◄──►│   PostgreSQL    │
│   (Frontend)    │    │   (Backend)     │    │   (Database)    │
├─────────────────┤    ├─────────────────┤    ├─────────────────┤
│ • React 19      │    │ • Flask 3.0     │    │ • User Data     │
│ • TypeScript    │    │ • GraphQL API   │    │ • Projects      │
│ • Material-UI   │    │ • JWT Auth      │    │ • Tasks         │
│ • Apollo Client │    │ • SQLAlchemy    │    │ • Relationships │
│ • React Router  │    │ • Bcrypt        │    │ • Indexes       │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Data Flow

1. Authentication Flow:

   User Login → JWT Token → Stored in LocalStorage → Sent with Requests → Verified by Backend
   

2. API Request Flow:

   React Component → Apollo Client → GraphQL Query/Mutation → Flask Resolver → Database → Response
   

3. State Management:

   React Context (Auth) → Apollo Cache → Local Component State → UI Updates
   

🚀 Quick Start

Prerequisites

• Python 3.11+
• Node.js 18+
• PostgreSQL 15+
• Git

Clone & Run

# Clone the repository
git clone https://github.com/marmik28/Project-Management-Application.git
cd Project-Management-Application

# Backend setup
pip install -r requirements.txt
export DATABASE_URL="postgresql://user:pass@localhost/projectdb"
python main.py

# Frontend setup (new terminal)
cd frontend
npm install
npm start

Default Login Credentials

Admin:           admin@example.com / admin123
Project Manager: manager@example.com / manager123
Coordinator:     coord@example.com / coord123

📝 Detailed Setup

Backend Setup

1. Create Virtual Environment:

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

2. Install Dependencies:

   pip install -r requirements.txt

3. Database Configuration:

   # Create PostgreSQL database
   createdb projectmanagement
   
   # Set environment variable
   export DATABASE_URL="postgresql://username:password@localhost:5432/projectmanagement"

4. Initialize Database:

   python -c "from main import create_app; from models import db; app = create_app(); app.app_context().push(); db.create_all()"

5. Run Backend Server:

   python main.py
   # Server runs on http://localhost:3001

Frontend Setup

1. Navigate to Frontend Directory:

   cd frontend

2. Install Node Dependencies:

   npm install

3. Configure Environment:

   # Create .env file in frontend directory
   echo "REACT_APP_GRAPHQL_ENDPOINT=http://localhost:3001/graphql" > .env

4. Start Development Server:

   npm start
   # Frontend runs on http://localhost:5000

Production Setup

1. Build Frontend:

   cd frontend
   npm run build

2. Run with Gunicorn:

   gunicorn --bind 0.0.0.0:8000 --workers 4 main:app

📚 API Documentation

GraphQL Endpoint

POST /graphql
Content-Type: application/json
Authorization: Bearer <jwt_token>

Authentication Mutations

Login

mutation Login($email: String!, $password: String!) {
  login(email: $email, password: $password) {
    token
    user {
      id
      email
      username
      role
    }
  }
}

Register

mutation Register($email: String!, $username: String!, $password: String!, $role: UserRole) {
  register(email: $email, username: $username, password: $password, role: $role) {
    token
    user {
      id
      email
      username
      role
    }
  }
}

User Queries & Mutations

Get All Users

query GetUsers {
  users {
    id
    email
    username
    role
    createdAt
  }
}

Update User Role

mutation UpdateUserRole($userId: ID!, $role: UserRole!) {
  updateUserRole(userId: $userId, role: $role) {
    id
    role
  }
}

Delete User

mutation DeleteUser($userId: ID!) {
  deleteUser(userId: $userId)
}

Project Queries & Mutations

Get Projects

query GetProjects {
  projects {
    id
    name
    description
    owner {
      id
      username
    }
    tasks {
      id
      status
    }
    createdAt
  }
}

Create Project

mutation CreateProject($name: String!, $description: String!) {
  createProject(name: $name, description: $description) {
    id
    name
    description
    owner {
      username
    }
  }
}

Delete Project

mutation DeleteProject($projectId: ID!) {
  deleteProject(projectId: $projectId)
}

Task Queries & Mutations

Get Tasks

query GetTasks {
  tasks {
    id
    title
    description
    status
    project {
      id
      name
    }
    assignee {
      id
      username
    }
    createdAt
  }
}

Create Task

mutation CreateTask($title: String!, $description: String!, $projectId: ID!, $assigneeId: ID) {
  createTask(title: $title, description: $description, projectId: $projectId, assigneeId: $assigneeId) {
    id
    title
    description
    status
  }
}

Update Task Status

mutation UpdateTaskStatus($taskId: ID!, $status: TaskStatus!) {
  updateTaskStatus(taskId: $taskId, status: $status) {
    id
    status
  }
}

Enums

enum UserRole {
  ADMIN
  PROJECT_MANAGER
  COORDINATOR
}

enum TaskStatus {
  TODO
  IN_PROGRESS
  COMPLETED
}

🗄️ Database Schema

Users Table

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    email VARCHAR(255) UNIQUE NOT NULL,
    username VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role VARCHAR(50) NOT NULL DEFAULT 'COORDINATOR',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Projects Table

CREATE TABLE projects (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    owner_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Tasks Table

CREATE TABLE tasks (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    status VARCHAR(50) NOT NULL DEFAULT 'TODO',
    project_id INTEGER REFERENCES projects(id) ON DELETE CASCADE,
    assignee_id INTEGER REFERENCES users(id) ON DELETE SET NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Relationships

• Users can own multiple Projects (One-to-Many)
• Projects can have multiple Tasks (One-to-Many)
• Tasks can be assigned to Users (Many-to-One)

👥 User Roles & Permissions

Admin

• Full System Access: Complete control over all features
• User Management: Create, update, delete users and assign roles
• Project Management: Create, view, update, delete all projects
• Task Management: Full access to all tasks across projects

Project Manager

• Project Management: Create, view, update, delete their own projects
• Task Management: Create, view, update tasks in their projects
• Team Oversight: View team members and assign tasks
• Limited User Access: Cannot manage other users or roles

Coordinator

• Task Management: View and update tasks assigned to them
• Project Viewing: View projects they're involved in
• Limited Access: Cannot create projects or manage users
• Self-Service: Update their own profile and task status

Permission Matrix

Feature	Admin	Project Manager	Coordinator
Manage Users	✅	❌	❌
Create Projects	✅	✅	❌
Delete Projects	✅	✅ (own)	❌
Create Tasks	✅	✅	❌
Update Task Status	✅	✅	✅ (assigned)
View All Data	✅	✅ (projects)	✅ (assigned)

🧩 Component Structure

Frontend Architecture

frontend/src/
├── components/           # Reusable UI components
│   ├── Dashboard.tsx     # Main dashboard with role-based views
│   ├── Login.tsx         # Authentication component
│   ├── UserManagement.tsx # User CRUD operations
│   ├── ProjectManagement.tsx # Project CRUD operations
│   └── TaskManagement.tsx # Kanban board with drag-drop
├── context/             # React Context providers
│   └── AuthContext.tsx  # Authentication state management
├── types.ts             # TypeScript type definitions
├── App.tsx              # Main application component
└── index.tsx            # Application entry point

Backend Architecture

backend/
├── main.py              # Flask application factory
├── models.py            # SQLAlchemy database models
├── schema.py            # GraphQL schema and resolvers
├── auth.py              # JWT authentication utilities
└── requirements.txt     # Python dependencies

🔐 Authentication Flow

Login Process

1. User enters credentials in login form
2. Frontend sends GraphQL mutation to /graphql
3. Backend validates credentials using bcrypt
4. JWT token generated and returned
5. Token stored in localStorage
6. Token included in subsequent requests
7. Backend validates token for protected routes

Token Management

• Storage: localStorage for persistence
• Expiration: 24 hours (configurable)
• Refresh: Automatic refresh on valid requests
• Logout: Token removed from localStorage

Security Features

• Password Hashing: Bcrypt with salt rounds
• JWT Security: Secret key signing
• CORS Protection: Configured origins
• Route Protection: Decorator-based authorization