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.
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.
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.
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.
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:
- Host a Node auth server to handle exchanging the OAuth token access codes.
- 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
- 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π€πΌ.
Built a reaaallllly basic @Strava client with @reactjs and @nodejs auth. No idea if this is even built correctly π©. pic.twitter.com/MlsW7yQAr4
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) May 22, 2017
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.
Tinkered with some more @reactjs and built something with @strava API.https://t.co/JlnPYCKtCQ pic.twitter.com/hz5lmuSrMT
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) June 6, 2017
And then I tried plugging in Mapbox...
Hooked @Mapbox into my shiny @Strava react client, working on turning off that fitbound animation π... pic.twitter.com/yVpHwsBfIA
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) June 11, 2017
But that wasn't enough so I added some start & finish markers...
Added start & end marker w/ tooltips. Goodnight ππΌ pic.twitter.com/Z78arVKeuG
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) June 11, 2017
Then I used ChartJS to render the stream data
Update: Wrangled with @chartjs in the @Strava app I'm building. β pic.twitter.com/adEBXcsbju
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) June 23, 2017
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.
When you donβt want to brave the cold outside. pic.twitter.com/ISSblTQCfV
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) June 28, 2017
Indoor data works on π βπΌ pic.twitter.com/P6AxsUxPow
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) June 28, 2017
Launch
After a few weekends of tinkering around, I wanted other people to give the app a spin and launched it on the interwebs.
https://t.co/Es5nH7K5AW
— Jacky Lee πΉπΌπ³πΏ (@p0pmaker) June 25, 2017
After many weekends of crawling through docs, I present to you: πBanana - with @strava @reactjs @Mapbox @chartjs
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!