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

# Intro to GoalGen

> Learn about GoalGen, the vision board app for goal visualization and task management

## What is GoalGen?

GoalGen is a **vision board application** that helps you visualize goals, manage tasks, and bring your aspirations to life on an interactive canvas. Built with Next.js 16, React 19, and Konva, it combines modern web tech with an intuitive drag-and-drop experience.

<Info>
  GoalGen runs as a Next-forge monorepo with separate apps for the web UI, API, docs, and more. The canvas is fully client-side for smooth interactions.
</Info>

## Core features

<CardGroup cols={2}>
  <Card title="Interactive canvas" icon="palette" href="/quickstart">
    Drag, drop, and arrange goals on a visual board. Powered by Konva for smooth 2D rendering.
  </Card>

  <Card title="Task management" icon="list-checks" href="/quickstart">
    Break goals into actionable tasks. Track progress and stay organized.
  </Card>

  <Card title="Offline support" icon="wifi-off" href="/quickstart">
    LocalStorage caching keeps your boards available even without a connection.
  </Card>

  <Card title="Real-time sync" icon="arrows-rotate" href="/quickstart">
    Changes sync to the database when you're back online. Best of both worlds.
  </Card>
</CardGroup>

## Quick start

Follow these steps to get GoalGen running locally.

<Steps>
  <Step title="Clone the repository">
    Clone the GoalGen monorepo from your Git provider. The docs live in `apps/docs`.
  </Step>

  <Step title="Install dependencies">
    From the repo root, run `pnpm install` (or `npm install`). This installs all workspace packages.
  </Step>

  <Step title="Set up environment">
    Copy `.env.example` to `.env.local` and add your API keys. Clerk can be disabled for local dev.
  </Step>

  <Step title="Run the app">
    Start the web app with `pnpm dev` in `apps/app`, or preview docs with `pnpm dev` in `apps/docs`.
  </Step>
</Steps>

<Tip>
  The docs site runs on port 3004 by default. Run `cd apps/docs && npm run dev` to preview this page locally.
</Tip>

## Tech stack at a glance

Choose your package manager to see the install command:

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm install
  ```

  ```bash npm theme={null}
  npm install
  ```

  ```bash yarn theme={null}
  yarn install
  ```
</CodeGroup>

| Layer     | Technology                             |
| --------- | -------------------------------------- |
| Framework | Next.js 16 (App Router)                |
| UI        | React 19, Tailwind CSS 4               |
| Canvas    | Konva, react-konva                     |
| Auth      | Clerk                                  |
| Database  | Prisma (Neon / Supabase / PlanetScale) |
| AI        | Vercel AI SDK                          |

## Callout examples

Mintlify provides callouts for different types of information:

<Note>
  **Note** — Supplementary info that's safe to skip. Use for optional context.
</Note>

<Info>
  **Info** — Helpful context like permissions or prerequisites. Node.js 18+ is required for the Mintlify CLI.
</Info>

<Tip>
  **Tip** — Recommendations and best practices. Keep your boards focused on 3–5 main goals for clarity.
</Tip>

<Warning>
  **Warning** — Potentially destructive actions. Canvas components must use `'use client'` because Konva cannot be server-rendered.
</Warning>

<Check>
  **Check** — Success confirmation. Your board has been saved to the cloud.
</Check>

## Expandable content

Use `<Expandable>` to hide optional details until the user needs them.

<Expandable title="Canvas architecture details">
  The canvas is client-side only. All Konva components use `'use client'`. State is managed via React Context, with localStorage for immediate caching and a debounced sync to the database. This gives you offline support and fast load times.
</Expandable>

<Expandable title="Future roadmap">
  Planned features include calendar integration for goal deadlines, a marketplace for templates, and AI-assisted goal suggestions. The monorepo is structured to support these additions as new packages.
</Expandable>

## Accordion FAQ

<AccordionGroup>
  <Accordion icon="circle-question" title="Is GoalGen free?">
    GoalGen offers a free tier for personal use. Team and enterprise plans include collaboration features and priority support.
  </Accordion>

  <Accordion icon="database" title="Where is my data stored?">
    Boards are stored in your database (Neon, Supabase, or PlanetScale). LocalStorage provides offline caching. Your data stays in your infrastructure.
  </Accordion>

  <Accordion icon="paintbrush" title="Can I customize the canvas?">
    Yes. The design system uses shadcn/ui components. You can theme colors, fonts, and layouts via Tailwind and CSS variables.
  </Accordion>
</AccordionGroup>

## Tabs for options

Use tabs when users need to choose between a few distinct options:

<Tabs>
  <Tab title="Web app">
    The main GoalGen experience runs in the browser. No installation required. Works on desktop and mobile.
  </Tab>

  <Tab title="API">
    GoalGen exposes REST endpoints for boards, tasks, and user data. Integrate with your own tools or build custom clients.
  </Tab>

  <Tab title="Docs">
    This documentation site is built with Mintlify. It deploys automatically when you push to the connected Git repo.
  </Tab>
</Tabs>

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get your development environment set up and run the app locally.
  </Card>

  <Card title="Creator Studio" icon="paintbrush" href="/creator-studio/overview">
    Templates, library workflow, and roles for creators and admins.
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/introduction">
    Explore the API endpoints for boards, tasks, and authentication.
  </Card>
</CardGroup>