foggy san francisco

Hi, I'm Sarah. I'm a Full Stack Developer passionate about leveraging technology to solve real world problems.

Mozilla

As Software Engineer Intern on the Treeherder team, I worked with mentors and internal users to rebuild - in React, Redux and Django - a legacy dashboard for tracking and analysing intermittent test failures that occur during Firefox/gecko continuous integration automation. See it live.


Intermittent Failures View


intermittent failures main view

View the code on Github.

MY CONTRIBUTIONS

  • Complete ownership over the application UI, which used the React state for UI interactions and Redux state for data
  • Creation of three new API's in the Treeherder Django server to service the UI's graphs and two views/routes

We Vote

We Vote is an open-source nonprofit with a mission to increase voter turnout. As Software Engineer Intern, I worked across the stack - in React, Bootstrap, SASS, Python, Django - to build several features for their web app.


Donation Platform


donation platform interface

Stripe's Checkout library was used to allow We Vote to process donations securely on its web app. The library provides a secure form for entering credit card details that transmits encrypted payment data directly to Stripe and returns a unique token. The token is then passed to the server to process donations and save non-sensitive information to the database.

View the ReactJS code or the Django code on Github.

MY CONTRIBUTIONS

  • Integration of Stripe’s vanilla Javascript Checkout library into the React UI.
  • Features that included custom amount, monthly donation options and loading components
  • The view, controller and models in Django for processing transactions and saving non-sensitive customer information and donation plans to the database.
  • Dynamic error handling for internal server errors, stripe server errors or specific credit card errors
  • Readme for first-time contributors wanting to work on this feature

Select Previous Ballot Guides


multiple ballots modal

We Vote’s web app allows users to create personal ballot guides for local and national upcoming elections based on their address. For this feature, we wanted to allow users to access any personal ballot guides from past elections that they had created. The gear icon to access this modal will only show if a user has created a ballot guide from a previous election.

View the ReactJS code or the Django code on Github.

MY CONTRIBUTIONS

  • Collaborated with the UX Designer to implement the modal’s interface design.
  • Created the React component and SASS stylesheet for the modal pop-up.
  • Created the API for retrieving a users previously saved ballot guide list.

Onboarding Tour


onboarding tour in web
onboarding tour in mobile

We Vote wanted to create an introduction to its web app for first time users. This responsive, mobile friendly onboarding tour integrates the react-slick carousel slider and the Green Sock Animation Platform (GSAP) for the final slide, which contains animated text. See it live.

View the ReactJS code on Github.

MY CONTRIBUTIONS

  • Participated in the design sprint that kicked off idea generation and prototyping for this feature; contributed to the final prototype using the moqups tool.
  • Curated and prepared (manipulated, cropped and compressed) background images for each slide.
  • Created routes, components and the stylesheet with a focus on responsive styling.
  • Integrated the react-slick carousel slider and GSAP animation library.
  • Created a call-to-action page to direct people to their first ballot at the end of the tour.

Other Projects

Neighborhood Map


neighborhood map

As part of my final Udacity Front End Web Development program, I created a single-page app of a local neighborhood. I integrated the google maps and Foursquare API’s and used the KnockoutJS framework to filter map markers and the list view. See it live.

View the code on Github.


Contact me here or via LinkedIn