Learning The PERN Stack — introduction

In this mini-series or whatever you wanna call it, i wanna explain in details how to use the PERN stack to build a fullstack app that’ll be a simple employees registration app where you get to add, view, update and delete employees, i know it doesn’t sound like much fun but trust me the concepts and fundamentals you’re gonna learn along the way will help you in future projects of any “CRUD” nature

What Does PERN Stand For ?

A very basic and expected question to be honest and the answer is quite simple

• P for Postgres a very common and powerful SQL database and for anyone coming from any SQL database system background it’s going to be easy for them to pick up Postgres, nonetheless i’ll teach you all the basics you need to get started, it’s quite simple
• E is for Express, a JS framework that allows you to use JS on the server side and it’s an industry standard for building backends and RESTful APIs and not just my personal preference and it has amazing features and such a simple framework to learn, you can check their website here
• R stands for React, the big deal of this tutorial since i recently learned it :D and it’s gonna help us structure a beautiful frontend and we might as well use another framework for the UI components (not referring to React components here) like MaterialUI or SemanticUI so that’s a plus
• N is for Node.js which is a very popular JS framework that allows us to write JS on the server side unlike the usual JS we know which is mainly concerned with the client side and also make use of NPM — Node package manager a great way to install packages to help us through this tutorial

What Do You Need To Know In Advance ?

Despite the fact that i’ll explain everything in exact details just like how i learned it and understand it, there’s still a preferred amount of knowledge you need to have before continuing to work with those technologies combined and I’ll also show you the tools you need to have downloaded so

• First off a proper knowledge of JS like ES6 syntax and concepts because we’re gonna use things like arrow functions and destructuring objects quite often
• Basic knowledge of SQL regardless of the DBMS but just the syntax and here is a great place to start
• What’s an API and how they work and why we even need one and what does REST mean
• And of course knowledge of html and css

Installing What We Need

• First you need a text editor and there are plenty of options to choose from but i always like Visual Studio Code because it’s very lightweight and has extensions and I’m very comfortable with it so the choice is yours, others include Atom, Sublime Text
• Node.js as it will allow us to use Express which we’ll download with NPM
• Download Postgresql from this link and this will also install the command line tool which we’ll be primarily working with for many reasons we’ll get to later
• And also download Postman, a great way to test out our APIs and I’ll explain why when we get to that part of the series but for now just download it

Now time to install the packages we need

So once you have Node installed you’ll now be able to install packages locally or globally from their repository and this way we’ll install the stuff we need to continue with this series so let’s find out what we’ll need

Open up your command line or terminal or even the integrated terminal within vscode and let’s start installing

• first we need Express so go ahead and type in npm install express that will install it locally which means it’ll only live within our current workspace
• To start using React, there’s a great tool developed by their team to ease up the process of start using it and will take care of all the dependencies and such so to install that use the command npm install create-react-app and it’ll take some time to finish
• npm install pg and this helps us interact with our database in a more dynamic and programmatic way as in inserting and updating content of our database and such

That’s it for all the dependencies we need along with useful links to tutorials and docs in case someone wants to explore more BUT AGAIN i’ll be explaining everything in details through each section

How Is This Series Gonna Be Structured

So basically in each of the upcoming blogs I’ll be explaining each ‘letter’ of the stack and hopefully will get people interested in it and enjoy using it and building awesome projects with it

In the end I’ll really need and appreciate your feedback to make this series better and cover as much needed as possible and like i said despite how basic the final project will be but you will learn so much and master the basics that will help you build more complex apps in the future

Thanks a lot for reading and I’ll get back to you very soon with the first actual part of the series, Postgresql