Project ClutchRelease

Riding a motorcycle is one of my hobbies and being also a runner, I am used to having the possibility to track and summarize my tracks. Therefore, I wanted to create my own CMS powered motorcycle blogging website with advanced functionality tailored specifically to motorcycle riding.

Features & Noteworthy

At the core of this application is the ability to handle gpx files. These files are generated by most, if not all, available gps tracking devices such as running watches and navigation apps. The site includes functionality to upload such a gpx file. The route of the file is then displayed on a map and contains interesting additional information like the total distance of the ride and an altitude profile of the track.

Additionally, it is possible to add videos to the page. Such a video can either be stand-alone or it can be linked to a part of the track. A linked video will appear as a video icon on the map and on a user interaction will switch to the video mode to play and display a marker of the current position on the map.

There are quite a few things that make the site especially interesting. While most platforms support basic blogging capabilities like text editing and image handling, ClutchRelease required complex functionality like the possibility to upload files of the routes I rode, display them on a map and connect them automatically to video recordings of the ride.

Easy Admin Interface

In contrast to other platforms and CMS solutions, the admin interface is a joy to work with. It allows to work quickly and easily with the content, since it is not as bloated as other solutions, but includes preview capabilities, even for gpx related content.

Technical Information

ClutchRelease is built on a very modern stack, which comes with a multitude of advantages in terms of cost, speed and reliability. Hosting of the application is basically free and the site is lightning fast, resulting in top core web vitals and lighthouse scores.

Serverless hosting

The website is built in such a way that it is statically exported on content changes. This means that instead of needing costly and slow servers to generate the page for each request, a version is always immediately available for the users. The generated website is hosted via Netlify, which comes free of charge for up to 100 GB of traffic. In addition to netlify, I used cloudinary to host image and file content, which allows to perform significant optimizations on these files. Because of these two hosting solutions, I am able to run the page at zero cost. From my estimations the earliest time I will need to upgrade is once the site reaches 100.000 unique users per month.

High Performance & Core Web Vitals

Static sites are fast, very fast! Built with Next.js, ClutchRelease is such a site. For additional optimization the static site is served via Netlify and their CDN. The only thing that could slow down such a site, would be many bloated images. Yet, while the site is heavy on images, it contains code to highly optimize the pictures and therefore doesn't suffer any performance penalties for it's high quality images.