Skip to main content
8Space is a modern project management platform built with a scalable, multi-tenant architecture. The system uses a monorepo structure with separate packages for the landing page and core application.

​
Technology Stack

Frontend

  • React 19 with TypeScript
  • Vite for build tooling
  • TanStack Query for state management
  • Radix UI component primitives
  • Tailwind CSS for styling

Backend

  • Supabase (PostgreSQL)
  • Row Level Security (RLS)
  • Database functions for complex operations
  • Real-time subscriptions

Landing Page

  • Next.js 15 with App Router
  • React 19
  • MDX for content
  • Server-side rendering

Infrastructure

  • Monorepo with npm workspaces
  • Database migrations via Supabase CLI
  • Type-safe API layer

​
Architectural Principles

​
Repository Pattern

The application uses a repository pattern to abstract data access: 
// packages/app/src/domain/repositories/interfaces.ts
export interface ProjectRepository {
  listProjects(userId: string, tenantSlug: string): Promise<Project[]>;
  createProjectWithDefaults(tenantSlug: string, input: CreateProjectInput): Promise<Project>;
  getProjectMembers(projectId: string): Promise<ProjectMember[]>;
  listWorkflowColumns(projectId: string): Promise<WorkflowColumn[]>;
  updateProjectSettings(projectId: string, input: Pick<Project, 'name' | 'description'>): Promise<Project>;
}
This pattern provides:
  • Clear separation between business logic and data access
  • Easy testing with mock implementations
  • Single source of truth for data operations
  • Type safety across the application

​
Domain-Driven Design

Domain types are centralized in packages/app/src/domain/types.ts: 
export interface Project {
  id: string;
  tenantId: string;
  name: string;
  description?: string | null;
  createdBy: string;
  createdAt: string;
  archivedAt?: string | null;
  role: ProjectRole;
}

export interface Task {
  id: string;
  projectId: string;
  title: string;
  statusColumnId: string;
  assignees: UserProfile[];
  dueDate?: string | null;
  startDate?: string | null;
  priority: TaskPriority;
  orderRank: number;
  description?: string | null;
  tags: TaskLabel[];
  checklist: TaskChecklistItem[];
  attachments: TaskAttachment[];
  estimate?: number | null;
  completedAt?: string | null;
  isMilestone: boolean;
  createdAt: string;
  updatedAt: string;
}

​
Security-First Design

Security is enforced at the database level:
1

Row Level Security (RLS)

Every table has RLS enabled with policies controlling access
2

Security Definer Functions

Database functions run with elevated privileges but validate user permissions
3

Role-Based Access Control

Multi-level permissions: tenant roles and project roles
4

Authentication Context

All queries execute with auth.uid() context from Supabase Auth

​
Key Features

​
Multi-Tenancy

The platform supports multiple organizations (tenants) with isolated data:
  • Each tenant has its own workspace with projects
  • Projects belong to exactly one tenant
  • Users can be members of multiple tenants
  • Three-tier role hierarchy: tenant roles and project roles
Learn more about multi-tenancy →

​
Gantt Chart & Task Management

Comprehensive task management with dependencies:
  • Kanban workflow columns (backlog, todo, in_progress, done, custom)
  • Task dependencies (Finish-to-Start)
  • Task priorities (p0, p1, p2)
  • Assignees, labels, checklists, attachments
  • Milestones and estimates

​
Real-Time Collaboration

Built on Supabase real-time infrastructure:
  • Instant updates across connected clients
  • Optimistic UI updates with background sync
  • TanStack Query for caching and invalidation

​
Performance Optimization

Strategic indexes on frequently queried columns:
create index tasks_project_column_rank_idx on tasks (project_id, status_column_id, order_rank);
create index tasks_project_due_date_idx on tasks (project_id, due_date);
create index project_members_user_idx on project_members (user_id);
create index tenant_members_user_idx on tenant_members (user_id);
  • Materialized views for dashboard metrics
  • Database functions for complex aggregations
  • Single-query data fetching with JOINs
TanStack Query provides:
  • Automatic background refetching
  • Request deduplication
  • Optimistic updates
  • Stale-while-revalidate pattern

​
Development Workflow

# Start all services
npm run dev

# Start individual packages
npm run dev:app      # Main application (Vite)
npm run dev:landing  # Landing page (Next.js)

# Build for production
npm run build:app
npm run build:landing

​
Next Steps

Monorepo Structure

Explore the folder structure and workspace organization

Database Schema

Dive into the PostgreSQL schema and relationships

Multi-Tenancy

Understand the tenant isolation model

API Reference

Browse the unified API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us