MERN Recipe App with Authentication

Build a Full stack web application with MERN technology.

Final pages:

Here we go, we create projects step by step.

Create two folders in project folder: client and server folder

1. npm install -g yarn
2. Client/ yarn create react-app . Bug:

Debug:
1) npm install -g yarn
2) 系统属性-环境变量-系统变量-path-add yarn path

1. server> yarn init -> asked questions don’t need answer, just enter
2. server> yarn add express cors bcrypt jsonwebtoken mongoose
3. server> yarn add --dev nodemon
4. add src folder in server and add index.js in src folder
5. either is ok. But if we use the import, we must add ("type": "module",) in package.json

1. use the functions in index.js, and run server> node src/index.js to check whether server started.

1. add this to package.json, so that everytime nodemon started use src/index.js, we don’t need to use it manually.

1. create mongoDB database and link it to vscode, keep in mind to install mongoDB first:

1. make request to database: 1） create models folder in server/src, and create Users.js in models folder, import mongoose, define schema and export usermodel in this file

2） connect mongoDB compass, and create new database: recipes

3） create routes folder in server/src, and create users.js in routes folder,

4） import userRouter in index.js

5） get register post in routes:

6） add data in database manually

7） try to post a data to database:

8） add authentication and authorization functionality

9） delete the data created by myself manually, and try to add data by using API, the password was hashed randomly.

1. create login post and test it. If password is wrong will give error message, if correct will give token and userID:

1. Back to Frontend to create recipe: 1) client> yarn start

2) delete some files in client/src, and delete some lines in index.js and

3) install some packages in react:
client> yarn add react-router-dom axios react-cookie
react-router-dom is used to create routes and different pages inside of our website
axios is used to fetching data
react-cookie is used to deal with cookies in react

4) set routes system in app.js

5) create pages folder and some files in this folder

6) export pages in each file:

7) link to pages, if have error, try to restart the page by using: client> yarn start

8) create components folder and navbar.js file in client/src

9) create and write navigate file

10) add navbar to App.js

11) write App.css file

12) edit components page, edit Register and Login UI:

1. Make API requests
   
   
   
   

2. Modify login to logout, when logging in:
   
   
   

3. Creating API for recipes:
   1) Add Recipes.js in server/src/models, and define RecipeSchema in this file:
   

2) add recipes.js in server/src/routes, and define get & post routes in this file:

3) link routes to index.js in server/src folder

4) test adding recipes to database in insomnia:

5) test getting recipes from database:

6) import { UserModel } from "../models/Users.js", and add put, get "/savedRecipes/ids", get "/savedRecipes" routes

7) add savedRecipes in UserSchema:

8) create UI for recipe

9) send data to API

10) navigate to home page

11) display all recipes on the home page

12) add save recipe functionality:

13) display Saved Recipes page:

1. Backend token to validate all the request:
   
   
   

2. Display saved recipes only when user logged in.