Sarah Phillips

Software Engineer

Projects

tolls_lol-01.webp

TOLLS-LOL

This web app uses Mapbox to visualize 2024's 311 complaints about obscured license plates in New York City.

It fetches data from the City of New York's Open Data API and displays the complaints on an interactive map.

  • + React
  • + Mapbox
  • + NYC Open Data API
learn more
visit site
meeting_background_maker-01.webp

Meeting Background Maker

This web app allows users to select images of items from the Cooper Hewitt Design Museum's collection to be used as backgrounds for online meetings. The user may browse through the museum's collection using keywords such as "bauhaus" or "modernism", or they may download existing sets curated by me.

  • + React
  • + Node/Express
  • + Cooper-Hewitt API
  • + React-Spinners
  • + react-masonry-css
  • + AWS S3 bucket
  • + Jimp
  • + s3-zip
learn more
visit site
so_trashy-01.webp

So Trashy

So Trashy uses the data visualization library d3 to represent New York City's Department of Sanitation's yearly collection of refuse & recycling, per person.

  • + D3.js
  • + React.js
  • + NYC Open Data API
learn more
visit site
artist_portfolio-01.webp

Artist Portfolio

A portfolio website for my visual art. The site includes a gallery and image modals.

  • + React.js
  • + Styled Components
learn more
visit site
nycha_outage_scraper-01.webp

NYCHA Outage Scraper

The New York City Housing Authority (NYCHA) maintains a page on their site that lists services outages in their developments for heat, hot water, water, elevators, electricity & gas.

This scraper extracts the data from the NYCHA website and saves the results in csv tables.

  • + Python
  • + Beautiful Soup
  • + Pandas
learn more
visit site
twohue-01.webp

TwoHue

Twohue is a one-player color mixing game. Players are presented with a color sample that they must recreate using two transparent color swatches.

  • + React.js
  • + Chroma.js (a color library)
  • + Node/Express
  • + Postgres
learn more
visit site

About

I am a Brooklyn-based developer formally trained in art. I have a background in public service, having worked as a consultant at a City of New York community board for seven years.

From 2022 to 2023 I was a Software Engineer for ed-tech startup Newsela where I worked on two React.js internal content management systems for the content creation team. Prior to that, I worked as an Interaction Engineer at the ad tech startup TripleLift where I created bespoke, consumer-centric templates for programatic ads and developed the in-house React application our team used to create those templates.

I strive to create visually interesting solutions that are broadly appealing. I believe tech should be intuitive, welcoming and delightful to interact with.

Skills

  • HTML
  • CSS
  • Javascript
  • Typescript
  • Node
  • Express
  • React.js
  • RESTful APIs
  • JQuery
  • D3.js
  • Jest
  • React Testing Library
  • Playwright
  • Cypress
  • Postgres
  • SQL
  • Heroku
  • AWS
  • VS Code
  • Jira
  • Agile
  • Scrum
  • Salesforce
  • Git
  • Agile Methodologies
  • Civic Tech
  • Data Visualization

Contact

TOLLS-LOL

TOLLS-LOL

This web app uses Mapbox to visualize 2024's 311 complaints about obscured license plates in New York City. It fetches data from the City of New York's Open Data API and displays the complaints on an interactive map.

The application caches the data to optimize performance, fetching new data only if the cached data is older than 12 hours.

Obscuring motor vehicle licenses plate is illegal in New York City. Those with obscured plates cost New York state money in lost toll revenue and removes the incentive not to speed where red light cameras are in operation. Obscured plates also hinder the ability of law enforcement to investigate crimes. Citizens may make 311 complaints online or by phone to report an obscured plate.


features

  • + map fetches and displays 311 complaint data
  • + interactive filter buttons
  • + interactive slider

Tech

  • + React
  • + Mapbox
  • + NYC Open Data API

Meeting Background Maker

Meeting Background MakerMeeting Background MakerMeeting Background Maker

This web app allows users to select images of items from the Cooper Hewitt Design Museum's collection to be used as backgrounds for online meetings. The user may browse through the museum's collection using keywords such as "bauhaus" or "modernism", or they may download existing sets curated by me.

The background images are pre-processed, server-side using the image library Jimp.


features

  • + user adds images to their collection
  • + user removes images from their collection
  • + user downloads collection as zip file
  • + selected images are resized, text overlay added
  • + user downloads pre-curated sets of images

Tech

  • + React
  • + Node/Express
  • + Cooper-Hewitt API
  • + React-Spinners
  • + react-masonry-css
  • + AWS S3 bucket
  • + Jimp
  • + s3-zip

So Trashy

So TrashySo Trashy
So Trashy

So Trashy uses the data visualization library d3 to represent New York City's Department of Sanitation's (DSNY) yearly collection of refuse & recycling, per person.

DSNY collects residential and public school refuse and recycling, empties street litter baskets, cleans up abandoned property such as cars, tires and bicycles and collects other types of refuse, such as the detritus left in public spaces after Superstorm Sandy.

DSNY does not pick up commercial refuse from offices, shops, business, institutions or construction sites.

The agency publishes monthly reports detailing how many tons of refuse, paper/cardboard and metal/glass/plastic/drink carton has been collected, categorized by borough and further categorized into Community District (CD).

I cross-reference two data sets to match the community district with the population of each district. Additionally I match the community district with neighborhood names which aren't official city designations as neighborhood boundaries evolve over time.


features

  • + sorting radio buttons
  • + hover interaction
  • + responsive design

Tech

  • + D3.js
  • + React.js
  • + NYC Open Data API

Artist Portfolio

Artist PortfolioArtist PortfolioArtist Portfolio

I used to use Wordpress for my artist portfolio site but I became disenchanted with the constant malware attacks and hosting fees.

This React.js site includes a gallery and image modals, which I created without the use of a library.


features

  • + image gallery
  • + image modal
  • + responsive design
  • + dark mode that responds to user setting preference

Tech

  • + React.js
  • + Styled Components

NYCHA Outage Scraper

NYCHA Outage Scraper

The New York City Housing Authority (NYCHA) maintains a page on their website that lists services outages in their developments for heat, hot water, water, elevators, electricity & gas. The outage site is updated daily, however there is no easy way for stakeholders to download the data.

This scraper extracts the data from the NYCHA website and saves the results in csv tables, within a folder named with the date and time of the scrape.


features

  • + scrapes data into csv tables

Tech

  • + Python
  • + Beautiful Soup
  • + Pandas

TwoHue

TwoHueTwoHueTwoHue
TwoHueTwoHue

Twohue is a one-player color mixing game. Players are presented with a color sample that they must recreate using two transparent color swatches. I use the color library chroma.js to dynamically create unlimited game rounds.


features

  • + sound on/off toggle
  • + game intro css animation
  • + randomly generated game rounds
  • + rounds become more challenging
  • + confetti animation
  • + leaderboard
  • + responsive design

Tech

  • + React.js
  • + Chroma.js (a color library)
  • + Node/Express
  • + Postgres

Resume