# Organize Flow code

import { Aside, Steps, CardGrid, LinkCard } from "@astrojs/starlight/components";
import { FileTree } from '@astrojs/starlight/components';

This guide outlines best practices for organizing your pgflow codebase to improve maintainability, reusability, and clarity.

## How to structure your code

Following the pattern from [Create Flow](/get-started/flows/create-flow/), organize flows and tasks in underscore-prefixed folders using Supabase's pattern for shared code:

```bash frame="none"
mkdir -p supabase/functions/_flows supabase/functions/_tasks
```

<FileTree>
- supabase
  - functions
    - _flows
      - analyze_website.ts
    - _tasks
      - scrapeWebsite.ts
      - summarizeWithAI.ts
      - extractTags.ts
      - saveWebsite.ts
    - analyze_website_worker
      - index.ts
      - deno.json
</FileTree>

This structure enables:

- Sharing tasks across multiple flows
- Running multiple workers for the same flow (horizontal scaling)
- Clear separation of flow definitions from execution
- Standard Supabase pattern for shared code

## Learn more

<CardGrid>
  <LinkCard
    title="Create Reusable Tasks"
    href="/build/create-reusable-tasks/"
    description="How to design task functions that work well across multiple flows"
  />
  <LinkCard
    title="Naming flow steps"
    href="/concepts/naming-steps/"
    description="Best practices for naming steps in your flows"
  />
</CardGrid>

## Examples

<CardGrid>
  <LinkCard
    title="AI Web Scraper Tutorial"
    href="/tutorials/ai-web-scraper/"
    description="See the shared structure pattern in action with a complete real-world example"
  />
</CardGrid>