> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Ge0frey/nullgraph/llms.txt
> Use this file to discover all available pages before exploring further.

# Local Development Setup

> Complete guide to setting up your local NullGraph development environment

## Prerequisites

Before you begin, ensure you have the following installed on your system:

* **[Rust](https://rustup.rs/)** (stable) - Required for building the Solana program
* **[Solana CLI](https://docs.solana.com/cli/install-solana-cli-tools)** (v1.18+) - Command-line tools for Solana development
* **[Anchor CLI](https://www.anchor-lang.com/docs/installation)** (v0.31.1) - Framework for Solana program development
* **[Node.js](https://nodejs.org/)** (v18+) - JavaScript runtime for the frontend
* **[Phantom Wallet](https://phantom.app/)** browser extension - For transaction signing (set to devnet)

<Note>
  Make sure your Phantom wallet is configured to use **devnet** before testing the application.
</Note>

## Installation

<Steps>
  <Step title="Clone the repository">
    Clone the NullGraph repository to your local machine:

    ```bash theme={null}
    git clone <repository-url>
    cd nullgraph
    ```
  </Step>

  <Step title="Install root dependencies">
    Install the root-level dependencies for the Anchor workspace:

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

    This installs Anchor testing utilities and TypeScript dependencies.
  </Step>

  <Step title="Install frontend dependencies">
    Navigate to the frontend directory and install React dependencies:

    ```bash theme={null}
    cd app && npm install && cd ..
    ```

    This installs React 19, Vite 7.3, Tailwind CSS v4, Solana wallet adapters, and all frontend dependencies.
  </Step>

  <Step title="Configure Solana CLI">
    Set your Solana CLI to point to devnet:

    ```bash theme={null}
    solana config set --url devnet
    ```

    Verify your configuration:

    ```bash theme={null}
    solana config get
    ```
  </Step>

  <Step title="Generate a keypair (if needed)">
    If you don't have a Solana keypair for devnet development, generate one:

    ```bash theme={null}
    solana-keygen new --outfile ~/.config/solana/nullgraph.json
    ```

    <Warning>
      Keep your keypair secure. Never commit keypair files to version control.
    </Warning>
  </Step>

  <Step title="Airdrop devnet SOL">
    Request devnet SOL for deployment and testing:

    ```bash theme={null}
    solana airdrop 2
    ```

    Check your balance:

    ```bash theme={null}
    solana balance
    ```
  </Step>
</Steps>

## Building the Program

Build the Anchor program to compile the Rust code:

```bash theme={null}
anchor build
```

This command:

* Compiles the Solana program in `programs/nullgraph/src/lib.rs`
* Generates the IDL (Interface Definition Language) file in `target/idl/nullgraph.json`
* Generates TypeScript types in `target/types/nullgraph.ts`
* Creates the compiled program binary in `target/deploy/`

<Note>
  The program ID is declared in `Anchor.toml` under `[programs.devnet]`: `2u3DXQq9A6UgMryeVSWCNdYLy3Fjh391R5hcfWYkCgZK`
</Note>

## Running the Frontend

<Steps>
  <Step title="Navigate to the app directory">
    ```bash theme={null}
    cd app
    ```
  </Step>

  <Step title="Start the development server">
    ```bash theme={null}
    npm run dev
    ```

    The frontend will be available at **[http://localhost:5173](http://localhost:5173)**
  </Step>

  <Step title="Connect your wallet">
    Open [http://localhost:5173](http://localhost:5173) in your browser and click the wallet button in the navigation bar to connect your Phantom wallet.
  </Step>
</Steps>

## Environment Variables

The frontend accepts optional environment variables for configuration:

| Variable       | Default                         | Description              |
| -------------- | ------------------------------- | ------------------------ |
| `VITE_RPC_URL` | `https://api.devnet.solana.com` | Solana JSON-RPC endpoint |

To customize, create a `.env` file in the `app/` directory:

```bash theme={null}
# app/.env
VITE_RPC_URL=https://api.devnet.solana.com
```

<Note>
  Both variables are optional. The defaults point to the devnet deployment.
</Note>

## Rebuilding IDL After Program Changes

Whenever you modify the Anchor program (`programs/nullgraph/src/lib.rs`), you must rebuild and update the frontend IDL:

```bash theme={null}
anchor build
cp target/idl/nullgraph.json app/src/lib/nullgraph.json
cp target/types/nullgraph.ts app/src/lib/nullgraph_types.ts
```

This ensures the frontend's Anchor client stays in sync with the on-chain program interface.

## Project Structure

```
nullgraph/
├── Anchor.toml                          # Anchor config (cluster, program ID, wallet)
├── Cargo.toml                           # Rust workspace manifest
├── programs/
│   └── nullgraph/
│       ├── Cargo.toml
│       └── src/
│           └── lib.rs                   # All accounts, instructions, events, errors (~593 lines)
├── tests/
│   └── nullgraph.ts                     # Anchor integration tests
├── scripts/
│   └── init-protocol.ts                 # One-time protocol initialization script
└── app/
    ├── package.json
    ├── vite.config.ts
    └── src/
        ├── main.tsx                     # React DOM entry
        ├── App.tsx                      # Provider stack + routes
        ├── lib/
        │   ├── nullgraph.json           # Compiled IDL
        │   └── nullgraph_types.ts       # Generated TypeScript types
        ├── hooks/                       # React hooks for data fetching and transactions
        ├── components/                  # UI components
        └── pages/                       # Route pages
```

## Next Steps

Now that your local environment is set up:

1. Learn how to run the [test suite](/development/testing)
2. Deploy your program to [devnet](/development/deployment)
3. Explore the [program architecture](/protocol/architecture)