--- title: "Surviving the Norwegian winter as a cyclist with dundring.com" url: "https://www.bekk.christmas/post/2023/18/dundring-com" authors: ["Sivert Schou Olsen", "Morten Kolstad"] published: "2023-12-18" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["Hobby", "React"] keywords: ["hobby project", "dundring.com", "cycling", "web bluetooth", "typescript", "hobby", "react"] --- # Surviving the Norwegian winter as a cyclist with dundring.com Norway is known for its fjords, glaciers and cold winters. The latter is suboptimal for cyclists, which is why we ended up creating [dundring.com](https://dundring.com); a free and open source in-browser training application created to control and track your training with a smart bike trainer ⚡️ This article will go through the magical story of how our hobby project [dundring.com](https://dundring.com) was made 🎅 ## In short dundring.com is a browser-based indoor cycling app for smart trainers that tracks heart rate, power, cadence, and ride data while letting riders control resistance through ERG workouts. It supports custom workout creation based on FTP, sharing workouts, exporting sessions to Strava, and live group sessions with shared data. - **For:** Cyclists and developers interested in indoor training apps - **Good to know beforehand:** Basic familiarity with indoor cycling terms like smart trainers, FTP, and Strava _AI-generated_ #### Norwegian weather and cycling during the winter Cycling during the winter in subzero temperatures and snow is something only a fraction of the Norwegian cyclists endure. Most of us take our cycling sessions indoors with a bike trainer, which can be thought of as a treadmill for bikes. However, working out indoors on a bike trainer can be monotonous and feels harder than riding outdoors, which may tempt you to join the ranks of the tough winter cyclists. Fortunately, there are applications that strive to make this experience as bearable as possible, such as [Zwift](https://www.zwift.com), the leading bike trainer software. > _Zwift is a massively multiplayer online cycling and running physical training program that enables users to interact, train, and compete in a virtual world._ - [Wikipedia](https://en.wikipedia.org/wiki/Zwift) Zwift has many great features, and it's really fun to see a 3D version of yourself cycling in the virtual world, especially when you are able to overtake lots of other virtual cyclists. As we were using Zwift, we realized that we did not really use the killer features of Zwift; the massive living world, group rides and races. We were mostly using Zwift to control the pedaling resistance over time, and were not really looking at anything else than the real time numbers such as Watt, heart rate and elapsed time. This sparked a question; _why can't we create our own bike trainer app using_ [_Web Bluetooth_](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)_?_ #### Creating a minimum viable product After experimenting with Web Bluetooth for reading heart rate data, the next step was being able to control the bike trainer. One thing was reading the power data, but actually being able to send commands to the device was not straight forward for someone new to Web Bluetooth. Combining data from a heart rate monitor with power data from a bike trainer with some nice graphs, and some power controls, resulted in our first minimum viable product of [dundring.com](https://dundring.com). ![A preview of an ongoing workout on dundring.com](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/7d972d8cf21b9640e30d039de89db9867f15ff7c-2294x1486.gif) _A preview of an ongoing workout on dundring.com_ #### Workouts don't create themselves The ability to create custom workouts is a fundamental feature of any cycling trainer app. Every workout in [dundring.com](https://dundring.com) is built around ERG mode, a setting on smart trainers that automatically adjusts resistance to match your cadence, essentially turning the bike trainer into a _"cycling treadmill"_. The workout editor on [dundring.com](https://dundring.com) allows you to predefine the resistance for different stages of a workout. This feature is ideal for creating interval sessions with varying power intensity and for easier rides with consistent and low intensity. ![Workout editor](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/07d37ec73df2770bc2a98df7fab1aa0bf17b450f-2238x1526.png) _Workout editor_ As shown in the current interface of the workout editor, a workout is a sequence of time intervals, each with a targeted power output, measured in watts and percentages. _But what do these percentages represent?_ They are calculated as a percentage of your Functional Threshold Power (FTP). FTP is essentially the average power you can sustain for one hour. In the cycling community, it's common to base power targets on this metric. Using percentages of FTP, rather than fixed numbers, makes the workouts adaptable and applicable to every cyclist. The workouts automatically adjust to the rider's current level by scaling based on their FTP. This is handy when sharing workouts with your friends, which [dundring.com](https://dundring.com) allows you to do. In addition to the workout editor, [dundring.com](https://dundring.com) also offers a library of workouts you can use out of the box, or use as template for your own custom workouts. #### **You didn't workout if it isn't on Strava** In the cycling community, there's a popular saying: _"If it's not on_ [_Strava_](https://www.strava.com)_, it didn't happen"_. Recognizing this, we've made it possible for users to upload their rides from [dundring.com](https://dundring.com) to Strava. Our current approach allows users to export and download their session data, which includes data about laps, heart rate, power, cadence and simulated gps points based on estimated speed and distance. The speed and distance are estimated based on the rider's current power output, using approximations for factors like gravity, rolling resistance, and aerodynamic drag. For those interested in the specifics, the full formula is available here: [Cycling Wattage Calculator](https://www.omnicalculator.com/sports/cycling-wattage). ![A dundring workout uploaded to Strava](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/7bb0c24012740121f68ea5029b3dc3fd1c33307f-1662x1412.png) _A dundring workout uploaded to Strava_ #### Group sessions One of the primary reasons people ride bikes is to enjoy group rides with friends in the sun. Even though the weather might not be on our side during the winter, it might still be nice to be able to ride together. This led us to implement a group session feature, allowing users to create a live group for others to join. Everyone in the group are able to see each other's live data. ![Preview of an active group session](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/fde8481cf8dbf89853c838b6e2f0e9cfeb70bbe6-2234x1522.gif) _Preview of an active group session_ #### **Tech stack** For the nerds, [dundring.com](https://dundring.com) is written in [TypeScript](https://www.typescriptlang.org). The frontend is [React](https://react.dev) using [Chakra UI](https://chakra-ui.com) components, the backend is [Node](https://nodejs.org) using [Express](https://expressjs.com) and also [Prisma](https://www.prisma.io) as an ORM connected to a [Postgres](https://www.postgresql.org) database. The project is structured as a monorepo using [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces) with [Turborepo](https://turbo.build) 🤓 #### Where is dundring.com headed? Our goal with [dundring.com](https://dundring.com) is to have an easy to use and lightweight application with all the necessary features needed to make the indoor cycling season alright. It also serves as a playground where we can explore new ways of indoor training, potentially making the winter a bit less unbearable for cyclists in colder parts of the world. ☃️ Try the app at [dundring.com](https://dundring.com) or check out the source code on [GitHub](https://github.com/sivertschou/dundring)! 🤠 _If you want to contribute or have any questions, head over to the_ [_dundring.com Slack workspace_](https://join.slack.com/t/dundring/shared_invite/zt-10g7cx905-6ugYR~UdMEFBAkwdSWOAew) 🤓 ## Relevant resources recommended by the author - [Communication with Bluetooth devices using React and TypeScript](https://www.bekk.christmas/post/2021/12/web-bluetooth): Read more about how to control Bluetooth devices with React and TypeScript through Web Bluetooth in our article from 2021