Banana

Visualize your Strava activites

product design front end react
banana product image

Design / Development / User
2017 – Current

When I'm not on the computer designing products, you can find me on my bike clocking miles and training for the next cycling event. Most of my activities are tracked with Strava. In 2017 I set myself a goal to learn Firebase and React, so decided to turn my passion for cycling into an opportunity to build a client with Strava's APIs.

View Banana

Save your favourite activites.

One thing I wish Strava has is the ability to favourite / pin certain activites for easier access in the future. So I used Firebase realtime database to handle this piece of functionality. Any actvities marked as 'favourite' will show up in banana.fitness/favourites.

Favouriting activites
Favouriting activites.

Publish. Share. Brag.

Depending on your Strava privacy settings, Strava limits the information displayed on your activity url if the viewer is not authenticated. With Banana, you can explicitly publish an activity and share it publicly with anyone without a Strava account. See an example activity.

Publishing activites
Publish an activity and share it publicly with anyone.
Favouriting activites
Your activity data rendered beatifully and screenshot-ready.

Calories burned, in digestable units.

What started out as a giggle exercise turned out to be quite refreshing. Sometimes it's just nice to know how many pints of beer you deserve after a Gran Fondo.

Calories in digestable units
Calories in digestable units.

Year in Review.

Track your progress throughout the year at banana.fitness/year-review

Trials and tribulations.

I started Banana wanting to learn how to visualise data from Strava APIs. However before that, I realised it needed a few things first:

  1. Host a Node auth server to handle exchanging the OAuth token access codes.
  2. Implement Firebase Auth with Custom Tokens in order to allow users to sign in with their Strava accounts, at the same time create a new account on Firebase. This was required for any user related features, such as favouriting & publishing activities
  3. Since I'm hosting the app on Github Pages, I had to wrap my head around this tutorial on how Single Page Apps redirect works.

Having had zero experience in OAuth, it took me a good chunk of time to set it up. I got there in the end and it works. To be honest till this day I'm still not 100% I did it the right way, but hey it works🤞🏼.

Iterations.

Since it's early inception in May 2017, it has gone through incremental improvements. Areas such as the branding, functionality, usability and technical feats grew organically. I wish I had a clean Sketch file with each screen mockup, carefully considered and design for. Unfortunately this project was not the case.

UI Colors / Cartography

The UI colours were set early in the process. I knew I wanted a dark UI so didn't think too much and went for it.

However, I soon realise picking a dark cartography for routes wasn't ideal. Map features such as land, water, road provides much better context to the route than just a block of dark gray land.

And then I tried plugging in Mapbox...

But that wasn't enough so I added some start & finish markers...

Then I used ChartJS to render the stream data

Soon I realised I haven't got any indoor actvities to test the product with, so I pulled out my rollers and set out to work.

Launch

After a few weekends of tinkering around, I wanted other people to give the app a spin and launched it on the interwebs.

Banana has come a long way and I have enjoyed building it with React. It's a perfect little side project to motivate me to learn a new language and experiment with design ideas.

This project will be ongoing and maintained by me, and I welcome any feedback & suggestions to how Banana can help you achieve your cycling goals!