Skip to main content

Overview

This guide covers detailed installation steps for 8Space, including system requirements, dependency setup, database configuration, and deployment options.
For a faster getting started experience, see the Quickstart guide.

System requirements

Required software

Optional software

  • Python 3 (for Swagger UI dev server)
  • PostgreSQL client (for direct database access)

Operating system support

8Space is tested on:
  • macOS 12+ (Apple Silicon and Intel)
  • Ubuntu 20.04+ and Debian-based Linux
  • Windows 10+ with WSL2
Windows users should use WSL2 for the best development experience. Native Windows support for Supabase CLI can be limited.

Installation methods

Choose the installation method that fits your needs:
Complete setup for local development with hot reload and debugging.

Local development setup

Follow these steps for a complete local development environment.

Step 1: Install Node.js and npm

Verify installation:

Step 2: Install Supabase CLI

Verify installation:

Step 3: Install Docker

Supabase local development requires Docker to run PostgreSQL and other services.
Verify Docker is running:
On Linux, you may need to log out and back in after adding your user to the docker group.

Step 4: Clone the repository

Clone 8Space from GitHub:
Check the repository structure:

Step 5: Install dependencies

Install all workspace dependencies from the root:
This installs dependencies for:
  • Root workspace
  • packages/landing (Next.js landing page)
  • packages/app (React + Vite main application)
The root package.json defines a workspace:
This allows npm to:
  • Hoist common dependencies to the root node_modules
  • Link workspace packages together
  • Run workspace-specific commands with -w flag
Example:

Step 6: Configure Supabase

Initialize and start the local Supabase instance:
The CLI:
  1. Pulls Docker images for:
    • PostgreSQL 15 (database)
    • PostgREST (auto-generated REST API)
    • GoTrue (authentication)
    • Realtime (WebSocket subscriptions)
    • Storage (file uploads)
    • Kong (API gateway)
    • Supabase Studio (admin UI)
  2. Starts containers with ports:
    • 54321 - API Gateway
    • 54322 - PostgreSQL direct connection
    • 54323 - Supabase Studio
    • 55324 - Inbucket (email testing)
  3. Outputs connection details:
  4. Applies migrations from supabase/migrations/
Important: Save the output from supabase start, especially:
  • anon key (for client-side auth)
  • service_role key (for admin operations)

Step 7: Apply migrations and seed data

Reset the database to apply all migrations and seed test data:
This command:
  1. Drops and recreates the database
  2. Applies migrations in order:
    • 20260212220000_init_gantt_mvp.sql - Core schema
    • 20260213220000_auto_join_new_users.sql - User onboarding
    • 20260213220100_handle_new_user_google_compat.sql - Google OAuth
    • 20260216220000_fix_create_project_trigger_conflict.sql - Bug fix
    • 20260217143000_multi_tenant_onboarding.sql - Multi-tenancy
  3. Runs seed.sql to create:
    • 3 test users (owner, editor, viewer)
    • 1 demo tenant (“8Space Demo”)
    • 1 demo project (“Product Launch Q2”)
    • 5 sample tasks with dependencies
The seed data is defined in packages/app/supabase/seed.sql. You can modify it to create custom test data.

Step 8: Configure environment variables

Create environment files for both packages. App environment (packages/app/.env):
Landing environment (packages/landing/.env.local):
Never commit .env or .env.local files to version control. These files are already in .gitignore.
To enable Google sign-in:
  1. Create OAuth credentials in Google Cloud Console
  2. Add authorized redirect URI: http://127.0.0.1:54321/auth/v1/callback
  3. Copy Client ID and Secret
  4. Edit packages/app/supabase/config.toml:
  5. Restart Supabase:

Step 9: Start the development environment

Run all services with the unified dev script:
This starts:
  1. Landing page (packages/landing)
    • Next.js dev server on http://localhost:3000
    • Hot reload enabled
    • API routes at /api/*
  2. Main app (packages/app)
    • Vite dev server on http://localhost:5173/app/
    • Fast HMR (Hot Module Replacement)
    • React DevTools compatible
  3. Swagger UI (from docs/api/)
    • Auto-assigned port (default: 55027)
    • Serves OpenAPI spec at /openapi.yaml
    • Interactive API testing
The console shows:
Press Ctrl+C in the terminal to stop all services gracefully. The script handles cleanup automatically.

Step 10: Verify the installation

Test your setup:
  1. Open the app: http://localhost:5173/app/
  2. Log in with test account:
    • Email: owner@gantt.local
    • Password: password123
  3. Explore features:
    • Switch between Backlog, Kanban, Timeline, and Dashboard views
    • Create a new task
    • Drag tasks between columns
    • View task dependencies in Timeline
  4. Check Supabase Studio: http://localhost:54323
    • Browse tables in Table Editor
    • View auth users
    • Run SQL queries
  5. Test API docs: http://127.0.0.1:55027
    • Browse endpoints in Swagger UI
    • Test API calls directly

Production deployment

For production deployment, you’ll need:
  1. Production Supabase project (Supabase Cloud or self-hosted)
  2. Frontend hosting (Vercel, Netlify, or custom server)
  3. Custom domain (optional but recommended)

Create a Supabase project

1

Sign up for Supabase

Create a free account at supabase.com or set up a self-hosted instance.
2

Create a new project

In the Supabase dashboard:
  • Click New project
  • Choose a name and region
  • Set a strong database password
  • Wait for provisioning (2-3 minutes)
3

Run migrations

Link your local project and push migrations:
This applies all migrations from supabase/migrations/ to production.
4

Configure environment variables

Get your production credentials from the Supabase dashboard:
  • Project Settings > API
  • Copy Project URL and anon public key
Update your production environment:

Deploy to Vercel

8Space is optimized for deployment on Vercel.
1

Prepare the repository

Commit your changes and push to GitHub:
2

Import project to Vercel

  1. Sign up at vercel.com
  2. Click Add New Project
  3. Import your GitHub repository
  4. Vercel auto-detects the Next.js app in packages/landing
3

Configure build settings

Set the root directory:
  • Root Directory: packages/landing
  • Build Command: npm run build
  • Output Directory: .next
4

Add environment variables

In Vercel project settings, add:
5

Deploy

Click Deploy and wait for the build to complete. Vercel provides a URL: https://your-app.vercel.app
For the React app (packages/app), you’ll need to build and serve it separately or include it in the same deployment with appropriate routing.

Deploy the React app

Build the Vite app for production:
This creates an optimized build in dist/. Serve it with:
  • Static hosting: Upload dist/ to Netlify, Vercel, or S3 + CloudFront
  • Custom server: Use Nginx, Apache, or Node.js serve
Example Nginx configuration:

Database management

Creating migrations

When you modify the database schema:
This creates a new file in supabase/migrations/ with a timestamp prefix. Edit the file to add your SQL changes:
Apply the migration locally:

Rolling back migrations

To undo the last migration:

Viewing migration status

Check which migrations are applied:

Troubleshooting

Error: Cannot connect to the Docker daemonSolution:
Error: Port 54321 is already in useSolution: Stop conflicting services or change ports in packages/app/supabase/config.toml:
Then update your .env file accordingly.
Error: Migration failed: relation already existsSolution: Reset the database completely:
Error: Invalid JWT or User not foundSolution:
  1. Verify VITE_SUPABASE_ANON_KEY matches supabase status output
  2. Check packages/app/supabase/config.toml has:
  3. Clear browser localStorage and cookies
  4. Restart Supabase:
Error: ERESOLVE unable to resolve dependency treeSolution:
Error: Transform failed with 1 error or Cannot find moduleSolution:
  1. Clear Vite cache:
  2. Restart dev server
  3. Check TypeScript errors:

Advanced configuration

Custom Supabase configuration

Edit packages/app/supabase/config.toml to customize:
Restart Supabase after changes:

Environment-specific configurations

Use different .env files for each environment:
Load them based on NODE_ENV:

Next steps

Configuration

Learn about all available environment variables and configuration options.

Database schema

Deep dive into the PostgreSQL schema and data relationships.

Authentication

Set up email, Google OAuth, and other authentication providers.

API reference

Explore the REST API and integrate with external services.