Back to articles

Building Interactive Dashboards with React and Serverless Functions

Majd Muhtaseb07/03/20257 minutes

Introduction

Interactive dashboards are a powerful way to visualize and interact with data. This article demonstrates how to create a simple yet effective dashboard using React for the user interface and serverless functions (specifically, AWS Lambda) for the backend. This architecture offers scalability, cost-efficiency, and easy deployment.

Setting Up the React Front-End

First, create a new React application:

npx create-react-app my-dashboard
cd my-dashboard

Install necessary libraries:

npm install axios chart.js react-chartjs-2

Create a Dashboard.js component:

// src/Dashboard.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/.netlify/functions/getData'); // Assumes Netlify functions setup
        setData(response.data);
      } catch (error) {
        console.error("Error fetching data: ", error);
      }
    };

    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  const chartData = {
    labels: data.map(item => item.timestamp),
    datasets: [
      {
        label: 'Value',
        data: data.map(item => item.value),
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgba(255, 99, 132, 0.2)',
      },
    ],
  };

  const chartOptions = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };

  return (
    <div>
      <h1>Dashboard</h1>
      <Line data={chartData} options={chartOptions} />
    </div>
  );
};

export default Dashboard;

Implementing the Serverless Function (AWS Lambda)

This example uses AWS Lambda with API Gateway.

// netlify/functions/getData.js  (For Netlify deployment example)
exports.handler = async (event, context) => {
  // Replace this with your data retrieval logic (e.g., from a database)
  const data = [
    { timestamp: '2024-01-01', value: 10 },
    { timestamp: '2024-01-02', value: 15 },
    { timestamp: '2024-01-03', value: 13 },
    { timestamp: '2024-01-04', value: 20 },
    { timestamp: '2024-01-05', value: 18 },
  ];

  return {
    statusCode: 200,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*" // Required for CORS support to work
    },
    body: JSON.stringify(data),
  };
};

Deploy the function to AWS Lambda and configure an API Gateway endpoint to trigger it. Or use a service like Netlify or Vercel which simplifies the function deployment.

Integrating with React

Configure your React application to call the API Gateway endpoint. In the React example above, the / .netlify/functions/getData endpoint is a placeholder for Netlify functions. If you are using AWS API Gateway, adjust the endpoint accordingly.

Conclusion

This example provides a basic framework for building interactive dashboards. You can extend it by adding more complex visualizations, data sources, and user interactions. Serverless functions are a cost-effective and scalable solution for handling data retrieval and processing in modern web applications.