Pair is a dynamic and mobile-responsive web application that lets a user search for food and cocktail recipes from separate databases and curate the results in one place. Pair is an essential tool for anyone looking for inspiration in the kitchen or behind the bar.
This project was a collaborative effort between the listed contributors. Using Agile software development techniques and version control, we adapted to changes in our end product by always aiming to choose the most lightweight, user-friendly option.
One of the most important parts of a collaborative project is setting, following and regularly comparing against a User Story and Acceptance Criteria. Pair's build criteria is listed as follows:
AS AN authenticated user
I WANT to use an app to locate food and drink recipes
SO THAT I can do meal planning
As an authenticated user...
WHEN I log into the app
THEN I can explore food or drink recipes
WHEN I am looking for a specific dish
THEN I can use a search box to pull recipes related to my search terms
WHEN I select a cuisine
THEN I can see an image and short descriptions for 10 different results for that cuisine
WHEN I select a specific dish
THEN I see a the ingredients, prep-time estimate, and instructions
WHEN I find a recipe that I want to use again
THEN I can save that recipe in the app
WHEN I am done with a saved recipe
THEN I can click a delete button to remove it from the list
WHEN I am looking for a specific drink
THEN I can use a search box to pull recipes related to my search terms
WHEN I select a category
THEN I can see an image and short descriptions for 10 different results for that drink category
WHEN I select a specific drink
THEN I see a the ingredients, prep-time estimate, and instructions
WHEN I find a recipe that I want to use again
THEN I can save that recipe in the app
WHEN I am done with a saved drink
THEN I can click a delete button to remove it from the list
Creating a wireframe to mock up UI design for the initial build helps nail down the main components and functionality a project requires. We start with Version 1, a simple concept of a single page. In our following development sessions we decided to build out secondary pages for generated results and saved "favorites." The Version 2 wireframes below demonstrate these changes.
| Results Page Concept | Favorites Page Concept |
|---|---|
 |
 |
By using the Materialize CSS Framework, along with media queries, we are able to develop PAIR as a fully responsive site. Below are views from large-sized screens, medium-sized tablet screens and small mobile screens.
| Tablet | Mobile |
|---|---|
 |
 |
Steve Babb
Keaton Brewster
Kat Buchanan
Brandy Quinlan
The url for the site is: (https://brandyquinlan.github.io/PAIR/)
The repo is located here: (https://github.com/brandyquinlan/PAIR/)