Example code for a session on building dashboards.

Adding Tinybird Charts to a Next.js frontend

In this session we work with a stream of Mockingbird data that simulates events coming from a weather data application.

{
    "timestamp": "2024-06-20T02:26:31",
    "transaction_id": "c762f0f7-ac31-4761-a598-6db488d24cfc",
    "account_id": "8888_jdi3_477888",
    "endpoint": "get_reports",
    "city": "Minneapolis",
    "sensor_type": "temperature"
}

We take this data and build a simple real-time databoard.

Getting started

This repo contains a minimal example demonstrating:

1. Creating Tinybird Charts from the UI
2. Integrating Tinybird Charts into a Next.js frontend

You can read more about Tinybird Charts in the documentation, and there is a full end-to-end guide covering this example.

Run the example locally

Prerequisites

• Node.js >= v18
• A free Tinybird account
• Deploy the Tinybird resources to a Tinybird Workspace

Install dependencies

Install app dependencies. From the root of the repo:

npm install

Generate some data

Use Mockingbird to generate fake data for the events Data Source.

Using this link ^ provides a pre-configured schema, and you'll just need to enter your Workspace Admin Token and select the Host region that matches your Workspace. When configured, select Save, then scroll down and select Start Generating!.

In the Tinybird UI, confirm that the events Data Source is successfully receiving data.

Add your Tinybird parameters

First create a new file .env.local

cp .env.example .env.local

From the Tinybird UI, copy the read Token for the charts (if you deployed the resources from this repo, it will be called CHART_READ_TOKEN). Paste the Token into the .env.local file in your directory:

NEXT_PUBLIC_TINYBIRD_STATIC_READ_TOKEN="STATIC READ TOKEN"

Run the demo app

Run it locally:

npm run dev

Then open http://localhost:3000 with your browser.