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

# Connect Your Frontend

> Fetch CubeStack data from your frontend application.

# Connect Your Frontend

Use the CubeStack API to display data in your web application.

## Using Fetch API

```javascript theme={null}
const API_URL = 'https://api.cubestack.app/api/v1/my-project';

async function getProducts() {
  const response = await fetch(`${API_URL}/products`);
  const { data } = await response.json();
  return data;
}
```

<Note>
  For public cubes, no authentication is needed. Only public columns are returned.
</Note>

## React Example

```jsx theme={null}
import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://api.cubestack.app/api/v1/my-project/products')
      .then(res => res.json())
      .then(({ data }) => setProducts(data));
  }, []);

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name} - ${product.price}</li>
      ))}
    </ul>
  );
}
```

## Next.js Example

```javascript theme={null}
export async function getStaticProps() {
  const res = await fetch('https://api.cubestack.app/api/v1/my-project/products');
  const { data } = await res.json();

  return {
    props: { products: data },
    revalidate: 60
  };
}
```

## Server-Side with API Key

For server-side code, use your API key for full access:

```javascript theme={null}
const response = await fetch(`${API_URL}/products`, {
  headers: { 'X-Api-Key': process.env.CUBESTACK_API_KEY }
});
```

<Warning>
  Never expose your API key in client-side code. Use public access for browser requests.
</Warning>