> ## Documentation Index
> Fetch the complete documentation index at: https://docs.8space.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 8Space Documentation

> Open source team planning tool with Backlog, Kanban, Timeline, and Dashboard views

<div className="relative bg-gradient-to-br from-[#6366f1] via-[#4f46e5] to-[#4338ca] dark:from-[#4f46e5] dark:via-[#4338ca] dark:to-[#3730a3] py-20">
  <div className="max-w-6xl mx-auto px-6">
    <div className="text-center">
      <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6">
        Welcome to 8Space
      </h1>

      <p className="text-lg sm:text-xl text-white/90 max-w-2xl mx-auto mb-8">
        Open source team planning tool with Backlog, Kanban, Timeline (Gantt), and Dashboard views. Everything you need to plan, track, and ship your projects.
      </p>

      <div className="flex flex-col sm:flex-row gap-4 justify-center items-center flex-wrap">
        <a href="/quickstart" className="inline-flex items-center px-6 py-3 bg-white text-[#6366f1] font-semibold rounded-lg hover:bg-gray-100 transition-colors no-underline">
          Get started
        </a>

        <a href="/api/overview" className="inline-flex items-center px-6 py-3 border-2 border-white/30 bg-white/10 text-white font-semibold rounded-lg hover:bg-white/20 transition-colors no-underline">
          API reference
        </a>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
    Quick start
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Get 8Space running locally in minutes
  </p>

  <Steps>
    <Step title="Install dependencies">
      Clone the repository and install dependencies from the project root:

      ```bash theme={null}
      git clone https://github.com/AndreyMishurin/8Space.git
      cd 8Space
      npm install
      ```
    </Step>

    <Step title="Start Supabase">
      Initialize and start the local Supabase instance with seed data:

      ```bash theme={null}
      cd packages/app
      supabase start
      supabase db reset
      cd ../..
      ```

      <Note>
        This creates a local PostgreSQL database with all schema migrations and seed data including test accounts.
      </Note>
    </Step>

    <Step title="Configure environment">
      Set up environment variables for the app. Copy the Supabase connection details:

      ```bash theme={null}
      VITE_SUPABASE_URL=http://127.0.0.1:54321
      VITE_SUPABASE_ANON_KEY=<your-anon-key>
      ```

      <Info>
        For the landing page, add `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY`, plus Stripe/Resend keys if needed.
      </Info>
    </Step>

    <Step title="Start the dev environment">
      Run all services together with the unified dev script:

      ```bash theme={null}
      npm run dev
      ```

      Access the application:

      * **Landing**: [http://localhost:3000](http://localhost:3000)
      * **App**: [http://localhost:5173/app/](http://localhost:5173/app/)
      * **Swagger UI**: Printed in console output

      <Accordion title="Test accounts">
        Use these credentials to log in (password: `password123`):

        * `owner@gantt.local` - Owner role
        * `editor@gantt.local` - Editor role
        * `viewer@gantt.local` - Viewer role
      </Accordion>
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
    Core features
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Explore the key capabilities of 8Space
  </p>

  <CardGroup cols={2}>
    <Card title="Backlog management" icon="list-check" href="/features/backlog">
      Prioritize and organize tasks in your product backlog with drag-and-drop support
    </Card>

    <Card title="Kanban boards" icon="columns-3" href="/features/kanban">
      Visualize work in progress with customizable workflow columns and WIP limits
    </Card>

    <Card title="Timeline view" icon="chart-gantt" href="/features/timeline">
      Plan and track project schedules with interactive Gantt charts and dependencies
    </Card>

    <Card title="Dashboard" icon="chart-line" href="/features/dashboard">
      Monitor project health with real-time metrics, workload, and completion trends
    </Card>

    <Card title="Task management" icon="clipboard-check" href="/features/task-management">
      Create tasks with assignments, due dates, priorities, checklists, and attachments
    </Card>

    <Card title="Collaboration" icon="users" href="/features/collaboration">
      Work together with multi-tenant workspaces and role-based access control
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
    Explore the documentation
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Learn how to configure, extend, and deploy 8Space
  </p>

  <CardGroup cols={3}>
    <Card title="Installation guide" icon="download" href="/installation">
      Detailed setup instructions for local development and production
    </Card>

    <Card title="Configuration" icon="gear" href="/configuration/environment-variables">
      Configure environment variables, database, auth, and billing
    </Card>

    <Card title="Architecture" icon="sitemap" href="/architecture/overview">
      Understand the monorepo structure and multi-tenant design
    </Card>

    <Card title="Database schema" icon="database" href="/architecture/database-schema">
      Explore the PostgreSQL schema and data model
    </Card>

    <Card title="API overview" icon="code" href="/api/overview">
      Learn about the unified API for landing and app services
    </Card>

    <Card title="Authentication" icon="shield-halved" href="/api/authentication">
      Integrate Supabase Auth for user authentication
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="bg-gray-50 dark:bg-[#1a1d27] border border-gray-200 dark:border-[#27272a] rounded-2xl p-8 text-center">
    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
      Ready to get started?
    </h2>

    <p className="text-base text-gray-600 dark:text-gray-400 mb-6 max-w-xl mx-auto">
      Follow the quickstart guide to set up 8Space locally and start managing your projects
    </p>

    <a href="/quickstart" className="inline-flex items-center px-6 py-3 bg-[#6366f1] text-white font-semibold rounded-lg hover:bg-[#4f46e5] transition-colors no-underline">
      View quickstart guide
    </a>
  </div>
</div>