***

title: Making API Calls
subtitle: How to integrate with CPS APIs in your application
slug: making-api-calls
----------------------

Learn how to make HTTP requests to CPS APIs for photo browsing, order management, and system integration.

## HTTP Methods

CPS APIs use standard REST HTTP methods:

* **GET**: Retrieve data (events, photos, orders)
* **POST**: Create resources (orders, feedback)
* **PUT**: Update resources (order status)

## Base URLs

Use the appropriate base URL for each platform:

```javascript
const GALLERY_API = 'https://photos.conventionphotography.com';
const ORDERING_API = 'https://convention.photos';
const ORDERS_API = 'https://cps-orders.replit.app/api';
```

## Request Headers

Include standard headers for all requests:

```javascript
const headers = {
  'Content-Type': 'application/json',
  'User-Agent': 'Your-App-Name/1.0'
};
```

## Response Handling

All APIs return JSON responses. Handle both success and error cases:

```javascript
const handleResponse = async (response) => {
  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message || 'API request failed');
  }
  return response.json();
};
```

## Common Patterns

### Pagination

Photo endpoints support pagination:

```javascript
const getPhotos = async (eventCode, page = 1, limit = 50) => {
  const url = `${GALLERY_API}/event/${eventCode}?page=${page}&limit=${limit}`;
  const response = await fetch(url);
  return handleResponse(response);
};
```

### Error Handling

Implement comprehensive error handling:

```javascript
try {
  const photos = await getPhotos('ASDAR26');
  // Process photos
} catch (error) {
  if (error.message.includes('404')) {
    // Event not found
  } else if (error.message.includes('500')) {
    // Server error
  } else {
    // Other error
  }
}
```

### CORS Considerations

All CPS APIs include CORS headers for web integration. No proxy required for browser-based requests.

## Code Examples

### Browse Events

```javascript
// Get all available events
const events = await fetch(`${GALLERY_API}/event`)
  .then(handleResponse);

// Get photos from specific event
const photos = await fetch(`${GALLERY_API}/event/ASDAR26?page=1&limit=50`)
  .then(handleResponse);
```

### Create Order

```javascript
const orderData = {
  eventSlug: 'ASDAR26',
  photos: ['1234', '1235'],
  customerInfo: {
    name: 'John Doe',
    email: 'john@example.com'
  },
  shippingAddress: {
    line1: '123 Main St',
    city: 'Springfield',
    state: 'IL',
    zip: '62701'
  }
};

const order = await fetch(`${ORDERING_API}/api/orders/create`, {
  method: 'POST',
  headers,
  body: JSON.stringify(orderData)
}).then(handleResponse);
```

### Check Order Status

```javascript
// Get pending orders
const pendingOrders = await fetch(`${ORDERS_API}/orders/pending`)
  .then(handleResponse);

// Get order summary
const summary = await fetch(`${ORDERS_API}/orders/summary`)
  .then(handleResponse);
```

## Rate Limiting

* **Public browsing**: No limits
* **Order submission**: CAPTCHA required
* **Admin access**: Authenticated requests only

## Best Practices

1. **Cache responses** for photo metadata
2. **Implement retry logic** for transient failures
3. **Validate data** before submission
4. **Handle network errors** gracefully
5. **Use HTTPS** for all requests

## Quick example

Here's a minimal example showing navigation structure in `docs.yml`:

```yaml title="docs.yml"
navigation:
  - section: Getting started
    contents:
      - page: Introduction
        path: docs/pages/intro.mdx
      - page: Quickstart
        path: docs/pages/quickstart.mdx
  - api: API Reference
```

For complete navigation options, see the [navigation documentation](https://buildwithfern.com/learn/docs/configuration/navigation).