A multi platform dashboard tutorial

In this tutorial, we will create a multi platform dashboard using React and the n_2 API. The dashboard will list all of the campaigns of your connected platforms.

The source code for this tutorial can be found on our GitHub

Creating the React boilerplate

First, we need to create a React app. We will use create-react-app for this.

npx create-react-app multiplatform-dashboard-tutorial

Now, we should have a folder called my-dashboard with a React app inside. Let's go into the folder and start the app.

cd multiplatform-dashboard-tutorial
npm start

Now, we should see the React app running on http://localhost:3000.

Creating the dashboard

Now, let's create a dashboard component. We will use the n_2 API to get the data for the dashboard.

To create a dashboard component, let's create a Dashboard.js file in the src folder.

touch src/Dashboard.js

Now, let's add the following code to the Dashboard component.

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Dashboard = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const data = await axios.get('https://api.n2api.io/v1/spotify/campaigns', {
        headers: {
          'Authorization': 'Bearer ' + '<YOUR_TOKEN_HERE>'
        }
      })
      setData(
        data.data
      )
    }
    fetchData()
  }, [])

  return (
    <div>
      <h1>Dashboard</h1>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  )
}

export default Dashboard

The code above will fetch the data from the n_2 API and display it in a pre tag. Notice that we only fetch data for Spotify campaigns. See the Campaigns endpoint documentation for more information. Replace the platform name with a platform you have connected to the n_2 API.

Your app now should look like this.

Beautifying the dashboard

Okay, this is not a dashboard. Let's make it look like one.

First, let's install Tailwind CSS.

npm install tailwindcss

Now, let's create a tailwind.config.js file.

npx tailwindcss init

We have to adjust the tailwind.config.js file a bit. Let's add the following code to the file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './src/**/*.{html,js}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now, let's add the following code to the index.css file in the /src folder.

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f7fafc;
}

Now, let's add the following code to the Dashboard component. We add some styling to the dashboard. In addition, we only display the name and status of the campaigns.

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Dashboard = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const data = await axios.get('https://api.n2api.io/v1/spotify/campaigns', {
        headers: {
          'Authorization': 'Bearer ' + '<YOUR_TOKEN_HERE>'
        }
      })
      setData(
        data.data.map(campaign => ({
          name: campaign.name,
          id: campaign.id,
          status: campaign.status,
        }))
      )
    }
    fetchData()
  }, [])

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <div className="mt-4">
        <div className="bg-white rounded-lg shadow-lg p-4">
          <h2 className="text-xl font-bold">Campaigns</h2>
          <div className="mt-4">
            {data && data.map(campaign => (
              <div key={campaign.id} className="bg-gray-100 rounded-lg p-4 mt-2">
                <h3 className="text-lg font-bold">{campaign.name}</h3>
                <p className="text-sm">{campaign.status}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )

Your app now should look like this.

Now this looks better, but this is not a multi platform dashboard. It just shows the campaigns of one platform. Let's change that.

Adding multiple platforms

To make it multi platform, we need to fetch the campaigns of all connected platforms. We can do this by fetching the campaigns of all platforms of interest and then merging the results.

Let's add the following code to the Dashboard component.

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Dashboard = () => {
  const [data, setData] = useState(null)

  const platforms = [
    "spotify",
    "googleads",
    "pinterest",
  ];

  useEffect(() => {
    const fetchData = async () => {
      const combinedData = await Promise.all(platforms.map(async platform => {
        const platformData = await axios.get('https://api.n2api.io/v1/' + platform + '/campaigns', {
          headers: {
            'Authorization': 'Bearer ' + '<YOUR_TOKEN_HERE>'
          }
        })
        console.log(platformData.data);
        return platformData.data;
      }))
      setData(combinedData.flat())
      console.log("Combined data");
      console.log(combinedData.flat());
    }
    fetchData()
  }, [])

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <div className="mt-4">
        <div className="bg-white rounded-lg shadow-lg p-4">
          <h2 className="text-xl font-bold">Campaigns</h2>
          <div className="mt-4">
            {data && data.map(campaign => (
              <div key={campaign.id} className="bg-gray-100 rounded-lg p-4 mt-2">
                <h3 className="text-lg font-bold">{campaign.name}</h3>
                <p className="text-sm">{campaign.status}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Dashboard

Et voilà, we have a multi platform dashboard:

Making platforms dynamic

Now, we have a multi platform dashboard, but we have to hardcode the platforms. n_2 has an endpoint to get all connected platforms. Let's use this endpoint to make the platforms dynamic.

Let's update the Dashboard component. We will use the Platforms endpoint to get all connected platforms.

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Dashboard = () => {
  const [data, setData] = useState(null)
  const [platforms, setPlatforms] = useState(null)

  // load available platforms
  useEffect(() => {
    const fetchPlatforms = async () => {
      const fetchedPlatforms = await axios.get('https://api.n2api.io/v1/platforms', {
        headers: {
          'Authorization': 'Bearer ' + '<YOUR_TOKEN_HERE>'
        }
      })
      setPlatforms(fetchedPlatforms.data.map(platform => platform.name.toLowerCase()))
    }
    fetchPlatforms()
  }, []);


  useEffect(() => {
    const fetchData = async () => {
      const combinedData = await Promise.all(platforms?.map(async platform => {
        const platformData = await axios.get('https://api.n2api.io/v1/' + platform + '/campaigns', {
          headers: {
            'Authorization': 'Bearer ' + '<YOUR_TOKEN_HERE>'
          }
        })
        console.log(platformData.data);
        return platformData.data;
      }))
      setData(combinedData.flat())
      console.log("Combined data");
      console.log(combinedData.flat());
    }
    fetchData()
  }, [platforms]);

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <div className="mt-4">
        <div className="bg-white rounded-lg shadow-lg p-4">
          <h2 className="text-xl font-bold">Campaigns</h2>
          <div className="mt-4">
            {data && data.map(campaign => (
              <div key={campaign.id} className="bg-gray-100 rounded-lg p-4 mt-2">
                <h3 className="text-lg font-bold">{campaign.name}</h3>
                <p className="text-sm">{campaign.status}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Dashboard

We made use of Reacts useEffect hook to fetch the platforms and the campaigns. We also added a dependency to the useEffect hook, so that the campaigns are fetched again when the platforms change. Notice that we also added a question mark to the platforms.map function. This is because the platforms are not loaded yet when the component is rendered for the first time. We use the platforms names to fetch the campaigns of the platforms. Notice that we use the names in lowercase, as the n_2 API only accepts lowercase platform names in the URL.

Our dashboard now looks the same as before, but we can now add platforms to the n_2 API and they will automatically be added to the dashboard 🥳