Architecture
Expand Stack
React.JS (https://reactjs.org/) with Ionic (https://ionicframework.com/)
Java Spring Boot with Spring Security (https://www.tutorialspoint.com/spring_boot/spring_boot_introduction.htm)
Potentially Spring Boot Mail (https://spring.io/guides/gs/securing-web/) or Twilio API (https://www.twilio.com/docs/usage/api)
(https://www.mysql.com/) [https://cloud.google.com/sql]
(https://dev.mysql.com/downloads/)
Google App Engine (https://cloud.google.com/appengine)
(API Service) will run on as a decoupled microservice. (requires Google Credential Paths on GCP JDK)
Postman (https://www.postman.com/)
Gatling (https://gatling.io/) or BlazeMeeter (https://www.blazemeter.com/)
https://react-google-charts.com/
https://thispersondoesnotexist.com/
The package manager will be npm for the Frontend and mavin for the backend.
Webapp Deployment Expand
To make a production build of the React JS/Ionic frontend, we will use the command ionic build which will produce static HTML files. For the backend, we will use the command mvn clean package appengine:deploy -P cloud-gcp after configuring Google Cloud Platform in the application.properties file, updating relevant manifests, and following the setup commands outlined at https://www.baeldung.com/spring-boot-google-app-engine. The backend will be in a JAR or WAR file to be deployed after configuring Google App Engine to run Java.
Our app will be a SPA. EXPLANATION NEEDED (for why we chose SPA?)
We can provide the final source code but our website will live for testing at "fridger.recipes".
Google App Engine allows for Docker containers and for platforms such as Node.JS and Java. It manages the instances and can scale automatically. Until our application is ready for beta deployment, we will use local machines which can use Node.JS for React and other packages such as Ionic, MySQL, and Java Spring Boot. To run the Ionic application in a development environment use the command ionic serve and to run Spring Boot use ./mvnw spring-boot:run. This application is intended to be fully written in React.JS components, making it a Single Page Application on the UI side. However, different views will exist for different users who will have roles. The application will use the React Router to navigate between pages and pass relevant parameters/props. Updates to states will be pulled from the Spring Boot API.
Administrator View
This will be the page an admin is brought to in order to log in to their admin account.
This will then be the landing page where an admin can then toggle between recipes, users, and management.
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.
Guest View
This page is the first thing a user of our web app will see upon visiting the site. 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.
Guest 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 guest 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 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.
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. If a guest tried to click on add a recipe, an error message would appear saying that they must first create an account.
User View
This is where any user is brought to sign in. Only users (people who have already made an account) or admins can 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.
Goals and Meals & Food Tracker
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:
Reviewing Recipes
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.
Tables
The Recipes table stores all recipes written by users to be viewed by other users.
The Users table stores all user accounts and account information.
The Ingredients table stores all ingredients in the system, using the foods from the Food Data Central database managed by the US Department of Agriculture.
The Reviews table stores all recipe reviews, and has links to both the Users and the Recipes.
The Goals table stores the user goals separate from the Users, and creates new goals when the user enables goal tracking.
ER Diagram
Common Queries
Add new recipe to the database
INSERT INTO Recipes VALUES
(RecipeID, Title, Author, Description, TotalTime, PrepTime, CookTime, Yield, Ingredients, EstimatedCost, TypeAlcohol, Tags);
Delete recipe from the database using RecipeID
DELETE FROM Recipes
WHERE RecipeID = (Recipe to delete);
Add new user to the database
INSERT INTO User VALUES
(UserID, Type, Email, Password, Name, Bio, DOB, Height, Weight);
Delete user from the database using UserID
DELETE FROM Users
WHERE UserID = (User to delete);
Create new ingredient, adding it to the masterlist
INSERT INTO Ingredients VALUES
(Name, Carbohydrates, Protein, Fat, Alcohol, Cost);
Add a new review to the database
INSERT INTO Reviews VALUES
(ReviewID, Author, RecipeID, Rating, Review);
Delete a review using the ReviewID
DELETE FROM Reviews
WHERE ReviewID = (Review to delete);
Create a new goal for a user
INSERT INTO Goals VALUES
(User, Type, Carbohydrates, Protein, Fat, CurrWeight, TargetWeight);
Remove a users goal
DELETE FROM Goals
WHERE User = (User to delete);
Get all users from the database
SELECT *
FROM Users;
Find all recipes that meet a condition (e.g. takes an hour or less to prepare)
SELECT *
FROM Recipes
WHERE TotalTime <= 60;
Find nutritional information about a particular ingredient (e.g. getting the amount of protein in 100g of chicken)
SELECT Protein
FROM Ingredients
WHERE Name=’Chicken Breast’;
Retrieving all reviews for a particular recipe
SELECT *
FROM Reviews
WHERE RecipeID=(Recipe ID);
Retrieving all reviews written by a particular person
SELECT *
FROM Reviews
WHERE UserID=(User ID);
Overall Structure
The general format for our API will be as follows:`api.fridger.recipes/v1/[Object/Graph]/[direct id OR parameter flags]`
API requests will return, post, and delete JSON arrays and JSON objects.
Recipes
api.fridger.recipes/v1/recipe/[parameters]
GET: View recipes where parameters match (ex. ?tag=vegan)
api.fridger.recipes/v1/recipe/:id
GET: View specific recipe with matching id
POST/PUT: Add recipe to database with matching id
DELETE: Delete recipe with matching id
Ingredients
api.fridger.recipes/v1/ingredients/[parameters]
GET: View ingredients where parameters match (ex. ?fat=0)
api.fridger.recipes/v1/ingredients/:id
GET: View specific ingredient with matching id
POST/PUT: Add ingredient to database with matching id
DELETE: Delete ingredient with matching id
Reviews
api.fridger.recipes/v1/review/:id
GET: View review by id
POST/PUT: Create review with id
DELETE: Delete review with matching id
api.fridger.recipes/v1/review/recipe/:id
GET: Get all reviews for recipe with matching id
User Information
api.fridger.recipes/v1/user/:id | User-specific authentication
GET: View user information with matching id
POST/PUT: Create user with matching id
DELETE: Delete user with matching id
api.fridger.recipes/v1/user/:id/profile
GET: View user profile info (Name, DoB, Bio, etc.) by matching id
User Goals
api.fridger.recipes/v1/user/:id/goals
GET: View user goals
api.fridger.recipes/v1/user/:id1/goals/:id2
GET: View user (with id1) goal with id2
POST/PUT: Create a goal with matching id2
DELETE: Delete goal with matching id2
User Created Objects
api.fridger.recipes/v1/user/:id/reviews
GET: View all reviews by user with matching id
api.fridger.recipes/v1/user/:id/recipes
GET: View all recipes by user with matching id
api.fridger.recipes/v1/user/:id/ingredients
GET: View all ingredients by user with matching id
Jadon
Backend Management/Class Design
Goals/User/Guest/Reviews
Adam
Deployment Management and Routing
Authentication and Login
Project Manager
Quinn
Database Creation and Management
Admin Functionality
Caroline
Frontend and Design
User Experience
Andrew
Recipe API
Mailtrap API
Nutrition Tracking Backend