Create Node.js + React + MongoDB app
Hello, in this video, we create a Node.js + React + MongoDB app from scratch and then connect them to each other. We will create them github and CSS for this project.
We will try to keep them as easy and simple as it can be.
Steps to follow:
0) Create a github repo and “git clone …url….” to any place on your computer.
1) MAIN FOLDER: create a frontend folder by using
npx create-react-app frontend
2) MAIN FOLDER: create a backend folder
3) BACKEND FOLDER: open CMD on BACKEND folder and:
a) create a “server.js” file and leave it empty
b) npm init -y
c) npm install express –save
d) open server.js file add the following code.
e) make a test if works. Open CMD on backend folder and type: node server.js
4) FRONTEND: open CMD on frontend folder and type “npm install react-router-dom –-save”
5) FRONTEND: make a test if it works. Open CMD on Frontend and type: npm start
6) FRONTEND: make a cleanup, delete all icons, manifest, test files and code, unite css files.
7) FRONTEND: create a "components" folder, and create three components: Articles.js and About.js and Home.js
8) FRONTEND: Connect components to App.js (Routing)
9) BACKEND: (MOST IMPORTANT STEP) open package.json file on vscode:
- Delete the existing "start" script and add the one in the video.
10) FRONTEND: go to package.json on vscode and add this line above “eslint”
“proxy”: http://localhost:4000/
11) BACKEND: open CMD on backend to start node.js+react: “npm run dev” for testing.
12) FRONTEND: on CMD, run command “npm run build”
13) BACKEND: lets point our node.js properly to the react frontend. This is not mandatory for now, but when we put our project into production, and deploy it on HEROKU, we might need it.
14) FRONTEND: we still don’t see any effect, it our backend is really connected to frontend. To test it, we will create a route, which we send some data
16) BACKEND: npm run dev to see final result.
17) BACKEND: npm install mongoose --save
18) MONGODB-ATLAS: Sign in to your mongodb atlas account, Click “new project”, name it anything you want
19) MONGODB-ATLAS: Skip “Add Members and Set Permissions” screen by clicking “Create Project”
20) MONGODB-ATLAS: Click on “Build a Database”, choose the “Shared – Free” option
21) MONGODB-ATLAS: Cloud Provider doesn’t matter much. Choose any region close to your location. Then click “Create Cluster”. It will take around 5-10 mins to create your “cluster”
22) MONGODB-ATLAS: Create a username and a password. Save your username and password somewhere. Then for ip address enter “0.0.0.0/0” and for description “everywhere”
23) MONGODB-ATLAS: On the following screen
- If you have MongoDB Compass program installed on your computer, click on “Connect using MongoDB Compass.
- Click on I have MongoDB Compass. if you don’t have, then download it. Then copy the url link. Then click “save” and then “continue databases”
24) BACKEND: go to your backend folder, create a folder name “DB”, and inside the folder create two files: connection.js file and schema.js file.
25) BACKEND-DB: inside the connection.js, type the code you see in the video. Paste the url you copied from mongodb atlas to the url variable in connection.js and place your username and password accordingly. (Don’t forget the delete angle brackets). We finish with connection.js
26) BACKEND-DB: Now go to schema.js and add the video you see.
26) BACKEND-SERVER: open server.js and import connection.js and schema.js
27) BACKEND: Make a test if your connections are working by restarting your server. You should see your console.log strings in command line.
28) FRONTEND: Now go to your “articles.js” component and create an input field. Copy the code in the video.
29) BACKEND-SERVER : now on server.js file, we need to create a route for post method. Copy the code in the video.
30) Now make a test. Restart the server, go to “/articles” route, then enter some text, click button. Then go to mongodb atlas page, and then check collections.
You can also check it in MongoDB Compass program.
31) FRONTEND : now let’s get the data from mongodb. First go to your “articles” component, create “div” element to contain the data from mongodb. Create another “useState” variable to store the data from node.js and then use it inside a “div” element that you will be placing anywhere.
For this you’ll need again a fetch method. You can copy it from video.
32) BACKEND-SERVER: go to “server.js” file and create a “get” route for the data that you will be getting from mongodb. Copy it from the video.
NOTE: All videos on this channel are for exercise purposes. For tutorial purposes I kindly advise you to watch great teachers below:
Node-React-Javascript:
1) The Net Ninja:
/ thenetninja
2) Dave Gray :
/ davegrayteachescode
Solidity:
1) Smart Contract Programmer: / @smartcontractprogrammer
2) Eat the Blocks:
/ eattheblocks