Overview

Our goal for this project is to create an information hub where students of UH Manoa can find, share, and learn new and creative recipes that will fit within the budget of a college student. For convenience and money’s sake, the majority of students will buy fast food or take out for their meals. However, this can lead to unhealthy eating habits as well as a selection of food that might not fit the constraints of every student, whether that be food allergies or intolerances.

To remedy this, our website will prompt UH students to begin or expand on their culinary education, learning how to cook up meals that will fit their specific needs. Users can browse through the current selection of recipes, as well as add their own, and favorite ones they want to try out! We hope that with the large selection of recipes, pricing information, ingredient and appliances, as well as acknowledgement of dietary constrictions, this will be able to help all students of UH Manoa.

Table of Contents

Community Feedback

To test the application, we took our website to the community to see what they had to say:

Aiden’s feedback: “I liked the searching and adding your own recipe functionality. I think the site could use a visual overhaul and some of the menus are confusing.”

Mairi’s feedback: “I thought the website was very easy to use and well designed to help me get what i was looking for. This has great potential for college students!”

Kye’s feedback: “The picture on the individual recipe page is way too small or thin. Some formats on the recipes page are not the same and some images do not show up. However, the overall application looks good.”

Catelyn’s feedback: “I would use this application because I live on my own and I want to eat and cook yummy food on a budget. Overall, the functionality of the application works great like adding & submitting recipes to the form, searching for recipes, and bookmarking my favorite recipes. However, some areas need a bit of touch-up such as the images of the individual recipe pages and the [landing] page feels a bit naked. Considering that this is the basic form of the app, I definitely see this app improving and having more potential!”

David’s feedback: “I like the concept of a database that prioritizes the needs of college students. Your color choices lend to a very cute vibe. The links at the top make navigation simple. When I added a recipe, you have a field called “Filters” that did not immediately make sense to me, and may not make sense to the average user. I am guessing this should be renamed to something like “tags” or “keywords” so the user realizes this is to help others locate this recipe.”

User Guide

Logging in

To log in, either type in your credentials or register here:

Step 1

How to Add a Recipe

To add a new recipe to the website, follow these steps:

Step 1

Click the Add Recipe button

Step 1

Step 2

Fill out the form and press the submit button to submit your recipe.

Step 2

How to Search for a Recipe

To search for a recipe, follow these steps:

Step 1

Click the Search button

Step 1

Step 2

Type in the search box anything you would like to search - ingredients, name, appliances, etc

Step 2

Step 3

Reset your filters by pressing the reset search button

Step 3

Step 4

To view the recipe in full, click on the recipe link.

Step 4

How to Favorite and View Favorite Recipes

To favorite and view your favorite recipes, follow these steps:

Step 1

After searching for a recipe, click the star icon on a recipe you like.

Step 1

Step 2

Favorited recipes will have a gold star

Step 2

To view your favorite recipes, click the favorites tab

Step 2

Developer Guide

Download

Download our source code from this project here.

Installation

First, install Meteor.

Second, once you have access to the YummyFoo repo you can clone the repo for yourself and open with a program like Github Desktop.

Third, once you have the project set up in a program like IntelliJ IDEA, you can open up the terminal inside the application, cd into the app/ directory and run:

$ meteor npm install

Fourth, to actually run the website use:

$ meteor npm run start
  • This segment might take a while to finish but you will know its done when something like this pops up:
  • This created the users that you can log into to access certain pages along with the default recipes built into the website
  • It also contains the link you can click on to open the website

Fifth, as a precautionary check you can run:

$ meteor npm run lint

to see if there are any errors, hopefully there won’t be any and you can run the website without any issue

Modifying the Application

To modify our work, create a clone of the application and open the project with an IDE (our team used IntelliJ). Cd into the directory of the app locally:

$ cd yummy-foo/app

Before modifying the application, below is the background and functionality of each page:

Landing Page

Upon loading the website users are directed towards our landing page. Along with a carousel, this page gives a description to users about our purpose behind creating this website and how they can use it.

Login

Next users should login or create an account in order to gain access to the websites main features.

User Homepage / Favorites

Once logged in users are then taken to a Favorites page which includes all of their favorites recipes. A new user would have a blank page and can add to their favorites by navigating to Search.

The search page allows users to search by any part of the recipe whether that be name, time, ingredients, or cost. From the results they end up with users can then click on either click on the name or picture to take them to that specific recipe page.

Specific Recipe Pages

This is the recipe page that includes all details about the specific recipe.

Add Recipe

From Favorites and also the navbar users can also navigate to the Add Recipe page where they can upload their own recipe by filling in all the form text fields and then uploading an image from their local device.

List Recipe Admin

For admins only, they are able to see all recipes and have the power to remove and edit any recipe.

Edit Recipe Admin

If admin clicks on edit they are given a pop up where they can change any details about the recipe and update it for all users.

About Us Page

Testing

In the test directory there are tests to ensure site pages display and function as they should. ci-badge

Deployment

Find our project website here!

Development History

The development process for Yummy Foo conformed to Issue Driven Project Management! practices. In a nutshell:

  • Development consists of a sequence of Milestones.
  • Each Milestone is specified as a set of tasks.
  • Each task is described using a GitHub Issue, and is assigned to a single developer to complete.
  • Tasks should typically consist of work that can be completed in 2-4 days.
  • The work for each task is accomplished with a git branch named “issue-XX”, where XX is replaced by the issue number.
  • When a task is complete, its corresponding issue is closed and its corresponding git branch is merged into master.
  • The state (todo, in progress, complete) of each task for a milestone is managed using a GitHub Project Board.

The following section documents the development history of Yummy Foo.

Milestone 1: Mockup development

The goal of Milestone 1 was to create a set of HTML pages providing a mockup of the pages in the system.

Milestone 1 was managed using Eat-Sleep-Foo-Repeat GitHub Project Board M1:

Milestone 2: Implementing Admin and list pages

The goal of Milestone 2 was to add more pages and tidy up the project as a whole.

Milestone 2 was managed using Eat-Sleep-Foo-Repeat GitHub Project Board M2:

Milestone 3: Work in Progress

The goal of Milestone 3 was to finish implementing real data, the rest of the site, and get outside trial and feedback.

Milestone 3 will be managed using Eat-Sleep-Foo-Repeat GitHub Project Board M3:

Link To…

Team

Yummy Foo is designed, implemented, and maintained by Aiden Woodard, Catelyn Jochim, David Rickards, Kye Steele, and Mairi Yoshioka.