Performing Event Searches with the SeatGeek API in JavaScript/

...

/

Demo Application

Demo Application

Learn how to build a fully functional React application using the SeatGeek API.

We'll cover the following...

This lesson will walk you through a React application integrated with the SeatGeek API. The following endpoints have been used in the application:

  • The events endpoint
  • The performers endpoint
  • The recommendations endpoint

Run the application

You can run the demo application by pressing the “Run” button in the widget below. When the server starts, click the URL next to “Your app can be found at:” to view the application.

Note: The following widget only shows the files required to explain the SeatGeek API.

import fetch from 'node-fetch';
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());

const port = process.env.PORT || 3000;

// Function to make a simple API call
const makeApiCall = async (apiURL, apiOptions) => {
  try {
    const options = JSON.parse(apiOptions);
    const response = await fetch(apiURL, options);
    console.log(response);
    return response;
  } catch (err) {
    console.error(err);
    return null;
  }
};

app.all('/', async function(req, res, next) {
  try {
    const resObj=await makeApiCall(req.query.apiURL, req.query.apiOptions);
    if (!resObj) {
      res.status(502).send({'message': 'SeatGeek server not reachable'});
    } else {
      const content = await resObj.json();
      res.status(resObj.status).send(content);
    }
  } catch (err) {
    res.status(500).send({'message': `Server unable to process request due to the following error:\n${err}`});
  }
  next();
});

app.listen(port);
console.log(`Server started at http://localhost:${port}`);

Code explanation

Let’s dive into the code and see how we’ve integrated different SeatGeek API endpoints into our React application.

To handle CORS for our frontend application, we use a proxy server. We can find the code for it under the backend-server folder. The server takes the endpoint URL and fetch options as query parameters from the frontend ...