How I accidentally built a popular tool for Trackmania streamers: the story of TMViz

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • padviz

    A simple gamepad input viewer with multiple display variations

  • As I started watching some popular Trackmania streamers on Twitch for inspiration, I've noticed that some streamers have a custom overlay which shows the current inputs on their controller/keyboard, one of them being padviz. But sadly, back then I could never find out what it's called. And I was the kind of guy who was very shy in chat, because I'm fairly new to the Trackmania community on Twitch.

  • stream-overlays

    A set of OBS stream overlays + widgets customised for my Twitch channel.

  • The initial iteration of the overlay was implemented within a week. It was initially created as a module within my web-based stream overlays set, and remained that way for the first few weeks/months.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • TMViz

    Web-based controller visualisation widget for TrackMania.

  • I decided to run a memory profiler while the overlay was being used, and soon enough, I found the problem. It turns out that implementing the UI of the controller overlay in Chakra UI caused a memory leak. This will cause the overlay to freeze when the OBS browser source can't handle the memory. So I immediately rushed to rewrite the overlay part of TMViz to use CSS Modules.

  • Sentry

    Developer-first error tracking and performance monitoring

  • Then something dawned on me. At work, we've been using Sentry to log any errors from our users. Sentry collects detailed stack trace from any user whenever an exception is handled within the code, and it has been instrumental to us at work. So I thought it would be a great time to finally give it a spin on my side projects.

  • Next.js

    The React Framework

  • So immediately, I saw the need for a usable overlay customizer. I put together a customiser UI with NextJS and Chakra UI, which generates an overlay URL.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

  • So immediately, I saw the need for a usable overlay customizer. I put together a customiser UI with NextJS and Chakra UI, which generates an overlay URL.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Build a Jamstack Blog with Xata and Cloudinary

    5 projects | dev.to | 7 Nov 2022
  • Quiz app in Next JS and Redis

    5 projects | dev.to | 27 Aug 2022
  • I built a full stack serverless e-commerce site with Next.js. What I learned and how it might help you

    5 projects | dev.to | 5 Apr 2021
  • How to integrate Next.js with Fauna using React Query

    8 projects | dev.to | 7 Feb 2021
  • How to Build Your Own ChatGPT Clone Using React & AWS Bedrock

    5 projects | dev.to | 1 May 2024