Design
The admin interface is separated into three parts: recipes, users, and ingredients management. The sidebar gives access to all the pages necessary for admins to do their tasks right from the UI. Each feature allows for searching and relevant information to be fetched in a grid display.
Recipe management allows for public recipe viewing, approval, modification, and deletion by admins. This page is intended to make it easy for admins to search for recipes and view their metadata.
User management allows for user approval (skipping email verification) and banning. This page is intended for admins to view user data and resolve issues with those users. The plus fab allows for new accounts to be created by admins.
This page gives an overview of a selected user including their user data, recipes contributed, and notes that administrators can have on the users. By selecting the edit user button it's possible to edit user properties directly.
This page is similar to the registration form but it also allows for administrator accounts to be created by changing the selected role.
Ingredient management allows for public ingredient viewing, approval, modification, and deletion by admins. This page helps ensure there aren't duplicate or inappropriate ingredient items so the pantry UI is not cluttered.
This page is the first thing a user of our web app will see upon visiting the site. If a user is logged in, visiting the site will go to the dashboard home directly instead of this page, but guests and first time users are always directed here.
This is what the home dashboard looks like for users who aren't logged in. On the left is the sidebar of the different functionalities available to guest users. The most prominent features are the daily featured articles in the center of the page and the daily favorite recipes on the right side of the page. These two areas will scroll independently from one another.
Users can click on the gray silhouette in order to get to this account creation page. Here, the guest fills out all of the fields required by Fridger. After filling out all of the information the user submits the information and is sent to the interests page where they indicate to Fridger what kinds of foods they like.
Here users can choose what kinds of food they like in order to optimize Fridger's recipe recommendations. Once the new user has selected all of their preferences, they click on "Done" and are redirected to the user view and are able to take advantage of the full functionality of the app.
This is where website visitors are brought to sign in.
This is the main dashboard that is accessible to users after they create an account. It allows them to access all of the features of Fridger without restriction.
This section is where all articles posted to Fridger can be found. The user also has the ability to search for articles based either on their tags or keywords.
This is a sample of what an article could look like. A featured image on top, title, subtitle, and body text. Additionally, if the user scrolls all the way to the bottom of an article, they'll find an area where users can make comments. For the purposes of our app, only registered users (not guests) will be able to comment, but anyone can view them.
IMPORTANT NOTE: Clicking your user image, usually in the top right of main pages, will take you back to your user home/profile page.
When a user with an account first decides to use the tracker feature, the user will walk through a few setup steps. Once you select an option then you will automatically be moved to the next page. This information will be collected and stored in our database and in their accounts in case they need to edit anything. This will help calculate calorie needs and recommended recipes. Weight goal is to determine what the user wants from the app and specifically the food tracker
Determining activity is so we have an idea of what amount of calories the person will burn a day on their own so we can suggest a daily calorie intake.
Determining sex and age is because they both change someone's metabolism which changes how many calories one can consume per day.
This also will help us determine the number of calories the user can consume to reach their goal. It is the final step before seeing their dashboard.
Once the user clicks continue, they will be brought to their dashboard. This is an overview of their goals. They will also be able to access their dashboard from their main profile/account page. It shows how many calories they can eat per day to reach their goal. A user can see their overall progress if they are looking to either lose or gain weight. A bar graph shows their overall usage of how many calories they have left for the day, how many hours of exercise they have per day, and how much they have interacted with the recipe feature compared to other users. Here you will also be able to add a recipe to your profile for convenience. On the dashboard, you can also view your current meal plans. You can create several, one for dinners and one for lunch (for example).
You can edit the number of calories you have eaten by adding foods. After clicking on "add item" you will be brought to a search page. You can select all foods you want to add or remove.
A message will then appear asking you to enter the total calories and press confirm. Your total calories for that day will then decrease so you can see how many you may still consume to keep your goal.
If you want to remove a food from your calorie intake you can do the same process as adding but then this confirmation message will appear:
If you want to edit your exercise hours, you can enter those by clicking "add exercise" and this message will appear:
If you click "view" beside the meal plan you want to see, it will take you to that specific meal plan. Clicking on "view" next to Dinner meal plans will take you to a page like this. Here you can also click on view recipe to take you to the recipe for that meal. You can also toggle between weeks with the blue button on the right, but it will automatically take you to the current week.
In the meal plan view, the 3 dots on each weekday card allow you to edit the meal. Here is what happens when you click on the 3 dots. Clicking search will take you to search through all recipes.
Back on the dashboard, you can click on create "new meal" plan and it will show this message. This allows you to have multiple plans at once if you need.
From the user's main profile, they can access "my pantry." This will be where the user stores food items so they can keep track of their inventory and have the option to generate recipe options using items they already have on hand. In this section, items will be separated into 2 main groups, pantry items, and fridge items. Items will be further divided into categories like canned foods, grains, baking items, international foods, fruits, vegetables, etc. kind of how you would find things in a grocery store. On the right of the item, it shows the day you entered it so we can track when things might expire and for extra organization.
An alert icon will appear next to an item (like the one next to "peaches") if it has been in the pantry too long and clicking on it will prompt you to decide if you want to remove it or keep it.
Clicking edit on the pantry page will take you to a page to add or remove items. You will click on the edit button under the pantry section to add/remove something from the pantry and vice versa for the fridge. You can select multiple things at once to add or remove but adding items must be done separately from removing and vice versa. For example, you cannot select apples and carrots and expect to add apples but remove carrots. You must do one before the other.
Once you select everything you want to add this message will appear:
Once you select everything you want to remove this message will appear:
Using the "create meals" button on the pantry page you will see a small list of possible meals you can make with the items in your pantry.
You can scroll through and pick the ones you want to see more details about. Using the lasagna as an example, clicking on one will look like this:
The user can click on "Write a Review" and is brought to this page which allows them to rate the recipe on a scale from 1-5 stars and write a review including a title and a body.
Here you will see the ingredients and instructions. You can see who wrote the recipe, you can add a review or add to your favorites. You can also stay in this mode to view the other generated recipes or press the home button to return to the main page of all recipes. (I put the link to the actual recipe because I took this off the internet for an example, normally there will not be a link since users will post their own recipes on the app)
Here is a base view of the recipe page for the user. The recipes that are searched will pull up results from the search, but if no search is made, some recipes will be shown based on the user. This page features a "Add a recipe function," a "search recipes" function, and a "leave a review" function.
Here is an example of what would happen if you search "Chicken" in the search bar. Different results would pop up to the user
Here is what the blank "add a recipe" page will look like to the user.
Here is what a partially completed "add a recipe" page will look like.
The use can write a review here for the recipe and give it a star rating 1-5.