Merge branch 'master' into Nancy-sprint4

Author: nancysun0415

README.md

@@ -1,6 +1,6 @@
-![Workflow Status](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/blob/master/.github/workflows/back-end.yml/badge.svg?event=push)
+![Workflow Status](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/actions/workflows/back-end.yml/badge.svg?event=push)
 
-![Workflow Status](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/blob/master/.github/workflows/front-end.yml/badge.svg?event=push)
+![Workflow Status](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/actions/workflows/front-end.yml/badge.svg?event=push)
 
 ## Project Description
 
@@ -34,32 +34,38 @@ Please refer to the [CONTRIBUTING.md](https://github.com/agiledev-students-sprin
 
 **Front-end**
 
-1. run `cd front-end` to navigate to front-end folder
-2. first run `npm install --legacy-peer-deps` (please ignore the error for now)
+1. first run `cd front-end` to navigate to front-end folder
+2. then run `npm install` to install the front-end dependencies
+3. create a `.env` file in the front-end directory with the following content:
+```
+PORT=3001
+REACT_APP_SERVER=http://localhost:3000
+```
 
 **Back-end**
-
-1. run `cd back-end` to navigate to back-end folder
-2. run `npm install`
-3. create a `.env` file in the back-end directory with the following information:
-    > MEAL_DB_API_KEY=9973533
-    > SPOONACULAR_API_KEY=86b8ac3348974b5ab495921e201be0de
-    > JWT_SECRET=whats.for.dinner
-    > JWT_EXP_DAYS=60
-    > MONGODB_URI=mongodb+srv://dinner:[email protected]/test?retryWrites=true&w=majority
-    > EMAIL_USERNAME=[email protected]
-    > EMAIL_PASSWORD=nuzvkswprpbdvozh
-
-    *Note: You should go to "https://www.themealdb.com/" to create your own account and replace the value with your own api key. But for demonstrantion simplicity we provide you with the api key for now.*
+1. first run `cd back-end` to navigate to back-end folder
+2. then run `npm install` to install the back-end dependencies
+3. create a `.env` file in the back-end directory with the following content:
+```
+MEAL_DB_API_KEY=9973533
+JWT_SECRET=whats.for.dinner
+JWT_EXP_DAYS=60
+MONGODB_URI=mongodb+srv://dinner:[email protected]/test?retryWrites=true&w=majority
+SPOONACULAR_API_KEY=86b8ac3348974b5ab495921e201be0de
+[email protected]
+EMAIL_PASSWORD=nuzvkswprpbdvozh
+CORS_ORIGIN=http://localhost:3001
+```
+    *Note: For this project, we have provided the following credentials. However, for real projects, please visit "https://www.themealdb.com/" to create an account and replace <MEAL_DB_API_KEY> with your own API key. Similarly, replace <MONGODB_URI> and <SPOONACULAR_API_KEY> with your respective API keys.*
 
 ### Running
+1. If you are testing either the front-end or back-end, you can run `npm start` in the corresponding folder.
+2. If you are running both the front-end and back-end together, run `npm start` separately in each folder and view the app on http://localhost:3001.
+3. If you are using a Windows PC, please run `npm run start-pc` instead of `npm start` for the front-end.
 
-1. if you are only running the front-end or back-end for testing purpose, you can simply run `npm start` in the corresponding front-end/back-end folder
-2. if you are running both front-end and back-end, please first run `npm start` in the back-end folder and then in the front-end folder. When you encounter the question `Would you like to run the app on another port instead? › (Y/n)`, type "y" to run the front-end on port 3001.
-3. if you are working on a Windows PC, please use `npm run start-pc` instead for front-end.
+## Deployed front-end
+To view our front-end code live on the web, go to https://monkfish-app-fjlpj.ondigitalocean.app/
 
-*Note: some of our pages won't work properly if you run back-end on port 3000 and front-end on port 3001*
-4. now you can open [http://localhost:3000](http://localhost:3000) in your browser to view our app.
 
 ## Additional Resources
 

back-end/README.md

@@ -13,39 +13,55 @@ To install the back-end dependencies, run the following command in the terminal:
 
 ## Running the Server
 To start the back-end server, run the following command in the terminal:
-`npm start`
-Please make sure if you run front-end first before you start the back-end server.
+`npm start`.
 This will start the server at http://localhost:3000.
 
 API Endpoints
 The back-end provides the following API endpoints:
 
-/recipes - GET
-/recipes/sort-by-time - GET
-/recipes/sort-by-difficulty - GET
-/recipes/:id - GET
-/search - GET
-/random-recipe -GET
-/my-ingredients - GET, POST
-/search-ingredient - GET
-/utensils - GET, POST
-
-## API_KEY/Database Configuration
+- POST /auth/signup: sign up a new user account
+- POST /auth/login: log in to an existing user account
+- POST /auth/logout: log out of an existing user account
+- GET /auth/user: get the current user's information
+- POST /auth/reset_password: request to reset the user's password
+- PUT /auth/reset_password/:token: reset the user's password using a password reset token
+- GET /recipes: get all recipes
+- GET /recipes/:id: get a single recipe by ID
+- POST /recipes: add a new recipe
+- PUT /recipes/:id: update an existing recipe by ID
+- DELETE /recipes/:id: delete an existing recipe by ID
+- GET /ingredients: get all ingredients
+- GET /ingredients/:id: get a single ingredient by ID
+- POST /ingredients: add a new ingredient
+- PUT /ingredients/:id: update an existing ingredient by ID
+- DELETE /ingredients/:id: delete an existing ingredient by ID
+- GET /utensils: get all utensils
+- GET /utensils/:id: get a single utensil by ID
+- POST /utensils: add a new utensil
+- PUT /utensils/:id: update an existing utensil by ID
+- DELETE /utensils/:id: delete an existing utensil by ID
+- POST /share-recipes: upload a new recipe
+- POST /cookie: set a cookie for the user
+- GET /protected: get some protected content that requires authentication
+- POST /contact-us: send a message through the contact us form.
+
+## External APIs / Database Configuration
 The back-end connects to relevant APIs and a MongoDB database. To configure the database connection, create a .env file in the root directory with the following information:
-'''
-MEAL_DB_API_KEY=<meal_db_api_key>
-DB_HOST=<database_host>
-DB_NAME=<database_name>
-DB_USERNAME=<database_username>
-DB_PASSWORD=<database_password>
-'''
-Go to "https://www.themealdb.com/" to create an account.
-Replace <meal_db_api_key> with your own api key.
-Replace <database_host>, <database_name>, <database_username>, and <database_password> with your actual database information.
+```
+MEAL_DB_API_KEY=9973533
+JWT_SECRET=whats.for.dinner
+JWT_EXP_DAYS=60
+MONGODB_URI=mongodb+srv://dinner:[email protected]/test?retryWrites=true&w=majority
+SPOONACULAR_API_KEY=86b8ac3348974b5ab495921e201be0de
+[email protected]
+EMAIL_PASSWORD=nuzvkswprpbdvozh
+CORS_ORIGIN=http://localhost:3001
+```
+For this project, we have provided the following credentials. However, for real projects, please visit "https://www.themealdb.com/" to create an account and replace <MEAL_DB_API_KEY> with your own API key. Similarly, replace <MONGODB_URI> and <SPOONACULAR_API_KEY> with your respective API keys.
 
 ## Unit testing
 To run the test suite and generate a code coverage report using Istanbul NYC, you can use the following command:
-`npx nyc mocha --exit`
+`npm test`
 
 ## Contributing
 To contribute to the back-end, please follow these steps:

back-end/controllers/RecipeController.js

@@ -158,9 +158,11 @@ class RecipeController {
             rating
           };
           recipe.Comments.push(newComment);
-          await recipe.save();
           const averageRating = await RecipeController.getAverageRating(recipeId);
           recipe.Rating = averageRating;
+          console.log(recipe.Rating)
+          await recipe.save();
+          console.log(recipe.Rating)
           res.status(200).json({ message: 'Comment added successfully', averageRating});
         } catch (error) {
           console.error(error);

back-end/models/recipes.js

@@ -9,7 +9,7 @@ let recipeSchema = new Schema(
         Instructions: {type: String},
         Image_Name: {type: String},
         Cleaned_Ingredients: {type: String},
-        Rating: {type: Number},
+        Rating: {type: Number, default: 0},
         Comments: {type: Array}
     }
 )

back-end/package.json

@@ -4,7 +4,7 @@
   "description": "The back-end of your project will live in this directory.",
   "main": "index.js",
   "scripts": {
-    "test": "nyc mocha test/**/*.js",
+    "test": "nyc mocha test/**/*.js --exit",
     "start": "node server.js"
   },
   "keywords": [],

back-end/routes/ingredients.js

@@ -2,6 +2,8 @@ const express = require('express');
 const router = express.Router();
 const IngredientModel = require('../models/ingredients.js');
 const { body, validationResult } = require('express-validator');
+const fetch = (...args) => import('node-fetch')
+  .then(({default: fetch}) => fetch(...args));
 
 // Get all ingredients from the database
 router.get('/my-ingredients', async (req, res) => {

back-end/test/login.test.js

@@ -33,7 +33,7 @@ describe("Login", () => {
   })
 
   describe("POST /auth/login with correct username/password", () => {
-    const formData = { username: "ginettexu", password: "jmb8dshp" } // mock form data with correct credentials
+    const formData = { username: "chenyi", password: "123456" } // mock form data with correct credentials
     it("it should return a 200 HTTP response code", done => {
       chai
         .request(server)

back-end/test/share-recipes.js

@@ -156,7 +156,7 @@ describe('POST /share-recipes', () => {
       .end((err, res) => {
         expect(err).to.be.null;
         expect(res).to.have.status(200);
-        expect(res.body).to.have.property('message', 'Recipe uploaded successfully.');
+        expect(res.body).to.have.property('message', 'Recipe successfully uploaded');
         done();
       });
   });

front-end/README.md

@@ -2,73 +2,13 @@
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-## Setting up
-    1. run `npm install`, please ignore the error appeared for now, we will resolve it later.
-    2. then run `npm i @material-ui/core --force --save`
+## Installation
+To install the front-end dependencies, run the following command in the terminal:
+`npm install`
 
-## Available Scripts
+## Running the Server
+To start the front-end server, run the following command in the terminal:
+`npm start`. This will start the server at http://localhost:3001.
 
-In the project directory, you can run:
-
-### `npm start`
-**Note**: Please run the front-end first before you start the back-end server.
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+## Deployed front-end
+To view our front-end code live on the web, go to https://monkfish-app-fjlpj.ondigitalocean.app/

front-end/package.json

@@ -16,14 +16,14 @@
     "web-vitals": "^3.3.1"
   },
   "scripts": {
-    "start": "PORT=3001 HOST=0.0.0.0 react-scripts start",
+    "start": "PORT=3001 react-scripts start",
     "start-pc": "set PORT=3001 && react-scripts start",
 
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "https://lobster-app-4dv57.ondigitalocean.app/",
+  "proxy": "https://lobster-app-4dv57.ondigitalocean.app",
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -41,11 +41,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devServer": {
-    "allowedHosts": [
-      "0.0.0.0",
-      "monkfish-app-fjlpj.ondigitalocean.app"
-    ]
-  }  
+  }
 }

front-end/src/Home.css

@@ -14,3 +14,8 @@ nav a {
   text-decoration: none;
   color: black;
 }
+
+h2 {
+  text-align: center;
+  font-size: larger;
+}

front-end/src/Home.js

@@ -32,7 +32,7 @@ const Home = (props) => {
           <li><Link to="/my-ingredients">My Ingredients</Link></li>
           <li><Link to="/utensils">My Utensils</Link></li>
           <li><Link to="/saved-recipes">My Saved Recipes</Link></li>
-          <li><Link to="/recipes">Search Recipes</Link></li>
+          <li><Link to="/search">Search Recipes</Link></li>
         </ul>
       </nav>
       <div className="RecipeList">

front-end/src/Login.css

@@ -1,5 +1,20 @@
 .Login {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
 }
+
+.Login .main-content form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 10px;
+}
+
 .Login .error {
   margin-left: 20px;
   color: red;

front-end/src/Login.js

@@ -80,7 +80,7 @@ const Login = props => {
   // otherwise, if the user has successfully logged-in, redirect them to a different page
   // in this example, we simply redirect to the home page, but a real app would redirect 
   //to a page that shows content only available to logged-in users
-  else return <Navigate to="/" />
+  else return <Navigate to="/home" />
 }
 
 export default Login

front-end/src/MyIngredients.css

@@ -1,16 +1,20 @@
 .container {
     margin: 0 auto;
     width: 80%;
+    align-items: center;
   }
 
   .button-link {
     color: #ffffff;
     text-align: center;
     text-decoration: none;
+    font-size: medium;
+    max-width: 200px;
   }
 
-  h1 {
+  .h1 {
     text-align: center;
+    font-size: small;
   }
 
   .form-container {