justin19960919/recipeee

Recipee, a place where you find all your favorite recipes, and see how others succeed in cooking it! Out mission is to help impove life in the kitchen for millions of home cooks around the world

Recipeee

Background

This is a full stack web app utilizing the MERN stack. The backend runs a Express server, constructed with MVC architecture, which talks to a remote mongoDB Atlas server. The frontend runs a React.js server which communicates with the backend Express server via services (services folder) as the entry point. The mongoDB UML diagram can be found at: UML Diagram

Installation

To download the project, simply git clone, or download the .zip file from github. Once downloaded to your local machine:

To spin up backend/frontend server, go into the backend/frontend folder, and do the following:

1. Download all dependencies:

npm install

2. Then start server, using:

npm start

For security purposes, we will not provide mongoDB connection URL, so you will need to either create a local database, or remote one. The recipes.csv data file will be provided in the repo for you to import to the database.

To import the .csv file into local mongoDB database:

1. Download mongo database tools, with this link MONGO DATABASE TOOLS
2. Then import csv to database via:

mongoimport -d [Database name] -c [Collections name] --type csv --file [locations of csv file] --headerline

Functionality

This website that provides functionality:

• A visitor can register to become an user (NORMAL, PAID USER, ADMIN). Once becoming an user, he/she can login or logout, and access the profile page.
• • A user can see all followed users, and all liked recipes in Profile page.
• A visitor / user can search for recipes via a search bar, and see other ppl's comments, as well as leave comments.
• An admin user can delete any review, a user can delete his/her own review, a user cannot delete other people's reviews.
• A user can follow other users, and visit other user's profile page, displaying only public information. An admin can go to any profile, and see all information.
• A user can star (save) or like a recipe. The starred recipes will show up on the home page if the user is logged in, otherwise default images are displayed. A total of 5 starred recipes by the user will show on the home page.

Deploy Architecture

We used AWS as our cloud service provider, and used EC2 instances as our servers for both backend and frontend. We also set up load balancers for autoscaling, which will spin up more servers if CPU capacity is more than 75%. For more complete information about the service architecture and instructions, please refer to this google-doc

recipeee's Issues

Home page (Star recipes)

Query from user STAR recipes -- second row in home page
If user has >= 4 started recipes, use users recipes
else use dummy recipe from front end.

Star, Like functionality for recipes with users

• As an user, I want to star a recipe in the recipeDetail page, if I am LOGGED IN

• As an user, I want to like a recipe in the recipeDetail page, if I am LOGGED IN

CRUD review - frontend

As a user, I want to get the reviews of recipe, according to recipeId

Acceptance Criteria:

// From local Db

• query all reviews from backend
• create review of current user
• modify review of current user
• delete review of current user

Display top recipes (sorted by likes)

As a user, I want the home page top recipe content to be sorted by number of likes and shown on page.

• query from backend db
• Show top recipes (sorted by recipe likes) on home page

Change recipe search item LIKE, STAR, COMMENT icon

• Change recipe search item like, star, comment icon styling

Weather remote API (display on navigation)

• As a developer, I want the temperature of the current user's location to show on the navbar, if user allows location access

Dataset

As a developer, I need the dataset of recipe and reviews to do the work.

• Get the dataset of recipe and reviews

Profile (Likes, Follows)

Profile page needs to have:

Follow List of other users
Like list of recipes

• queried from backend Follow model,
• queried from backend Like model

UserFollowComponent
UserLikeComponent

import in profile page

Home page dynamic content for logged in user

• If logged in as user, display dynamic content from SAVED (star) recipes.

Query from user STAR recipes -- second row in home page
If user has >= 4 started recipes, use users recipes
else use dummy recipe from front end.

• implement logic using user functionality as distinguish

CRUD - backend - like, star, followlist, recommendation

backend crud

Paid user privileges functionality

• As a user, if I register as a paid user, I will have default DIFFERENT background color for the whole app
• As a user, if I register as a paid user, I will have a crown (font awesome) beside PROFILE link in Navbar

Follow functionality for user to follow other users

As an user, I want to follow another user if I visit his profile, and follow him

• add follow button on his profile page.
• implement follow functionality

Home page specific content

As a logged in user, I want the home page to display snippets of the most recent recipe or comment to other users posted by me.

• recipePost component

UML Diagram for database

User story example 1

• #13
• functionality 2

---

As an user, I would like to have a feature to review the chatbot and give feedback to Engineer team to help them to improve the chatbot.

Admin page

• An admin can see number of users registered, number of reviews created, and delete users as will.
• An admin can see a list of users that have registered

Recipe search - Backend

As a user, I want to search for recipes using the recipe name, so that I can get the recipe I want.

Acceptance Criteria:

• Filter the recipes According to the recipe name, and return the recipes with some basic information ( recipeId, recipeName, cookTime ...)

User Profile (private or public info edit)

UML Link:
https://drive.google.com/file/d/1E2uUDYjA-yFQnmoD5o5SFGSfrTb9b1bv/view
====== Fields ======
userID
userName (Type)
Name - Private Field
Email - Private Field
Likes (Number)

• As a user, I want to have a private profile that contains information only I can see.
• Edit my profile if needed.
• profile screen component
• edit profile component

As a developer, I need to

• pass backend user data to front end
• display front end user data
• connect edit profile actions with user CRUD actions

Admin page functionality

• admin can delete a review that is not created by the user

Different Navbar when login and logout

As a developer, I want user & non user to see different views of landing page after login.

Not logged in:
Login / Register

Logged in:
Logout / Profile

Demo user story

user story demo

CRUD user operation

Save user register information to mongoDB with server

• needs to be able to do CRUD with mongoDB

Landing Page

As a user, I want a well defined landing page to know what the application provides, and provide clear links t o different functionalities.

• landing page html
• landing page css
• landing page links to other pages

Front end user form validation

• Needs to correspond to the backend, and tell what input fields are wrong, for user to change

Determine database schema

Import Kaggle dataset to mongoDB, and specify tables for recipe

• Determine database recipe schema
• Determine fields in each table
• import data to mongodb

Exit Criteria:
schema is defined
data is in mongodb
node.js server is connected to mongoDb

Change UML diagram to fit current architecture

• change UML

(Patch) fix go back to prev page, is empty page

• Currently when I go back to /search, it will be empty page, should be about routes in App.js in frontend

Build user register page

Build up user register page (only front end)

• need to add header and footer after Jason is done

User login / logout / register (backend + frontend)

As a developer, I want to create user login, logout, and register functionality, and use sessions to store information.

• register and create new account, store user information into database
• Must allow choosing a ROLE (admin, user, paidUser)
• Must allow login and identifying themselves (backend: check password match)
• If not logged in, only allow search for recipe, cannot see other ppls PROFILE, if click other ppl's profile, or like, comment ...etc , FORCE LOGIN (go to login page)
• logout
• login page: /login ; logout page: /logout
• change Navbar according to state (not logged in : register, login; if logged in: profile, logout)

Recipe Detail View (Front end component, after search)

As a user, I want to see the recipe detail view, after clicking into the a recipe

• query from remote API, and display list

• review functionality

• display all reviews (Links to profile)

=================================================================================
Search/Search Results page requirements
The website should provide users the capability to search content from a remote service and display a summary of the results. Search and results can be in the same page or in separate pages. Maybe the search bar can be in the home page, and the results in a separate page. Or both in a separate search page. The results could be formatted in a list, or a grid, or a table. They can have a short description, and a thumbnail of the result. For instance, if you chose movies as your domain objects, then users must be able to search for movies. Users must be able to see a summary of the search results and navigate to a detail page that shows a detail view of the result. The search and results page must fulfill the following requirements.
Must provide a form to search a remote API, not your own API
Must provide a summarized list of results matching the search criteria. Results must come from the remote API, not your local database
Must provide a link/button to navigate to the details page (see below)
Must be mapped to /search when no search has been executed and no results exist
Must be mapped to /search/{search criteria} or /search?criteria={search criteria} when a search has been executed and according results shown
Can augment the results with related data in your local databases
The search and results page can be implemented as either a single page or separate pages. In that case a separate route can be used such as /results/{search criteria} or /results?criteria={search criteria}

=================================================================================

External Web API requirements
Create an interface to an external Web API such as Google maps, IMDB, YouTube, Yelp, Yahoo, Weather Channel, Yumly, Bestbuy, Amazon. The API should allow users to search for content, bookmark content, and retrieve details for a particular content element. If the API allows storing data, and relations between data, then the local database implementation is optional. If the API only allows readonly operations, then the local database implementation is required. For instance, LinkedIn and other social network APIs allow registering, login, creating posts, view friends, upload photos, follow friends, search. If you implement most of these features, then the local database implementation is optional. If instead you are only using the Web API to do readonly operations, then you must also implement the local database to store information about the search results locally in your database. Discuss the use of Web APIs with your instructor. A good place to start is at programmableweb.com

Display recommendations on home page (dynamic)

• Must display generic content for anonymous users.
• The content must be dynamic based on the latest data. For instance, you might display snippets and links to the most recent post, review, or member who recently joined. (query from recommendations table)
• Create dummy content in recommendations table in mongoDB (need to discuss photo (dark/light))

CRUD operation with recipe

As a user, I want to search for recipes using the recipe name and id, so that I can get the recipe I want.

Acceptance Criteria:

• Filter the recipes According to the recipe name, and return the recipes with some basic information ( recipeId, recipeName, cookTime ...)

• When given a recipeId, get data from database and provide the information to the front-end.

Recipe detail - Back-end

As a front-end developer, I need to get the recipe details from the database using the recipeId, so that I can render the website of recipe details.

Acceptance Criteria:

• When given a recipeId, get data from database and provide the information to the front-end.

CRUD recipe - backend

As a logged in user, When I CRUD recipes,I want the server to keep track of these data. So that when I refresh the browser, it reflects the changes I made.

• a server to store state changes permanently

functionality 1

Configure database

As a developer, I want the mongoDB database to be populated with data from the food datasets with decoupled tables, so that we can test out read operations and render at website.

Exit critieria:

• connect backend to mongoDB
• populate mongoDB with corresponding tables

Recipe detail web page - Front end

As a cooker, I want to see the recipe details on a web page, so that I can easily check the information of a recipe

Acceptance Criteria:

• When given a recipe, provide the details on a web page.

Logic : Justin

Other User component - information

• As a developer, I want ANONYMOUS user and PAID user to only see other user's: name, userName, likesList
• As a developer, I want ADMIN user to see all information
• As a user, I can only see public information of other users: name, userName, likesList

Privacy policy page

NEED TO CHECK IF WORD DOCX ARE FINISHED

https://docs.google.com/document/d/1De-UdZ8LpJt6tftlCsYcZz-BCyh8Nljz7KYO5DY00_8/edit#

• Come up with privacy policies (Privacy component - html, css, information)
• Canvas: 1. Ethics_Assignment2_VSD.docx 2. Ethics_Assignment1_Privacy.docx

Recipe search - Frontend

As a cooker, I want to get the recipes according to the recipe name, so that I can get the recipe I need.

Acceptance Criteria:

• Provide a web page having a search input field, allowing user to use recipe name to search recipes.
• After user click the search button, fetch data from backend and show the result list.
• Recipes should be clickable so that the user can get more information about that recipe by loading the recipe detail page.