Multi-Tenant Project Management System

A production-ready, full-stack project management application with strict organization-level data isolation. Built with Django, GraphQL, React, and TypeScript.

Overview

This application provides a complete project management solution where organizations can manage projects, tasks, and comments with complete data isolation. The system uses organization slug-based multi-tenancy to ensure no cross-organization data access.

Architecture

project-management-system/
│
├── backend/          # Django + GraphQL API
│   ├── core/         # Django project configuration
│   ├── projects/     # Main application (models, schema, admin)
│   ├── manage.py
│   └── requirements.txt
│
└── frontend/         # React + TypeScript application
    ├── src/
    │   ├── components/   # React components
    │   ├── graphql/      # GraphQL queries
    │   ├── lib/          # Apollo Client setup
    │   └── types/        # TypeScript interfaces
    ├── package.json
    └── vite.config.ts

Tech Stack

Backend

• Django 4.2.7 - Web framework
• Graphene-Django 3.1.5 - GraphQL implementation
• PostgreSQL - Database
• Python 3.10+ - Programming language

Frontend

• React 18.2 - UI framework
• TypeScript 5.2 - Type-safe JavaScript
• Bun - Fast package manager
• Vite - Build tool
• Apollo Client - GraphQL client
• TailwindCSS - Utility-first CSS
• shadcn/ui - Component library

Quick Start

Backend Setup

cd backend

# Create virtual environment
python -m venv venv
venv\Scripts\activate  # Windows
# source venv/bin/activate  # macOS/Linux

# Install dependencies
pip install -r requirements.txt

# Setup environment variables
cp .env.example .env
# Edit .env with your database credentials

# Create database (PostgreSQL)
# CREATE DATABASE projectmanagement;

# Run migrations
python manage.py makemigrations
python manage.py migrate

# Create superuser (optional)
python manage.py createsuperuser

# Start server
python manage.py runserver

Backend will be available at: http://localhost:8000 GraphQL playground: http://localhost:8000/graphql/

Frontend Setup

cd frontend

# Install Bun (if not installed)
# Windows: powershell -c "irm bun.sh/install.ps1 | iex"
# macOS/Linux: curl -fsSL https://bun.sh/install | bash

# Install dependencies
bun install

# Setup environment variables
cp .env.example .env
# Edit .env if needed

# Start development server
bun run dev

Frontend will be available at: http://localhost:3000

Multi-Tenancy Strategy

The application implements organization-level data isolation through:

Backend Enforcement

• Every GraphQL query and mutation requires an organizationSlug parameter
• All database queries filter by organization
• Resolver-level validation ensures organization exists
• Cascading foreign keys maintain referential integrity

Implementation Details

1. Organization Slug as Context

   • Passed explicitly in every GraphQL operation
   • Validates organization existence before processing
   • Returns empty results for invalid organizations

2. Query-Level Filtering

   # All queries filter by organization
   projects = Project.objects.filter(organization=org)
   tasks = Task.objects.filter(project__organization=org)

3. No Cross-Organization Access

   • Impossible to query data from other organizations
   • Even with valid IDs, organization check prevents access
   • Frontend enforces organization context on all requests

Production Considerations

In production, you would:

1. Add JWT authentication
2. Derive organization from authenticated user
3. Remove explicit organization slug from client
4. Middleware to set organization context automatically

Data Models

Organization

• Primary tenant entity
• Unique slug for identification
• Contact email and metadata

Project

• Belongs to an Organization
• Has multiple Tasks
• Tracks status (ACTIVE, COMPLETED, ON_HOLD)
• Due date tracking

Task

• Belongs to a Project (and indirectly to Organization)
• Status tracking (TODO, IN_PROGRESS, DONE)
• Assignee via email
• Due date tracking

TaskComment

• Belongs to a Task
• Author via email
• Timestamped content

GraphQL API

Example Queries

List Projects

query {
  projects(organizationSlug: "acme-corp", status: "ACTIVE") {
    id
    name
    taskCount
    completedTasks
    completionPercentage
  }
}

Get Project with Tasks

query {
  project(id: "1", organizationSlug: "acme-corp") {
    id
    name
    tasks {
      id
      title
      status
    }
  }
}

Example Mutations

Create Project

mutation {
  createProject(
    organizationSlug: "acme-corp"
    name: "Website Redesign"
    status: "ACTIVE"
    dueDate: "2024-12-31"
  ) {
    success
    project {
      id
      name
    }
  }
}

Update Task Status

mutation {
  updateTask(id: "1", organizationSlug: "acme-corp", status: "DONE") {
    success
    task {
      id
      status
    }
  }
}

See backend/README.md for complete API documentation.

Features

Project Management

• Create, read, update projects
• Filter by status (Active, Completed, On Hold)
• Search projects by name
• Track task statistics and completion percentage
• Due date management

Task Management

• Kanban-style board view
• Create and update tasks
• Status tracking (To Do, In Progress, Done)
• Assignee management via email
• Due date tracking
• Task comments/discussions

UI/UX

• Minimal, professional design
• Pure grayscale color scheme
• shadcn/ui components
• Responsive layout
• Loading and error states
• Optimistic UI updates

Design Principles

Minimalism

• No unnecessary colors
• Clean typography
• Ample whitespace
• Clear visual hierarchy

Color Palette

• Black (#000000) - Background
• White (#FFFFFF) - Primary text, buttons
• Gray scales - Borders, secondary text, hover states
• No other colors used

Component Design

• Consistent shadcn/ui components
• Subtle transitions
• Clear interactive states
• Accessible by default

Development Workflow

Backend Development

1. Modify models in backend/projects/models.py
2. Create migrations: python manage.py makemigrations
3. Apply migrations: python manage.py migrate
4. Update GraphQL schema in backend/projects/schema.py
5. Test in GraphiQL: http://localhost:8000/graphql/

Frontend Development

1. Define TypeScript types in frontend/src/types/
2. Create/update GraphQL queries in frontend/src/graphql/
3. Build React components in frontend/src/components/
4. Style with TailwindCSS utility classes
5. Test in browser: http://localhost:3000

Testing Strategy

Backend Testing

# Example test structure
from django.test import TestCase
from projects.models import Organization, Project

class ProjectTestCase(TestCase):
    def setUp(self):
        self.org = Organization.objects.create(
            name="Test Org",
            slug="test-org"
        )

    def test_project_creation(self):
        project = Project.objects.create(
            organization=self.org,
            name="Test Project"
        )
        self.assertEqual(project.organization, self.org)

Frontend Testing

• Component testing with React Testing Library
• GraphQL mocking with Apollo MockedProvider
• Type safety with TypeScript strict mode

Security Considerations

Current Implementation

• Organization slug-based isolation
• CORS configured for development
• CSRF protection enabled
• SQL injection prevention (Django ORM)

Production Requirements

1. Authentication: JWT tokens
2. Authorization: Role-based access control
3. HTTPS: SSL/TLS encryption
4. Rate Limiting: Prevent API abuse
5. Input Validation: Sanitize all inputs
6. Environment Variables: Secure credential management

Performance Optimizations

Backend

• Database indexes on foreign keys
• Query optimization with select_related/prefetch_related
• Efficient resolver implementation

Frontend

• Apollo Client caching
• Optimistic UI updates
• Code splitting with React lazy loading
• Vite build optimization

Scalability Considerations

Database

• PostgreSQL connection pooling
• Read replicas for query scaling
• Proper indexing strategy

Application

• Stateless backend for horizontal scaling
• CDN for frontend assets
• Caching layer (Redis) for frequent queries

Future Improvements

• GraphQL subscriptions for real-time updates
• Background job processing (Celery)
• Full-text search (Elasticsearch)
• File storage (S3/CloudFlare R2)

Deployment

Backend Deployment

1. Set up PostgreSQL database
2. Configure environment variables
3. Run migrations
4. Collect static files: python manage.py collectstatic
5. Use gunicorn/uwsgi for WSGI server
6. Set up nginx for reverse proxy

Frontend Deployment

1. Build production bundle: bun run build
2. Deploy dist/ folder to static hosting
3. Configure environment variables
4. Set up CDN for assets

Recommended Platforms

• Backend: Railway, Render, DigitalOcean, AWS
• Frontend: Vercel, Netlify, Cloudflare Pages
• Database: Supabase, Railway, managed PostgreSQL

Troubleshooting

Database Connection Issues

• Verify PostgreSQL is running
• Check database credentials in .env
• Ensure database exists: CREATE DATABASE projectmanagement;

CORS Errors

• Check CORS_ALLOWED_ORIGINS in backend settings
• Verify frontend is using correct API URL
• Ensure both servers are running

GraphQL Errors

• Check GraphiQL for query syntax
• Verify organization slug is valid
• Check backend logs for detailed errors

Build Issues

• Clear node_modules: rm -rf node_modules && bun install
• Check Bun version: bun --version
• Verify environment variables are set

Contributing

Code Style

• Python: PEP 8, black formatter
• TypeScript: ESLint, Prettier
• Git: Conventional commits

Pull Request Process

1. Create feature branch
2. Make changes with tests
3. Update documentation
4. Submit PR with clear description

License

This project is created for technical assessment purposes.

Support

For questions or issues:

1. Check documentation in backend/README.md and frontend/README.md
2. Review GraphQL schema in GraphiQL
3. Check browser console for frontend errors
4. Review Django logs for backend errors

Technical Decisions

Why GraphQL?

• Single endpoint for all operations
• Strong typing with schema
• Efficient data fetching
• Great developer experience

Why Bun?

• Fast package installation
• Native TypeScript support
• Modern JavaScript runtime
• Better performance than npm/yarn

Why shadcn/ui?

• Copy-paste components (full control)
• Built on Radix UI (accessible)
• TailwindCSS integration
• No runtime dependency

Why Organization Slug?

• URL-friendly identification
• Human-readable
• Easy to implement
• Simple multi-tenancy

Future Enhancements

Features

• Real-time collaboration
• File attachments
• Activity timeline
• Advanced search and filtering
• Dashboard analytics
• Team member management
• Project templates
• Email notifications

Technical

• GraphQL subscriptions
• Comprehensive test suite
• CI/CD pipeline
• Docker support
• API documentation generation
• Performance monitoring
• Error tracking (Sentry)

Acknowledgments

• Django and Graphene-Django communities
• React and TypeScript teams
• shadcn for the excellent UI components
• TailwindCSS for utility-first CSS

---

Built with attention to detail, clean architecture, and production-ready practices.