{"id":1814,"date":"2021-09-27T12:14:30","date_gmt":"2021-09-27T12:14:30","guid":{"rendered":"https:\/\/www.reloadly.com\/blog\/?p=1814"},"modified":"2021-10-05T11:33:16","modified_gmt":"2021-10-05T11:33:16","slug":"building-a-promotion-tracker-with-react-and-reloadlys-api","status":"publish","type":"post","link":"https:\/\/reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/","title":{"rendered":"Building a Promotion Tracker with React and Reloadly&#8217;s API"},"content":{"rendered":"\n<p>Airtime can largely be seen as a necessity in today\u2019s world thus when making top-ups, customers are always in search of value. It would be great if an application existed where a user could check for available airtime or data bonuses and promotions in any region around the world. <\/p>\n\n\n\n<p>In this article, we\u2019ll build an application that meets this need using React &#8211; a JavaScript framework, and\u00a0<a href=\"https:\/\/reloadly.com\/\">Reloadly<\/a>\u00a0&#8211; a service for global airtime top-ups.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tools you will need<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/nodejs.org\/en\/\">Node<\/a>&nbsp;: A back-end JavaScript runtime environment that executes JavaScript code outside a web browser.<\/li><li><a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\">npm<\/a>&nbsp;: A package manager for Node.<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/dotenv\">dotenv<\/a>&nbsp;: A module that loads environment variables from an&nbsp;<code>.env<\/code>&nbsp;file<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/axios\">axios<\/a>: A promise based HTTP client for the browser and NodeJS<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/react-bootstrap\">react-bootstrap<\/a>: A library that renders Bootstrap components in React applications<\/li><\/ul>\n\n\n\n<p>Also, intermediate knowledge of JavaScript and React would be fundamental to digesting this tutorial.<\/p>\n\n\n\n<p>If you want to check out the source code of this application before reading the article, you can find it&nbsp;<a href=\"https:\/\/github.com\/fullstackmafia\/reloadly-react-promotion-tracker\">here<\/a>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a React application<\/h2>\n\n\n\n<p>The first step to getting started is creating a skeletal React application. The fastest way to do this is to use the&nbsp;<code>create-react-app<\/code>&nbsp;command via your terminal:<\/p>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code> # Create a new React application with the below command\n\n    npx create-react-app reloadly-app\n\n    # Navigate to the newly created React application\n\n    cd reloadly-app\n\n    # Launch the application on your browser\n\n    npm start<\/code><\/pre>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Note that&nbsp;<code>npx<\/code>&nbsp;on the first line is not a typo, it\u2019s a package runner tool that comes with&nbsp;<code>npm<\/code>. Your new application\u2019s folder should look somewhat like this when you are done creating it:<\/p>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>RELOADLY-APP\n\npublic\n    index.html\n    manifest.json\nsrc\n    App.css\n    App.js\n    App.test.js\n    index.css\n    index.js\n    logo.svg\n    reportWebVitals.js\n    setupTests.js\n.gitignore\n package-lock.json\n package.json\n README.md<\/code><\/pre>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>When the app is launched, you should see a web page similar to the image below. At this point, all you\u2019ll see is React\u2019s default web page<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"880\" height=\"468\" src=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react.png\" alt=\"\" class=\"wp-image-1815\" srcset=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react.png 880w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react-300x160.png 300w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react-768x408.png 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Getting your Reloadly access token<\/h3>\n\n\n\n<p>To access airtime bonus information from Reloadly, you\u2019ll need an access token. This can be gotten by signing up for an account on Reloadly and using your client credentials to make a POST request for an access token. On your Reloadly dashboard, you can view your client credentials in the Developers section as depicted below:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"354\" src=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/image-7-1-1024x354.png\" alt=\"\" class=\"wp-image-1818\" srcset=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/image-7-1-1024x354.png 1024w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/image-7-1-300x104.png 300w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/image-7-1-768x265.png 768w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/image-7-1-1536x531.png 1536w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/image-7-1.png 1667w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>It&#8217;s important to note here that your client credentials should be kept private and secure at all times. Use these credentials to make a&nbsp;<code>POST<\/code>&nbsp;request to the&nbsp;<code>https:\/\/auth.reloadly.com\/oauth\/token<\/code>&nbsp;URL with the following body parameters:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>  {\n      \"client_id\":\"YOUR_CLIENT_ID\",\n      \"client_secret\":\"YOUR_CLIENT_SECRET\",\n      \"grant_type\":\"client_credentials\",\n      \"audience\":\"https:\/\/topups.reloadly.com\"\n    }<\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"api-request-for-access-token\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/45toCu-QTFE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Safeguarding your access token<\/h3>\n\n\n\n<p>On getting your access token, you\u2019ll need a place to safely store it. This can be done using a&nbsp;<code>.env<\/code>&nbsp;file. First navigate to your terminal and in your project, install the&nbsp;<code>dotenv<\/code>&nbsp;module:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install dotenv --save<\/code><\/pre>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Once this is installed, create a&nbsp;<code>.env<\/code>&nbsp;file in your project\u2019s root folder and store your access token in it using the format below:<\/p>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code> \/\/ .env\n\n    REACT_APP_ACCESS_TOKEN = Bearer YOUR_ACCESS_TOKEN_HERE<\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Fetching data with hooks and Axios<\/h3>\n\n\n\n<p>Once your access token is safely stored, you can use it to get promotion data from Reloadly\u2019s servers. First, define the variables you will need to use as headers when making a request for the promotion data. The code snippet blow shows how to achieve this:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code> \/\/ src\/promotions.js\n\n    const accessToken = process.env.REACT_APP_ACCESS_TOKEN;\n    const reloadlyJSON = `application\/com.reloadly.topups-v1+json`\n    const headers = {\n      Accept: reloadlyJSON,\n      Authorization: accessToken\n    };<\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Next, you\u2019ll define and handle state management for various data interaction points in your application. The promotion tracker will use three variables to track its different states:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>data<\/code>&nbsp;: For handling the promotion information retrieved from Reloadly\u2019s servers<\/li><li><code>countryCode<\/code>&nbsp;: For handling the country ISO code inputted by a user when requesting for promotion details about a particular country<\/li><li><code>loading<\/code>&nbsp;: For handling the time intervals between a request to Reloadly\u2019s servers and a response<\/li><\/ul>\n\n\n\n<p>These states can be managed with React\u2019s <code>useState()<\/code> hook. The code snippet blow shows how the <code>useState()<\/code> hook initializes and updates state in the data , countryCode and loading variables:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>    \/\/ src\/promotions.js\n\n    const &#91;data, setData] = useState(&#91;]);\n    const &#91;countryCode, setCountryCode] = useState(\"\");\n    const &#91;loading, setLoading] = useState(false);<\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Once this is done, you can make a&nbsp;<code>GET<\/code>&nbsp;request to Reloadly\u2019s \/promotions\/country-codes endpoint with the aid of Axios. The code snippet below shows how this can be achieved by creating an asynchronous function called&nbsp;<code>Promochecker()<\/code>&nbsp;and in it, making your request:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ src\/promotions.js\n\n  const PromoChecker = async () => {\n    setLoading(true);\n    try {\n      await axios\n        .get(\n          `https:\/\/topups.reloadly.com\/promotions\/country-codes\/` + countryCode,\n          {\n            headers: headers\n          }\n        )\n        .then((res) => {\n          console.log(res.data)\n          setData(res.data);\n        });\n    } catch (e) {\n      setData(e.response.data);\n      console.log(e.response);\n    }\n    setLoading(false);\n  };<\/code><\/pre>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Viewing an operator\u2019s promotion data<\/h3>\n\n\n\n<p>The steps to fetching the promotion data of an operator have been outlined. However, this data needs to be displayed to users of your application. You will also need to display instructions on how to use the application. The achieve these, you will use React\u2019s&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html\">conditional rendering<\/a>&nbsp;feature to update the UI of your application. The code snippet below shows how you render a welcome message that will be seen by your application\u2019s users:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ src\/promotions.js\n\nreturn (\n  &lt;section className=\"instructions\">\n    &lt;h1>Welcome!&lt;\/h1> &lt;br>&lt;\/br>{\" \"}\n    &lt;p>\n      You can search for ongoing promotions for mobile top-ups in a country by\n      using the country's Alpha 2 ISO code.\n    &lt;\/p>{\" \"}\n    &lt;br>&lt;\/br>\n    &lt;p>\n      {\" \"}\n      Refer to this{\" \"}\n      &lt;a\n        href=\"https:\/\/www.nationsonline.org\/oneworld\/country_code_list.htm\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        page\n      &lt;\/a>{\" \"}\n      for a complete directory of ISO codes.\n    &lt;\/p>\n  &lt;\/section>\n);<\/code><\/pre>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Next, you need to display an input form to receive country codes from users. The code snippet below shows how this can be done via an input bar that receives search queries and updates the state of the&nbsp;<code>countryCode<\/code>&nbsp;variable with them:<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/promotions.js\n\n&lt;section className=\"input_instructions\">\n &lt;input\n    type=\"text\"\n    placeholder=\"Enter country code...\"\n    onChange={(e) => setCountryCode(e.target.value)}\n  \/>\n...\n\n&lt;\/section><\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>After this, you\u2019ll create a button to handle user requests. Your button should be able to perform the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Launch a request to Reloadly\u2019s servers ( with the&nbsp;<code>PromoCheck()<\/code>&nbsp;function )<\/li><li>Display a spinner during the intervals of making a request and getting a response from Reloadly\u2019s servers ( with the&nbsp;<code>loading<\/code>&nbsp;variable\u2019s state )<\/li><\/ul>\n\n\n\n<p>The code snippet below depicts how this can be achieved with React\u2019s&nbsp;<code>onClick()<\/code>&nbsp;event handler and a ternary operator:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/promotions.js\n\n&lt;section className=\"input_instructions\">\n...\n\n  &lt;button className=\"btn\" onClick={PromoChecker} disabled={loading}>\n    {loading &amp;&amp; (\n      &lt;i\n        className=\"fa fa-refresh fa-spin\"\n        style={{ marginRight: \"5px\" }}\n      \/>\n    )}\n    {loading &amp;&amp; &lt;Spinner animation=\"border\" \/>}\n    {!loading &amp;&amp; &lt;span>Search&lt;\/span>}\n  &lt;\/button>\n&lt;\/section><\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Basically, your home page should have the structure below ( excluding the styling ) when you are done:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-27-124530-1024x543.jpg\" alt=\"\" class=\"wp-image-1820\" srcset=\"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-27-124530-1024x543.jpg 1024w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-27-124530-300x159.jpg 300w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-27-124530-768x407.jpg 768w, https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-27-124530.jpg 1320w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>To display the information on promotions received as a response, you\u2019ll create an arrow function that maps through the promotion information in the&nbsp;<code>data<\/code>&nbsp;variable. The code snippet below shows how to achieve this using React Bootstrap components:<\/p>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/promotions.js\n\n&lt;section className=\"response\">\n  {data.map((item) => (\n    &lt;Accordion key={item.id}>\n        &lt;Card className=\"response_card\">\n            &lt;Accordion.Toggle as={Card.Header} eventKey={item}>\n                {item.title} &lt;b>&amp;nbsp; &amp;nbsp; &amp;#8693;&lt;\/b>\n            &lt;\/Accordion.Toggle>\n            &lt;Accordion.Collapse eventKey={item}>\n                &lt;Card.Body>\n                  &lt;p>{item.denominations}&lt;\/p>\n                  &lt;p dangerouslySetInnerHTML={{ __html: item.description }}>&lt;\/p>\n                  &lt;p>{item.startDate}&lt;\/p>\n                  &lt;p>{item.endDate}&lt;\/p>\n              &lt;\/Card.Body>\n            &lt;\/Accordion.Collapse>\n        &lt;\/Card>\n    &lt;\/Accordion>\n  ))}\n&lt;\/section><\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The key components of your application are all put up together now. Let\u2019s take a look at how it works when a user makes a request.<\/p>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"api-request-to-view-promotions\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/KX8i9_B0D-g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>Working with React Hooks provides a feasible way to handle data across different components. With Reloadly\u2019s REST API, you can retrieve data on telecom operators to meet your specific use case as shown in this article. You can check out the live demo of this application&nbsp;<a href=\"https:\/\/fullstackmafia.github.io\/reloadly-react-promotion-tracker\/\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All you need to know to build an application that checks for available airtime in any region of the world <\/p>\n","protected":false},"author":17,"featured_media":1831,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[274],"tags":[11,295,294,275],"ppma_author":[359],"class_list":["post-1814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-blog","tag-airtime","tag-javascript","tag-react","tag-reloadly"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a Promotion Tracker with React and Reloadly&#039;s API - Reloadly Blog<\/title>\n<meta name=\"description\" content=\"Reloadly Resources. Insights, Info and Analysis For The Mobile Airtime API Community\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Promotion Tracker with React and Reloadly&#039;s API - Reloadly Blog\" \/>\n<meta property=\"og:description\" content=\"Reloadly Resources. Insights, Info and Analysis For The Mobile Airtime API Community\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Reloadly Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-27T12:14:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-05T11:33:16+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/54.167.47.128\/wp-content\/uploads\/2021\/09\/react-cover-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Raphael Ugwu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raphael Ugwu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/\"},\"author\":{\"name\":\"Raphael Ugwu\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#\\\/schema\\\/person\\\/18eaaac484ba8d8f4d59940e923f4954\"},\"headline\":\"Building a Promotion Tracker with React and Reloadly&#8217;s API\",\"datePublished\":\"2021-09-27T12:14:30+00:00\",\"dateModified\":\"2021-10-05T11:33:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/\"},\"wordCount\":999,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/react-cover-image.jpg\",\"keywords\":[\"airtime\",\"javascript\",\"react\",\"reloadly\"],\"articleSection\":[\"Developer Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/\",\"url\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/\",\"name\":\"Building a Promotion Tracker with React and Reloadly's API - Reloadly Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/react-cover-image.jpg\",\"datePublished\":\"2021-09-27T12:14:30+00:00\",\"dateModified\":\"2021-10-05T11:33:16+00:00\",\"description\":\"Reloadly Resources. Insights, Info and Analysis For The Mobile Airtime API Community\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/react-cover-image.jpg\",\"contentUrl\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/react-cover-image.jpg\",\"width\":1000,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/building-a-promotion-tracker-with-react-and-reloadlys-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Promotion Tracker with React and Reloadly&#8217;s API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/\",\"name\":\"Reloadly Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#organization\",\"name\":\"Reloadly\",\"url\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/logo-1.svg\",\"contentUrl\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/logo-1.svg\",\"width\":100,\"height\":100,\"caption\":\"Reloadly\"},\"image\":{\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.reloadly.com\\\/blog\\\/#\\\/schema\\\/person\\\/18eaaac484ba8d8f4d59940e923f4954\",\"name\":\"Raphael Ugwu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c590dfe6cf705fd18b8c2f919ecfbb1ace8dcd6bb7f5712363f76bb4c55b6000?s=96&d=mm&r=g64f921045402e9b44a3fe0f4c884aa1f\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c590dfe6cf705fd18b8c2f919ecfbb1ace8dcd6bb7f5712363f76bb4c55b6000?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c590dfe6cf705fd18b8c2f919ecfbb1ace8dcd6bb7f5712363f76bb4c55b6000?s=96&d=mm&r=g\",\"caption\":\"Raphael Ugwu\"},\"url\":\"https:\\\/\\\/reloadly.com\\\/blog\\\/author\\\/fullstackmafia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Promotion Tracker with React and Reloadly's API - Reloadly Blog","description":"Reloadly Resources. Insights, Info and Analysis For The Mobile Airtime API Community","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/","og_locale":"en_US","og_type":"article","og_title":"Building a Promotion Tracker with React and Reloadly's API - Reloadly Blog","og_description":"Reloadly Resources. Insights, Info and Analysis For The Mobile Airtime API Community","og_url":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/","og_site_name":"Reloadly Blog","article_published_time":"2021-09-27T12:14:30+00:00","article_modified_time":"2021-10-05T11:33:16+00:00","og_image":[{"width":1000,"height":420,"url":"http:\/\/54.167.47.128\/wp-content\/uploads\/2021\/09\/react-cover-image.jpg","type":"image\/jpeg"}],"author":"Raphael Ugwu","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Raphael Ugwu","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#article","isPartOf":{"@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/"},"author":{"name":"Raphael Ugwu","@id":"https:\/\/www.reloadly.com\/blog\/#\/schema\/person\/18eaaac484ba8d8f4d59940e923f4954"},"headline":"Building a Promotion Tracker with React and Reloadly&#8217;s API","datePublished":"2021-09-27T12:14:30+00:00","dateModified":"2021-10-05T11:33:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/"},"wordCount":999,"commentCount":0,"publisher":{"@id":"https:\/\/www.reloadly.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react-cover-image.jpg","keywords":["airtime","javascript","react","reloadly"],"articleSection":["Developer Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/","url":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/","name":"Building a Promotion Tracker with React and Reloadly's API - Reloadly Blog","isPartOf":{"@id":"https:\/\/www.reloadly.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#primaryimage"},"image":{"@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react-cover-image.jpg","datePublished":"2021-09-27T12:14:30+00:00","dateModified":"2021-10-05T11:33:16+00:00","description":"Reloadly Resources. Insights, Info and Analysis For The Mobile Airtime API Community","breadcrumb":{"@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#primaryimage","url":"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react-cover-image.jpg","contentUrl":"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react-cover-image.jpg","width":1000,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/www.reloadly.com\/blog\/building-a-promotion-tracker-with-react-and-reloadlys-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.reloadly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Promotion Tracker with React and Reloadly&#8217;s API"}]},{"@type":"WebSite","@id":"https:\/\/www.reloadly.com\/blog\/#website","url":"https:\/\/www.reloadly.com\/blog\/","name":"Reloadly Blog","description":"","publisher":{"@id":"https:\/\/www.reloadly.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.reloadly.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.reloadly.com\/blog\/#organization","name":"Reloadly","url":"https:\/\/www.reloadly.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.reloadly.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2020\/11\/logo-1.svg","contentUrl":"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2020\/11\/logo-1.svg","width":100,"height":100,"caption":"Reloadly"},"image":{"@id":"https:\/\/www.reloadly.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.reloadly.com\/blog\/#\/schema\/person\/18eaaac484ba8d8f4d59940e923f4954","name":"Raphael Ugwu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c590dfe6cf705fd18b8c2f919ecfbb1ace8dcd6bb7f5712363f76bb4c55b6000?s=96&d=mm&r=g64f921045402e9b44a3fe0f4c884aa1f","url":"https:\/\/secure.gravatar.com\/avatar\/c590dfe6cf705fd18b8c2f919ecfbb1ace8dcd6bb7f5712363f76bb4c55b6000?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c590dfe6cf705fd18b8c2f919ecfbb1ace8dcd6bb7f5712363f76bb4c55b6000?s=96&d=mm&r=g","caption":"Raphael Ugwu"},"url":"https:\/\/reloadly.com\/blog\/author\/fullstackmafia\/"}]}},"jetpack_featured_media_url":"https:\/\/www.reloadly.com\/blog\/wp-content\/uploads\/2021\/09\/react-cover-image.jpg","authors":[{"term_id":359,"user_id":17,"is_guest":0,"slug":"fullstackmafia","display_name":"Raphael Ugwu","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/c590dfe6cf705fd18b8c2f919ecfbb1ace8dcd6bb7f5712363f76bb4c55b6000?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/1814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/comments?post=1814"}],"version-history":[{"count":10,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/1814\/revisions"}],"predecessor-version":[{"id":1908,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/posts\/1814\/revisions\/1908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/media\/1831"}],"wp:attachment":[{"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/media?parent=1814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/categories?post=1814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/tags?post=1814"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/reloadly.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=1814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}