Demo Application

We’ve gained hands-on experience with Clearbit API endpoints in this course. Now, we’ll integrate Clearbit’s endpoints into a React application.

Application workflow

1. When we run the application, the first page we see is the “Homepage.” The “Homepage” has two main components—the Enrichment tool and the Risk calculator.

2. Click the "Risk Calculator" button. This takes us to the risk calculator page, where we can give an email address and IP address to get a risk score.

3. Then click the "Enrichment Tool" button. This takes us to the enrichment page, where we can find a person using email or a company using its domain.

Run the application

Click “Run” to run the application. Next, click on the URL given at the end of the widget to watch the application up and running.

Code explanation

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

For our React application, the file index.js renders the App component (App.js) as the root component.

1. For the enrichment tool, Results.js, we use the enrichment endpoints: person endpoint in line 27 and company in line 41. We use this endpoint to display the trending movies and TV shows on the home page. This is to fetch the details of the person or the company whose email address or domain is provided by the user.

2. For the risk calculation, Risk.js, we use the risk endpoint in line 19. This is to calculate a risk score against the email and IP address that the user will provide.