---
title: HiveTrace Leaderboard
emoji: 🛡️
colorFrom: green
colorTo: indigo
sdk: docker
app_port: 5173
pinned: true
short_description: HiveTrace leaderboard frontend
tags:
  - leaderboard
  - sveltekit
  - docker
---

# HiveTrace Leaderboard frontend

## Overview

HiveTrace Leaderboard is a SvelteKit frontend for browsing guardrail benchmark results from
a private Hugging Face bucket.

The app uses:

- [SvelteKit](https://svelte.dev/)
- [pnpm](https://pnpm.io/) `11.9.0`
- [shadcn-svelte](https://www.shadcn-svelte.com/) and
  [shadcn-svelte-extras](https://www.shadcn-svelte-extras.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Paraglide JS](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) for localization

## Requirements

- Node.js `20.19.5` or newer
- pnpm `11.9.0`

## Setup

From the project root:

```bash
pnpm install
```

Create a local `.env` file from the example:

```bash
cp .env.example .env
```

Then configure a read token with access to the private Hugging Face bucket.

Required server-only environment variables:

```env
HF_TOKEN=hf_...
HF_BUCKET_ID=...
HF_BUCKET_PREFIX=latest
```

Do not rename `HF_TOKEN` to `PUBLIC_HF_TOKEN`. The token is used only on the SvelteKit server.
In production, pass it as a runtime secret, not as a Docker build argument.

## Development

```bash
pnpm dev
```

## Validation

Before pushing, format the code, run linting, run Svelte/TypeScript checks, and verify the
production build.

Format:

```bash
pnpm format
```

Lint:

```bash
pnpm lint
```

Check Tailwind utility classes:

```bash
pnpm tailwind:check
```

Check SvelteKit, TypeScript, and Svelte components:

```bash
pnpm check
```

Build:

```bash
pnpm build
```