Skip to main content
8Space uses npm workspaces to manage a monorepo with two main packages: the landing page and the core application.

Root Configuration

packages/package.json

Package Overview

packages/landing

Marketing site built with Next.js 15Tech Stack:
  • Next.js 15.5.9 with App Router
  • React 19
  • Tailwind CSS + DaisyUI
  • MDX for content pages
  • Supabase Auth integration

packages/app

Main SaaS application built with ViteTech Stack:
  • React 19 with TypeScript
  • Vite 7 for build tooling
  • TanStack Query for data fetching
  • Radix UI primitives
  • Supabase client

Application Structure

Domain Layer Architecture

The packages/app/src/domain/ directory contains the core business logic:

Repository Interfaces

packages/app/src/domain/repositories/interfaces.ts

Type System

All domain types are defined in packages/app/src/domain/types.ts to ensure consistency across the application.
packages/app/src/domain/types.ts

Component Organization

Application Components

Located in packages/app/src/components/app/:
  • Kanban board components
  • Gantt chart components
  • Task detail panels
  • Project settings
  • Team management

UI Components

Located in packages/app/src/components/ui/:
  • Button, Input, Dialog (Radix UI wrappers)
  • Form components
  • Layout components
  • Theme-aware components with next-themes

Authentication Components

Located in packages/app/src/components/auth/:
  • Login/signup forms
  • OAuth provider buttons
  • Protected route wrappers

Dependency Management

Both packages share common dependencies:
These are installed at the workspace root and shared across packages.
packages/app/package.json
packages/landing/package.json

Build Configuration

Vite Configuration (App)

The main application uses Vite for fast development and optimized production builds:
packages/app/vite.config.ts

Next.js Configuration (Landing)

The landing page uses Next.js with MDX support:
packages/landing/next.config.mjs

Development Scripts

Migration Management

Database migrations are stored in packages/app/supabase/migrations/ with timestamp-based naming:
1

Create Migration

2

Write SQL

Add table definitions, functions, and policies
3

Apply Locally

4

Deploy

Best Practices

Type Safety

  • Use TypeScript strict mode
  • Define types in domain/types.ts
  • Generate types from database schema

Code Organization

  • Keep domain logic in domain/
  • Separate UI from business logic
  • Use repository pattern for data access

State Management

  • Use TanStack Query for server state
  • React Context for UI state
  • URL state for navigation

Testing

  • Mock repositories for unit tests
  • Integration tests with test database
  • E2E tests for critical paths

Next Steps

Database Schema

Explore the PostgreSQL schema and table relationships