Making a recipe search tool with Vue.js and Tailwind CSS in a weekend

Introduction

One Saturday afternoon we decided to see what we could build with just a JSFiddle project to use as a starting point and a few spare hours.

JSFiddle is a website that has a free code editor that allows you to use pretty much any front end frameworks and technologies you want to build and test web apps. As it is web based, it works anywhere you can get a good internet connection, freeing you from needing to set up a development environment. We used Vue.js as the JavaScript framework for the tool, and then for the CSS, tried out Tailwind CSS a relatively new, but interesting CSS framework that is intended for building custom designs quickly.

Designing the app

We needed to think of something that can be built relatively quickly, does not need too much complexity on the back end and might even be of some use! We settled on building a very simple recipe search app. The basic idea is that you type in one or two ingredients you want to cook with, and the app finds a matching recipe. The user can then follow a link to the recipe, or perform another search either by using the search form again, or by selecting one of the ingredients from the matched recipe. We decided that the app needed some interest, and so it also need to incorporate lots of (hopefully somewhat related) imagery from Unsplash. Given that we did not have long for the build, we decided to forgo making any more complex of a design and instead got straight to building!

Building the app

So in order to fetch the matching recipe, the app makes an Ajax call to the Recipe Puppy API, which is a free API that returns recipes matching the ingredients you search for.

HTML

The HTML structure of the app is fairly simple:

The search section at the top houses an input for the ingredients you are searching for and a search button which triggers the search request.

Then below that we have a title card for the matching recipe that gets returned. In there we can display the recipe title and a link to the recipe itself. When we fetch the recipes back from the Recipe Puppy API they sometimes come back with a small thumbnail picture which we display next to the tile. To give the title a bit more interest we also added a background image that fetches a (hopefully) related image from Unsplash We used Unsplash source to get these images; which is a great tool for fetching images from Unsplash related to search terms you can set.

Lastly we have the ingredients section. This section grabs the comma delineated list of ingredients from the recipe and makes it into a list of ingredient cards with more background images taken from Unsplash Source. It is quite funny seeing the images that get matches for some ingredients, in an ideal world we would have a curated list of images, but Unsplash gives is a nice flavour of what could be achieved with more time.

JavaScript

The JavaScript for the app is where the real magic happens:

The most work went into the processRecipeResponse method which takes the response from the API and updates some Vue.js attributes which then update the interface with the magic of Vue.js. Sometimes the recipes that get returned are quite simple, so we added some code to try and get back the longest recipes feasible from the results we get back. We have added a few helper functions in there too including one that takes the ingredients we get back from the API and removes any duplicates. The app runs a default search when it mounts to give us a starting recipe to display.

Complications

The build went quite smoothly overall. Using Tailwind meant we only needed to write a small amount of CSS (and some of that could probably be refactored away).  The app works well as an initial demo, and it is interesting to see just how quickly simple web apps can be built with modern frameworks. You can try out the fiddle below, and feel free to play around with the code yourselves!

Leave a Reply

Your email address will not be published. Required fields are marked *