Searching for Success at Strava

Published in

strava-engineering

6 min readNov 15, 2022

Introduction

Hi, my name is Navika Budhraja and I’m a rising senior at UC San Diego studying Computer Science. This summer I was a web-frontend engineering intern on the Athlete Services team and consequently, got to learn a lot about how to develop athlete-facing products!

During my internship, I worked with 3 other interns, Emily (Server), Sahil (iOS), and Ryan(Android), on a project to add filtering and searching logic to athlete’s saved routes, which in my case, meant working on the My Routes page on the web.

“Old” My Routes that I would be improving

Like the paths of many Strava routes, adding this feature on the web was not going to be a straightforward process. As you may already know, Strava is currently in the process of moving code out of their Ruby on Rails monolith called Active to React-based frontends. Since the code for the current My Routes page lives in active, I was also tasked with migrating the page from active to a React microfrontend before adding filtering/search logic.

😱…My Face exactly when I first read my project description, especially with super rusty React skills and no conception of what a microfrontend was (was it like a tiny frontend or like a craft, hipster frontend sort of like a microbrew?). However, what I came to learn is that when you work in an incredibly supportive and encouraging environment, the process of rolling out a requested feature in just 12 weeks with no experience isn’t actually as daunting as it sounds.

In the spirit of the Warriors winning the championship earlier this summer (Yes, I am still riding the high), I will break down these past 12 weeks in terms of quarters of a basketball game!

First Quarter: Onboarding & Jams

Although I wanted to jump in and start working on a project right away, I first had to get acclimated to a new code base, actually 2 new code bases: active (the monolith) and web (the monorepo where my microfrontend will live).

By fixing some minor bugs on the website, I learned some integral lessons about all things web dev at Strava. Some of the most important takeaways being: always make sure to squash your commits, even if you don’t like birds canaries are your friend (a.k.a use them thoroughly for testing and don’t break a page like I once did), and Coffeescript and Haml are the best programming languages to ever exist…just kidding!

Now that I was feeling a bit more acclimated to Strava’s web platform, it was time to brush up on those React skills I mentioned earlier. Luckily, this need for a React refresher coincided perfectly with JAMS week, where I was able to jam with a few web-engineers on revamping the monthly stats visualizations in React on the Training Calendar page. Just from observing, asking questions, and experimenting during JAMS, I was able to have a nice introduction on all-things React prior to jumping into the project.

A statistics visualization I crafted up in React for JAMS

Second Quarter: Rails-React Migration

After onboarding, I was surprised at how quickly this migration went, as I was able to set up and federate my microfrontend, put it behind a feature flag, and start developing React components seamlessly, further demonstrating the ease of developing on a microfrontend as opposed to active. Migrating the page was by far one of my favorite parts of the project, as I thoroughly enjoyed bringing to life Figma designs on the frontend and would enthusiastically send little video updates to my mentor Patrick whenever I would add new UI elements to my microfrontend, like this one below!

Any early-stage version of the filtering menu’s UI

Through this process, I felt myself getting more comfortable with more advanced topics in React like using states, hooks, and contexts, which made some of the nitty-gritty aspects of the site easier to implement as I went along.

Third Quarter: GraphQL Integration & Frontend Bug Bash

Now that I had all of the UI in place, it was now time to make things functional! Since we were migrating the page out of active, in order to bring data and functionality to the page, we needed to hit a GraphQL endpoint as opposed to an endpoint on an active. Although making calls to a GraphQL endpoint was something completely new to me, pair-programming sessions with Patrick, extensive documentation reading, and conversations with server engineers made the process quite straightforward. I enjoyed the process of integrating my UI with the backend, especially when I finally got to remove placeholder elements with real user data and started to implement filtering and search logic!

Route Tiles populated with my routes data

During this time, I also participated in the July Frontend Bug Bash, a two-day period dedicated to fixing any lingering bugs on the web. The not so subtle bug bash leaderboard ignited my competitive spirit, as I bashed 5 different bugs and in classic intern fashion accidentally created a bug in the process of fixing one, which was a learning process in and of itself.

Fourth Quarter: Finishing Touches, Testing, & Demos

Throughout the development process, I developed a bit of a bad habit of leaving little TODO comments in my code for minor changes that I would eventually come back to. Luckily, near the end, I had the time to go through all of my React components and fix up every little TODO in my own little personal project bug bash. With some extra time I had left during my internship, I also wrote some UI tests in Jest to ensure I didn’t miss any further bugs. In the last few weeks of my internship, I got to demo my work to both the Athlete Services Team and the Frontend Guild, which was super exciting and made me proud of the work I was able to complete during my short time here at Strava.

Overtime

Since the internship was remote, I was able to split time between San Diego and the Bay Area. When I returned to the Bay, I started going to the SF-Office periodically and got to meet some amazing people in the process! Whether it was pair-programming with my mentor Patrick and unofficial Strava mascot Nomnoms, going on boba runs with other interns, or covering a wide-range of topics during Wednesday lunches (some of my favorites included musical festivals, the lack of school buses in the Bay Area, and supersonic aircrafts), I genuinely enjoyed each and every interaction I had with everyone at Strava, which made me feel really excited to be a part of the community!

In conclusion, this summer, I helped build some new features, worked with newer languages/tech, and broke a few minor things here and there in the process, all of which helped me grow both as an engineer and a person this summer!

This was one of my most fun summers to date and I can safely say that working at Strava contributed more to my overall happiness this summer than the Warriors winning the championship!