Demo Application

Learn to integrate Polygon API in a React application.

We'll cover the following

So far, we’ve looked into different endpoints available in Polygon. Now, let's try to use these endpoints to build a real-world application.

Workflow

  1. The first page we see is the homepage. It displays the previous open, close, highest, and lowest prices of all the available stocks. Upcoming holidays and recent news articles are also displayed on this page.
  2. Each news article has a “View Article” button, which takes the user to the news article.
  3. We can search for securities by using the “Search” button. To do so, we first have to select a type from a drop-down list and then enter our query.
  4. After clicking “Search,” we see a list of related securities, and each security has a “View Details” button, which opens the details of that specific security.

Run the application

Click the “Run” button to run the application. Then, click the URL provided to open the application in a new web browser tab.

Note: Polygon allows only five calls per minute to its endpoint. Due to this limitation, our application shows an error if we invoke too many requests at once.

Also, note that only necessary files showing endpoints' integrations are displayed. Other files, such as the stylesheets, have been hidden.

import Home from "./components/Home";
import Navbar from "./components/Navbar";
import Others from "./components/Others";
import Stocks from "./components/Stocks";
import Results from "./components/Results";

export{Home,Navbar,Others,Stocks,Results}

Integration with Polygon

We have used several endpoints available in Polygon in our application. Let's take a closer look at the code to see how the endpoints have been integrated into our application:

  • In ./src/hook/useFetch.js, we create a custom hook to fetch data from the API.

  • The index.js file loads the root application component. In App.js, we do the following:

    • Lines 2–7: We import all components used.

    • Lines 14–19: We define routes for all components.

  • The Navbar component is rendered as the page header in the entire application. It’s a simple navigation panel and includes a search button.

  • The first page loaded is the homepage, defined in ./component/Home.js. It uses market status, ticker news, and grouped daily endpoints.

    • Lines 13–18: We set the prev_date and pass it as an input parameter to the grouped daily endpoint.

    • Lines 25–27: We call the endpoints to fetch data.

  • The search results are displayed in ./component/Results.js. It used the Ticker endpoint to search for specific tickers.

  • The full detail of a stock is displayed in ./component/Stock.js. Here, we use ticker detail, previous close, EMA, stock split, and dividend endpoints. This component can be broken down like so:

    • Lines 19–23: We call the endpoints to fetch data.

    • Lines 37–62: We set the data to create a line plot of EMA.

  • The full details of other securities, such as cryptocurrency, forex, and options contracts, is displayed in ./component/Others.js. Here, we use ticker detail, previous close, and exponential moving average endpoints to fetch the data.