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

# Command

> Learn how to use the development commands

<Note>
  For basic setup instructions, see the [Quickstart Guide](./quickstart).
</Note>

## Development Scripts

Here are the available development commands:

<CodeGroup>
  ```bash Start all services theme={null}
  pnpm dev         # Start all services using Turborepo
  ```

  ```bash Start admin panel only theme={null}
  pnpm admin:dev   # Start the admin panel at http://localhost:5173
  ```

  ```bash Start API only theme={null}
  pnpm api:dev     # Start the API server at http://localhost:8787
  ```
</CodeGroup>

## Environment Variables

### API Variables

For API environment variables, check `/apps/api/.env.example`.

<Accordion title="Available Environment Variables for API">
  * `DATABASE_URL`: Database connection string, you can get it from [Neon Console](https://console.neon.tech)
    after creating a new database
  * `JWT_SECRET`: JWT secret key, use `openssl rand -base64 32` to generate
  * `COOKIE_KEY`: Cookie key, it uesed to be cookie name to store JWT token.
    You can use any string as the cookie key, but it should be the same as the one in the admin frontend.
    default to `token`
</Accordion>

### Admin Frontend Variables

For Admin Frontend environment variables, check `/apps/admin/.env.example`.

<Accordion title="Available Environment Variables for Admin Frontend">
  * `VITE_APP_NAME`: Application name, it will be used as the title of the admin panel
  * `VITE_API_URL`: API endpoint URL, it will be used to fetch data from the API
  * `VITE_ENABLE_DEVTOOLS`: Enable/disable development tools, default to `false`
  * `VITE_EDITOR`: Editor configuration, default to `vscode`, you can use `cursor` if you are using Cursor IDE
</Accordion>

## Testing

The project includes several testing utilities:

```bash theme={null}
# Run tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

## Component Development

We use Storybook for component development and testing:

```bash theme={null}
# Start Storybook
pnpm storybook   # Available at http://localhost:6006

# Build Storybook
pnpm build-storybook
```

## Documentation

To work on the documentation locally:

```bash theme={null}
# Start documentation site
pnpm docs:dev    # Available at http://localhost:3004

# Build documentation
pnpm docs:build

# Check for broken links
pnpm docs:lint
```

## Code Quality

The project uses several tools to maintain code quality:

* **ESLint**: For code linting
* **simple-git-hooks**: For pre-commit checks
* **lint-staged**: For running linters on staged files
* **commitlint**: For commit message conventions

```bash theme={null}
# Fix linting issues
pnpm lint:fix
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Can't run the development script">
    If you're having trouble running the development script:

    1. Make sure you have installed the project dependencies using [pnpm](https://pnpm.io)
    2. Make sure you have set up the environment variables correctly

    <Warning>
      Sometimes environment variables will change because the project is still under development and not yet stable.
      This requires you to manually compare the variables in the sample file with those actually used. We are very sorry for the inconvenience.
    </Warning>
  </Accordion>
</AccordionGroup>

## Next Steps

* Learn about our [routing system](./routing)
* Explore [state management](./state-management)
* Read the [deployment guide](./deploy)