Demo Application

See a demo application for a ticket management system using the Eventbrite API.

We'll cover the following

In this lesson, we’ll present a demo React application integrated with various endpoints of the Eventbrite API. There are two types of users: organizer and user. We have used the following endpoints in the application:

  1. View events.
  2. Create an event.
  3. Create a ticket.
  4. Publish an event.
  5. Buy tickets using Eventbrite’s checkout widget.

Workflow

  1. When we run the application, the user’s page appears. On this page the user can see current live events and buy tickets by clicking “Buy Tickets.” A pop-up window where we can buy tickets opens. Click the link below the “Run” button to open the user’s page.
  1. Now we can use the following link to open the organizer’s homepage showing all events. The navigation bar has three options: Create Event, Create Ticket, and Publish Event.
Press + to interact
{{EDUCATIVE_LIVE_VM_URL}}/
  1. When we click the “Create Event” option, a new page opens. The user can enter the details of the event and create an event.
  2. When we click the “Create Ticket” option, a new page opens. The user enters the ticket details and creates a ticket for an event.
  3. When we click the “Publish Event” option, a new page opens. The user sees all the draft events and can publish any event.

Launch the demo application by clicking “Run” in the code widget below. Then click the URL given at the end of the widget to interact with the application.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
reportWebVitals();
React demo application

Code explanation

Let’s dive into the code and see how we’ve integrated different Eventbrite API endpoints into our React application. We can see the contents of the Home.jsx, CreateTicket.jsx, CreateEvent.jsx, PublishEvents.jsx, and BuyTickets.jsx files under the components folder of our demo application.

Note: The code widget above only shows the necessary files required to explain the endpoints of the Eventbrite API. Each component receives PRIVATE_TOKEN and ORGANIZATION_ID to interact with the API.

  • The Home.jsx component (lines 6–23) retrieves live events using the events retrieval endpoint and displays them on the screen. We can also navigate to other pages using the navigation options in the navigation bar.

  • The CreateEvent.jsx component enables the organizer to create an event.

    • Lines 9–15: We have declared some state variables to get the values from the GUI.
    • Line 48: We call the custom hook useFetch that makes the API call.
    • Lines 50–60: We have already created the handleSubmit function, which is called when we click the “Create Event” button. It retrieves the GUI’s values and saves them in the state variables, which call the custom hook useFetch.

  • The CreateTicket.jsx component enables the organizer to create a ticket for any valid event.

    • Lines 10–12: We have declared some state variables to get a value from the GUI and the message variable to print success or error messages on the GUI.
    • Line 30: We call the custom hook useFetch that makes the API call.
    • Lines 31–37: We have already created the handleSubmit function, which is called when we click the “Create Ticket” button. It retrieves the GUI’s values and saves them in the state variables, which call the custom hook useFetch.
    • Line 62: We call the EventsList component, which returns a list of the events.

  • The PublishEvents.jsx component shows all the draft events. The organizer can publish these event by clicking the “Publish Event” button.

    • Lines 19 and 27: We have used two useFetch calls. The first call retrieves all the events to show on the GUI and the second call publishes the specific event clicked by the organizer.

  • The BuyTickets.jsx component shows all live events and the user can buy the tickets by clicking the “Buy Tickets” button.

    • Lines 6–19: The runScript function shows the checkout widget when the user clicks the “Buy Ticket” button.