Foo Bar Finder

Table of Contents

• Deployed Application
• Description
• Technologies
• Usage
• Application Demo
• License
• Contact

Deployed Application

Foo Bar Finder is live. Click to visit the deployed application.

Description

Foo Bar Finder is browser-based web application for busy foodies. Toggling the application between food and drink modes, users can search for new meal and cocktail recipes by category or main ingredient. Favorites can be saved locally for quick and convenient future reference.

Technologies

• HTML
• CSS
• Bootstrap 4
• JavaScript
• jQuery
• AJAX
• TheMealDB API - View Docs
• TheCocktailDB API - View Docs

Usage

• Users can toggle between searching for recipes and searching for cocktails by toggle the Food and Drinks buttons in the top righthand corner of the navbar.

• Each side of the user interface loads a random food or cocktail recipe on launch.

• The chevrons on either side of the recipe title can be used to cycle forward and backward through the search results if more than one recipe matches the search parameters.

• If a user finds a recipe or a cocktail they'd like to save, it's as simple as clicking the Save Recipe or Save Drink button below the search form. Recipes and drinks are saved locally inside the browser.

• Deleting a recipe or drink deletes it both from the user interface and from local storage.

Application Demo

UX/UI demonstration using desktop layout on the recipe side:

UX/UI demostration collapsing from desktop to mobile layout on the drinks side:

License

Copyright (c) 2021 J.K. Royston, Emily Todt, and Kevin Spoth
Licensed under the MIT License.

Contact

J.K. Royston
[email protected]
GitHub

Emily Todt
[email protected]
GitHub

Kevin Spoth
[email protected]
GitHub