Pick a Kit: Meal Kit Aggregator

June 2017 - Present

Live at PickaKit.com

Why

Early in 2017, my family decided to try out a bunch of meal kit services (like Blue Apron or HelloFresh) for cheap or free.

There are many meal kit services, and each has their own meal offerings and deals, so it could take a while to pick one:

Meal kit menus

That gave me an idea: I could scrape meal kit menus off the sites' menus and show them all in one place.

How

I wrote a Node.js tool that fetched meal details off various sites, storing these details in a MongoDB table.

Then, I built an Express web server that read these details from the database and rendered a page with them.

Finally, I built a React app to display the meals - one carousel row per meal kit service, one card per meal:

Pick a Kit

Technical Highlights

Scraping Meal Details

This project involved a deep dive into scraping information from web sites, REST APIs, and GraphQL APIs, with many twists and turns:

  • To get details only found on specific meals' pages, I had to make a request for each meal, requiring rate limiting and complex async logic.

  • Some sites only displayed nutrition facts as images, so I used Tesseract.js to parse the text from these image.

  • Every time a site or API changed, I had to update my scraping logic and override the incorrect data that had been automatically collected.

Complex Pricing Calculators

One of the most complex parts of the frontend was a "pricing calculator" shown on each meal kit service's page.

I modeled this interaction on the option selector on Amazon's product page:

Amazon options selector

Here's what I wound up building (live at PickaKit.com/services/GreenChef):

Pricing Selector

This calculator shows the various plan and discount options, greying out certain options when they're mutually exclusive with the current selections.

Once all options are selected, the pricing calculator shows the final price, allowing users to pick the best plan and discount for their needs.

Card-flip Animations

Each card on the Meals page includes a button at its top-right corner that flips it over, displaying more details about the meal, like ingredients and nutrition facts.

To make this interaction as slick and intuitive as possible, I animated it with a CSS transform, so that the card would appear to flip over, with the meal image still partially visible "through" the card.

(TODO: add GIF of a card flipping over and back)

Pick a Kit today

Because of the heavy maintenance burden described above under Scraping Meal Details, in 2023 I stopped collecting meal kit details.

Still, the rest of Pick a Kit is live at PickaKit.com, and still makes a bit of affiliate money each year!

Mostly, though, it's a fun story I can share at Meetups, other speaking opportunities, and job interviews!

Here are the slides I used when I did just that, presenting my Pick a Kit story at a JavaScript Meetup: