Demo Application

Look how the YH Finance API can be integrated into a functional application.

We'll cover the following

Let's look at a React application that uses some of the previously discussed YH Finance API endpoints to retrieve the requested data. We'll call the endpoints for market summary, trending stocks, and charts.

Application workflow

Let's look at the application workflow from a user's perspective:

  • Upon running the application, the user will land on the homepage of the application. The homepage provides a ticker of market summary and trending securities.

  • When the user clicks the "View Details" button for any security or searches for any security, the application redirects the user to another page. This page contains details of that security. It also contains the index trend of that security in graphical form.

Demo application

The widget below contains the code for our application. Click "Run" to run the application.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
Demo application

Code explanation

Let's look at the code explanation of our application:

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

Note: We've created and used a custom hook useFetch to fetch the data from any API endpoint.

Let's look at the components of our application:

  • Home: This renders the homepage of the application. It does so by calling the MarketSummary and Trending components.

  • MarketSummary: This component displays the market summary as a ticker on the homepage. Here's how this component works:

    • Line 20: We use the custom hook useFetch to call the endpoint for market summary. The response is saved in data , and the response status is saved in responseStatus.

    • Lines 29–36: We render the response in our required format.

    Trending: This component provides us with the trending securities. Its code structure is similar to that of the MarketSummary component.

  • Chart: This component renders a chart for the selected index to give the user better insight.