Recipe Converter

Technologies Used:

  • React
  • Remix.run
  • CSS Modules
  • Wake Lock API
Visit the website
Screenshot of the Recipe Converter App
Screenshot of the Recipe Converter App

I enjoy cooking and trying new recipes, but often find myself needing to adjust serving sizes based on whether I'm cooking for myself, a few friends, or a party. In the past, I've tried to adjust ingredient quantities on the fly, but that often ends in me forgetting halfway through a recipe that I was changing the quantity size. It seems like this is a common problem for cooks, so I created a simple tool to help adjust the size of a recipe.

Before making this tool, I had looked at existing recipe converters and calculators online and noticed that they all seem to have one thing in common: they're generally difficult to use. They often require you to follow a very specific format when entering ingredients based on a long list of instructions or break ingredient entry into many steps, which makes converting the serving size harder. In designing my tool, I focused on asking the fewest questions possible, using a conversational flow and tone to make the site more accessible, and a more guided approach to entering ingredients and quantities to reduce the need for lengthy detailed instructions.

Features

Screenshot of the Recipe Converter App
Screenshot of the Recipe Converter App
  • Quantities can be entered as whole numbers, fractions, or decimals
  • Converts to fractions where appropriate
  • New servings can be converted to other units
  • Only appropriate unit conversions are displayed based on the input unit
  • Fully functional offline
  • Can be run as a Progressive Web App
  • Uses the Wake Lock API (in supported browsers) to allow users to keep the screen awake while they cook