Making API Calls

How to integrate with CPS APIs in your application
View as Markdown

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:

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

Request Headers

Include standard headers for all requests:

1const headers = {
2 'Content-Type': 'application/json',
3 'User-Agent': 'Your-App-Name/1.0'
4};

Response Handling

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

1const handleResponse = async (response) => {
2 if (!response.ok) {
3 const error = await response.json();
4 throw new Error(error.message || 'API request failed');
5 }
6 return response.json();
7};

Common Patterns

Pagination

Photo endpoints support pagination:

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

Error Handling

Implement comprehensive error handling:

1try {
2 const photos = await getPhotos('ASDAR26');
3 // Process photos
4} catch (error) {
5 if (error.message.includes('404')) {
6 // Event not found
7 } else if (error.message.includes('500')) {
8 // Server error
9 } else {
10 // Other error
11 }
12}

CORS Considerations

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

Code Examples

Browse Events

1// Get all available events
2const events = await fetch(`${GALLERY_API}/event`)
3 .then(handleResponse);
4
5// Get photos from specific event
6const photos = await fetch(`${GALLERY_API}/event/ASDAR26?page=1&limit=50`)
7 .then(handleResponse);

Create Order

1const orderData = {
2 eventSlug: 'ASDAR26',
3 photos: ['1234', '1235'],
4 customerInfo: {
5 name: 'John Doe',
6 email: 'john@example.com'
7 },
8 shippingAddress: {
9 line1: '123 Main St',
10 city: 'Springfield',
11 state: 'IL',
12 zip: '62701'
13 }
14};
15
16const order = await fetch(`${ORDERING_API}/api/orders/create`, {
17 method: 'POST',
18 headers,
19 body: JSON.stringify(orderData)
20}).then(handleResponse);

Check Order Status

1// Get pending orders
2const pendingOrders = await fetch(`${ORDERS_API}/orders/pending`)
3 .then(handleResponse);
4
5// Get order summary
6const summary = await fetch(`${ORDERS_API}/orders/summary`)
7 .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:

docs.yml
1navigation:
2 - section: Getting started
3 contents:
4 - page: Introduction
5 path: docs/pages/intro.mdx
6 - page: Quickstart
7 path: docs/pages/quickstart.mdx
8 - api: API Reference

For complete navigation options, see the navigation documentation.