MERN Recipe App with Authentication
Tags: mongodb, express, react, node
Published: 2023-05-11 02:02:33


Build a Full stack web application with MERN technology.

Final pages:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb7o0u7mr6zc6qscyper.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kdfk44dthhy57fa6hz1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkw83si4cp31r57g3jeu.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cw2ni2qlpkq20088w0c.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c23od1k4bm72ebn8boe4.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t18uxihxx4c4g0j9mow7.png)

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:  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8924j90546m5ijtyhjwq.png)

Debug:
1)	npm install -g yarn
2)	系统属性-环境变量-系统变量-path-add yarn path
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5i26sc0tjimhgk9tsl9.png)

3.	server> yarn init -> asked questions don’t need answer, just enter
4.	server> yarn add express cors bcrypt jsonwebtoken mongoose
5.	server> yarn add --dev nodemon
6.	add src folder in server and add index.js in src folder
7.	either is ok. But if we use the import, we must add ("type": "module",) in package.json
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt9lr55iw9eqhr55k1fk.png)

8.	use the functions in index.js, and run server> node src/index.js to check whether server started.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/411e26hq1972qrdnkgj7.png)

9.	add this to package.json, so that everytime nodemon started use src/index.js, we don’t need to use it manually.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh7udhe8rrqz9ikgendb.png)

10.	create mongoDB database and link it to vscode, keep in mind to install mongoDB first:
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4qvoqqgfwsgtu0wxhc1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcskfyyjqax4ltx3hyc9.png)
 
11.	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
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwxwrb5qh207i1bw5e8k.png)

2）	connect mongoDB compass, and create new database: recipes
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k88y0n0nqh3v6n15mwhs.png)

3）	create routes folder in server/src, and create users.js in routes folder, 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pusgeyyn3wzbmcx77uh.png)

4）	import userRouter in index.js
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iazvties2wwnlnban0o9.png)

5）	get register post in routes:
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xj4ksuxpaoj6v3xo86c.png)

6）	add data in database manually
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtzcq83e8r3ebkztudke.png)

7）	try to post a data to database: 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08kvg3t1ckf8eor3mazl.png)

8）	add authentication and authorization functionality 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wjndlyxhni3myrsl8h6.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzexu7x14e53py6dxy08.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwg1ttkst9lye2gvj06a.png)
 
12.	 create login post and test it. If password is wrong will give error message, if correct will give token and userID:
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih1u0tm3jctjgape0vxh.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9hwffbdry96dp2lefcd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zasvh93ag0kpw3iqgzi.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o94lhfue2ojs0ilzp3e4.png) 
 
13.	Back to Frontend to create recipe: 
1)	client> yarn start
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9a9h9mor6q0reyl25ba.png)

2)	delete some files in client/src, and delete some lines in index.js and 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpbgr2brthczt8yvhove.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdu5wp20gnb08l3ba6qz.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhn3yohihnu05aa2ua7a.png)

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n812me2ec377gqy1eybq.png)

5)	create pages folder and some files in this folder
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1ak9pitacklfa07behg.png)

6)	export pages in each file:   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3ldr8mdbupbcdzlcei0.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnj669x4ns1in3rhc1n5.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/to7bwe51j7186jt3h12x.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lh2ub3c7g60nex402tv.png)
   
7)	link to pages, if have error, try to restart the page by using: client> yarn start
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo895m0ljaq1fgh90r1p.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7138b7hpjeqeawpp0xei.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isjypcj4cfacv03pbd12.png)  
 
8)	create components folder and navbar.js file in client/src
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ym8f1z5ca5aazi9j2p4l.png)

9)	create and write navigate file
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4y631w2szlj36ecatpr.png)

10)	add navbar to App.js
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu6zyg38fcsax1stc4at.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd3373kte7gdoakiqz0y.png)
 
11)	write App.css file   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foknf9q3yimpk9e7l0oj.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3ws70ukk0niu0fovzk9.png)

12)	edit components page, edit Register and Login UI: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ha2hwji185d7b9o46m90.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsovwt87kbegr7m6xltr.png)
 
14.	Make API requests
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlduijitrttwj85kdtqv.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjmj21uwonzpzohes5zk.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxosuvsnggy28cy4nlhq.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj8b323tcy6pkkniy8sj.png)
 
15.	Modify login to logout, when logging in:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn3e3zypvpr2u7jb4kpx.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el11zycwhftp6bi0jidm.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1ew0gl29ru7vk6xrpwo.png)
 
16.	Creating API for recipes:
1)	Add Recipes.js in server/src/models, and define RecipeSchema in this file:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t183a72bbq5ouc9fuhm.png)
 
2)	add recipes.js in server/src/routes, and define get & post routes in this file:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhzfzpgotv0vyhmof3ss.png)

3)	link routes to index.js in server/src folder
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvm1c3bqizyo4go4qj0t.png)

4)	test adding recipes to database in insomnia:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a7xxb0h1gqwayoz63qj.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvsf9n2gt2druv1q74yr.png)
 
5)	test getting recipes from database:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs2cjjgjaxlsa3es5xui.png)

6)	import { UserModel } from "../models/Users.js", and add put, get "/savedRecipes/ids", get "/savedRecipes" routes
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhybrphb3dj1lbvhgemg.png)

7)	add savedRecipes in UserSchema:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t04rf5pc9n3a6ramaarn.png)

8)	create UI for recipe
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqr0fidi9qq15g0gcg8x.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dof072gbqm7nweqj1ady.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5rxwp4c5z79qzd7riz9.png)

9)	send data to API
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8wzktqi1y3szrlk5h8m.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08meettkouznaq83kdjk.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3hc40dssetx0znocgji.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjzncxa3mb05lfm5ghp0.png)
   
10)	navigate to home page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf5j2frz7eosnau6rl3c.png)
 
11)	display all recipes on the home page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bra7whl57qfmh0f7krch.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo3p1gz3qoifbap9dadx.png)
 
12)	add save recipe functionality:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpd4ynswxpel8jswjtxq.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i82ukupjsx3k4rn7kmcy.png)

 13)	display Saved Recipes page:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byl1mgzvzb1l8f5btaer.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7oamkq8poo9upjh70dm.png)
 
17.	Backend token to validate all the request:  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azp76zfmm2b3sgyv7f8f.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0ag67ovikv2exv0467y.png)

18.	Display saved recipes only when user logged in. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqs2lehbb9hevpcn6e26.png)