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>
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.