# WorldMetrics React Setup

This repository contains a minimal React application powered by [Vite](https://vitejs.dev/) and includes [D3.js](https://d3js.org/) for data visualization. Use it as a starting point for integrating other frontend libraries.

## Prerequisites

- [Node.js](https://nodejs.org/) (version 16 or higher recommended)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) package manager

## Installation

1. Install dependencies:
   ```bash
   npm install
   # or
   yarn install
   ```

2. Start the development server:
   ```bash
   npm start        # installs deps if missing
   # or
   yarn start
   # or
   npm run dev
   ```

Running `npm start` will automatically install dependencies the first time.

3. Open your browser to the address printed in the console (usually `http://localhost:5173`). The page now displays a metrics chart showing the number of World IDs over time.

## Building for Production

To create a production build:
```bash
npm run build
# or
yarn build
```
The compiled files will be placed in the `dist/` directory.

## Previewing the Build

After building, you can preview the production build locally:
```bash
npm run preview
# or
yarn preview
```

## Metrics Source

By default the app fetches metrics from `public/sample-data.json`. To query live
data from [Dune Analytics](https://dune.com/) provide a query ID and API key in a
`.env` file at the project root:

```env
VITE_DUNE_API_KEY=your_api_key
```

Update `DUNE_QUERY_ID` inside `src/WorldMetrics.jsx` with your query ID that
returns daily `date`, `world_ids`, and `verified_ids` columns.

## Adding Other Libraries

Install any additional libraries with `npm install <package>` or `yarn add <package>`, then import them into your React components as needed.