Posted on Jul 6 Real-time analytics have become a vital part of today's applications, especially when it comes to understanding user behavior and improving your platform based on data-driven insights. Even more so, if your users rely on your product to deliver them with insights.In this post, we are going to explore how we can create a real-time analytics dashboard for page views using Tinybird, Tremor.so, and Next.js.We will be using Tinybird for data ingestion and real-time data analysis, Tremor for data visualization, and Next.js for server-side rendering.Before we kick off, let me introduce you to Papermark. It's an open-source project for securely sharing documents with built-in real-time, page-by-page analytics, powered by Tinybird and visualized by Tremor.I would be absolutely thrilled if you could give us a star! Don't forget to share your thoughts in the comments section ❤️https://github.com/mfts/papermarkLet's set up our project environment. We will be setting up a Next.js app, installing Tinybird CLI and configuring the needed services and tools.It's a good idea to have a package manager handy, like tea. It'll handle your development environment and simplify your (programming) life!tea frees you to focus on your code, as it takes care of installing python and pipenv (which I'm using to run tinybird-cli), node, npm and any other packages you may need. The best part is, tea installs all packages in a dedicated directory (default: ~/.tea), keeping your system files neat and tidy.We will use create-next-app to generate a new Next.js project. We will also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.Tinybird's command line interface (CLI) helps us to manage data sources and pipes. I'm installing tinybird-cli using pipenv, which manages a virtual environment for my pip packages, in our local environment.Head over to tinybird.co and create a free account. You need to have a Tinybird account and an associated token. You can get the token from your Tinybird's dashboard.A .tinyb file will be added to your repo's root. No need to modify it. However add it it to your .gitignore file to avoid exposing your token.Now that we have our setup in place, we are ready to start building our application. The main features we'll cover are:The ability to programmatically configure pipes and datasources for Tinybird offers a significant advantage. This flexibility enables us to treat our data infrastructure as code, meaning that the entire configuration can be committed into a version control system. For an open-source project like Papermark, this capability is highly beneficial. It fosters transparency and collaboration, as contributors can readily understand the data structure without any ambiguity.We set up Tinybird pipes and datasource as follows:This is basically a versioned schema for page_views. This the only datasource we need for ingesting, storing and reading analytics about page views. Feel free to add/remove fields.In Tinybird, a pipe is a series of transformations that are applied to your data. These transformations could include anything from simple data cleaning operations to complex aggregations and analytics.We have one versioned pipe (also sometimes called endpoint) to retrieve page_view data. This Tinybird pipe, named endpoint, calculates the average duration users spend on each page of a specific document within a defined timeframe, and presents the results in ascending order by page number.Now that we have Tinybird datasources and pipes set up, you need to push them to your Tinybird's account using the CLI.Let's set up the appropriate typescript functions to actually send and retrieve data from Tinybird. We are using zod and chronark's zod-bird libraryThis function is for retrieving data from Tinybird:This function is for sending data to Tinybird:Don't forget to add TINYBIRD_TOKEN to your .env file. It's advised that you create a token that has the minimum scope for your operations:Congrats! 🎉 You successfully configured Tinybird and ready to move to the nextWe will capture the page view event in our PDFviewer component and publish it to our Tinybird's datasource.Let's build an API function to send data to Tinybird every time a page is viewed:And finally the PDFViewer component that sends the request:Let's now create a bar chart to display the page views for each document. We are using tremor.so to build our beautiful dashboard.Voila 🎉 The Bar Chart with accurate page-by-page time! That's it! We've built a real-time analytics dashboard for page views using Tinybird, Tremor, and Next.js. While the example here is simple, the same concepts can be expanded to handle any kind of analytics your app might need to perform.Thank you for reading. I'm Marc, an open-source advocate. I am building papermark.io - the open-source alternative to DocSend with millisecond-accurate page analytics.If you found this article helpful and got to understand Tinybird and dashboarding with Tremor better, I would be eternally grateful if you could give us a star! And don't forget to share your thoughts in the comments ❤️https://github.com/mfts/papermarkTemplates let you quickly answer FAQs or store snippets for re-use.Amazing work Marc! And thanks for speaking so highly of Tinybird.For those interested, Tinybird has a Web Analytics Starter Kit that includes a JavaScript tracker and some predefined SQL metrics. Can be a good kick start if you're working on a similar project.The starter kit is great 🤩There’s still so much to explore in Tinybird. Materialized Views is next on the list. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse SuperTokens - Jun 14 Shittu Olumide - Jun 23 FeeqCoodes - Jun 23 Kishan Sheth - Jun 28 Once suspended, mfts will not be able to comment or publish posts until their suspension is removed. Once unsuspended, mfts will be able to comment and publish posts again. Once unpublished, all posts by mfts will become hidden and only accessible to themselves. If mfts is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Marc Seitz. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag mfts: mfts consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging mfts will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.