How to Build a Simple CRUD API using NodeJS, Express, and MongoDB

MD.Tajkier Haque Raiyan — Thu, 23 Dec 2021 07:42:05 +0000

In this blog, we are going to make a CRUD operation using node js and MongoDB.

*Introduction *:
CRUD stands for Create(insert data to database), Read(Retrieve a data from database), Update(Edit from database), and Delete(delete a data from database)

Prerequisites :
At least NPM version >= 5.6
Basic knowledge about node js
Javascript core concepts like arrow function, object destructuring and async/await, etc.

Note: I’m using windows 10 20H2. And the editor is VS Code editor.

Get started:

First of all we need to create a folder. You can create it manually. I will use my terminal. So open your terminal then run this command :

Now my file name is server.js so I’m going to start here:
Add these codes to your server .js file :
So in this picture, you have a question that what the hell requires doing here. Require is like import. Express js documentation follows the old method of import. Hopefully, it will be updated soon.

So now I tell you the main steps:

First Import the express like above the picture.
Then convention is to use the express into a variable and call it like a function. And my app variable is the express function now.
Then the main is your port I use here the environment variable Cause when I deploy it to the server it uses the environment variable. And local machine Our port is 5000. You can give it any number you like.
Then We see the CORS. CORS mainly stands for Cross-origin resource sharing. It allows you to make requests from one website to another website in the browser, which is normally prohibited by another browser policy called the Same-Origin Policy (SOP).
Then I uses the dotenv library for environment variable.

Middleware:

Now I know you ask me a question what is middleware. Middleware is like a middle man who works from the middle. Here we use two middleware one is cors() and the second one is express.json(). So the first middleware cors **is for cross-origin policy and the **express.json() is for parsing it to JSON format.

Connect the DataBase:

You can find these codes in your own MongoDB database. Just go there and click on connect option they will provide you with the above code. Note: You can see the uri on the picture I use environment variables for security purposes. I hide my database username and password using the template literals.

Now we can dive into functionalities:

Main function

Create

Read

Update

Delete

Create-operation: In the picture, I used the async/await. You can use then. First of all, we need to connect the database so that is why I used client. connect(). Then create a database variable for your db and name it in your way. Then we need a collection so create a collection. I create two collections. Named order collection and foodcollection. Now In my picture you can see line number 14 I insert a document into the database. In the app.post function you can see I use the instertOne method which is provided by mongodb. For insert data or create data in MongoDB.

You can follow the screenshot for all the operations or check here for more details: MongoDB Docs

React's new Context API and Actions

MD.Tajkier Haque Raiyan — Wed, 22 Dec 2021 11:10:21 +0000

Context API seems interesting. Context API comes with several solutions in react. The solutions are :
It provides a single source of truth for data that can be directly accessed by components that are interested, which means:
It avoids the "prop-drilling" problem, where components receive data only to pass it on to their children, making it hard to reason about where changes to state are (or aren't) happening.

What's Context do?

There are many articles on how the context api works. So you can check there. I’m here to tell you how to use the context api with some of my examples.

Simple Context Example?

First of all, we have to create a custom component. And wrap the App.js. Here app.js will be children of the custom wrapper component. In the component, we have to create a context using createContext(). Like So:

Now we can use the DuckifyConsumer to read that state.

Passing Functions:

In javascript, functions are known as “first-class”, meaning we can treat them as objects and pass them, around even in state and the providers value prop. The maintainers didn’t use state prop they uses the value prop. Because they want to separate the concepts of value and state. In this case, we can add an dispatch function to the DuckifyProvider state. dispatch will take in an action (defined as a simple object), and call a reducer function (see below) to update the Provider's state (I saw this method of implementing a redux-like reducer without redux somewhere, but I'm not sure where. If you know where, let me know so I can properly credit the source!).
We pass the state into the value for the Provider, so the consumer will have access to that dispatch function as well.

DEV Community: MD.Tajkier Haque Raiyan