Recipe Converter
Technologies Used:
- React
- Remix.run
- CSS Modules
- Wake Lock API
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
- 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