Create a PERN Todo List
In this project we will learn to create a PERN project. PERN stands of PostgresSQL, Express, ReactJS and NodeJS.
This post is inspired by the awesome PERN video from freecodecamp. The link for the same is here.
First create a folder from terminal called todo-pern and inside it create a server folder. Here, we will create a empty package.json file by giving the command npm init -y.
After that we are installing express, pg and cors in our project.
Next, create an index.js file add the below code. Here, we are first importing express, cors. Then we are using it and listening on port 8001.
We will add nodemon in our project with the below command, in the server directory.
npm i nodemon
Next, we will add this in our package.json file.
Now, just start the project with npm start.
After this start PostgresSQL through terminal on your system. Here, we are first checking all the available databases.
Next, we are connecting to postgretest database. After that we are creating a simple table with id and description.
Now, create a file db.js inside the server folder. Here, we are connecting to the local running postgres database.
Next, in index.js file we will add the new import for the db. After that we are creating a POST route first. Here, we are taking the description from the request body. After that we are just inserting the value description.
The GET route is an easier route where, we are only doing the Select.
Now, open Postman and insert the description in the body. After that click on SEND and if everything is successful, we will get the success response.
Now, we will check the GET request and it is also working fine.
Now, we have added some more items in our todo, through the POST route. We can see the same in our database.
Next, in the index.js file we will add the code to get a single todo, update a todo and delete a todo. Notice that in all we are using the wildcard of id.
Now, hitting the single route endpoint wit route number will give us that todo.
Next, we can also update a route by using a PUT in place of a POST and changing the body.
Notice that the todo is been changed.
We will also test the delete route by deleting a todo.
Now, again checking in database it is confirmed that one todo was deleted.
Now, we will start with our frontend. Here, in the root directory run the npx command to create a react app with name client.
After that open the code in VSCode and delete the unnecessary files.
Now, we will update our index.js to contain the below code.
We will also update our App.js to contain the below code, after removing everything.
We have also created a components folder and added three files in it.
Now, in the InputTodo.js file, we will add a bootstrap form and will take the description from the user.
Now, we will include this InputTodo component in our App.js file.
Now, we will get a nice input box to enter the description.
On adding the description, it will be shown on the database.
Now, in the ListTodos.js file add the below code. Here, we are calling a function getTodos() from useEffect. We are getting all the data from our API endpoint and storing it in todos state variable.
We have also created a nice bootstrap table.
Now, in the tbody we are mapping through the todos array and showing single todo.
In localhost, we will now see nice todos from our database.
Now, we will also add the logic for delete todo. Here, we have added a button called Delete and clicking on it will call the deleteTodo function.
Now, inside it we re hitting our delete endpoint with the id. We are also filtering the todos to not show this todo. And also using window.location to refresh the page.
We have deleted most of the todos and it is working fine.
Now, we will add the logic to Edit a todo in our project in the EditTodo.js file. Here, we are using a bootstrap modal. Note that the button should have a unique data-target and it should match with the modal.
We have also added the Close logic to set back the todo to the description.
Now, we will also add the logic for updateDescription in our EditTodo.js file.
Next, we will add the EditTodo component in our ListTodos.js file.
Now, clicking on the Edit button will open the modal to edit the todo.
On clicking on the Edit button in the pop-up the new updated data will be saved in the databse.
This completes our project. You can find the code for the same here.