PERN stack Series 2: Project Setup - Todo Application

PERN stack Series 2: Project Setup - Todo Application

ยท

3 min read

An Unpopular opinion: The best way to learn any technology is to get your hands dirty!

I assume you have already read the first part of this series which gives a comprehensive explanation of the PERN technologies used in this series. If you have not, please click on "PERN Stack Series 1: How To Get Started with the PERN Stack" to read the article.

In this part, you will learn how to combine these technologies by building a full-stack web application using the PERN stack.

Step 1: Project Setup

Create a new folder to hold project files.

First, let's create a main directory: give it any name of your choice, but I will name mine todo-project.

mkdir todo-project

Within this main directory, you should have two subdirectories: /server and /client. the /client will house the files linked to the client (User Interface) while the server folder will contain the files associated with the server (Application Programming Interface).

cd todo-project
mkdir server
mkdir client

Initialising The Project

Server: Begin the project by running npm init in the server directory to initiate a Node.js project.

npm init

Next, use npm to install the necessary dependencies for this fundamental PERN Stack demonstration:

pg: to use PostgreSQL in the project;

express: to use the Express web framework in the project;

cors: middleware manages cross-domain resource Sharing in web applications.

npm i pg express cors

Client:

Within the client directory by utilizing npx create-react-app.

#navigate to the client directory
cd ..
cd client

#create react application
npx create-react-app .

Following that, proceed to install the essential front-end dependencies:

axios: handles HTTP requests from the front-end

If you complete the above installation, your project will look like the below:

Step 2: Database Setup

We need a database to store and manage our data.

Prerequisite:

  • Make sure you have downloaded and installed PostgreSQL on your local machine.

  • psql command has been set up properly.

This YouTube video shows clear and detailed steps to install and use Postgres, and psql.

Now to create our database, we will do the following steps:

  • Navigate to /server folder and log into the database server

      cd ..
      cd server
      psql -U postgres
    
  • Create database mytodo_db for the project

      CREATE DATABASE mytodo_db;
    
  • Create a SQL script called todo.sql that runs and populates the database with some sample data.

touch todo.sql

and paste the following SQL queries in the file:


CREATE TABLE todo(
    todo_id SERIAL PRIMARY KEY,
    description VARCHAR(255)
);

--sample seed data
INSERT INTO public.todo (description) VALUES ('i want to land a full stack job in 5months');
INSERT INTO public.todo (description) VALUES ('finish the PERN series');
  • Use \q command to exit database server

      \q
    
  • After that, run the command below to import todo.sql dump into the mytodo_db database. This will create the schema and populate the data in the database.

  •                   psql mytodo_db < todo.sql
    

Conclusion

Phew! Congratulations if you made it to this point, you're a legend! we have been able to set up the server and client base structure for our Todo list application.

You may encounter some challenges following this project. As a developer, you will encounter bug challenges during your career, and trying your best to resolve them is a great practice to sharpen your skills.

See you in the next part of the series! ๐Ÿ™ƒ

ย