MERN Recipe App with Authentication

YUN GU — Thu, 11 May 2023 02:02:33 +0000

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

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

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

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

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

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

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

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.

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

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:

Make API requests
Modify login to logout, when logging in:
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:

Backend token to validate all the request:
Display saved recipes only when user logged in.

MERN Tutorial For Beginners

YUN GU — Thu, 04 May 2023 05:59:18 +0000

MangoDB创建项目-> 创建数据库

VS code, 创建Server和client文件夹，cd server -> npm init -y(创建json file 在server文件夹内)

npm install express mongoose cors nodemon
(express是framework we’re going to use to build our api, mongoose沟通MongoDB和express、node.js的桥梁，cors沟通react and backend)

Server文件夹下创建index.js，这个文件用来存储api

const express = require('express')
用来import express library

const app = express()
设定app 变量用来使用express library

SERVER运行的时候打印这个语句。

测试是否布置成功， server会一直running，用ctrl+c终止

Server/package.json 添加一行start, 每次运行npm的时候会一起start nodemon，当文件变化时候，每次运行npm会检查更新，使得开发环境更加简单。

连接MongoDB，链接为mongoDB官网 -> MERN Tutorial Database Deployments -> connect -> Connect to your application( drivers) -> 最下面链接

连接MongoDB Compass, 选择database，手动创建一个database, 创建collection，创建一条数据（add data -> insert document）

Server文件下创建models文件夹，在创建Users.js文件

Req -> request (get inf from frontend), res -> response (send inf from backend to frontend)
读写数据库时，server一定要运行状态，没有运行就在server下 node index.js

创建前端， new powershell -> cd client -> npx create-react-app . -> npm install axios -> npm start

npm is a package manager for Node.js that is used for installing and managing packages and dependencies in a project, while npx is a command-line tool that is used for executing one-off commands or scripts without requiring a separate installation.

删除一些前端不需要的文件：

创建react 命令，读写数据

前端读写，测试database：

DEV Community: YUN GU

MERN Recipe App with Authentication

MERN Tutorial For Beginners