This is a small, full stack project using
Learn the PERN stack in this full tutorial course for beginners. The PERN stack consists of PostgreSQL, Express, React, and Node.js. Learn how to combine these technologies to build a full-stack web application!
In this application you can create a Todo, Read Todo list to display the todos, Update a Todo by editing it and Delete a Todo.
- Drawing and Understanding overview diagrams. (ER diagrams.)
- Making a npm project and installing required dependencies.
- ExpressJS 4.18.3
- Nodemon 3.1.0
- pg 8.11.3
- cors 2,8,5
Building the Server side ExpressJS App.
- Starting a server using ExpressJS.
- Creating a DB and Table in Postgres at localhost.
- Connect postgres DB to the server.
- Making endpoints -
- post endpoint for inserting data in the DB.
- get endpoints for retreving data from the DB.
- put endpoints for updating data in the DB.
- delete endpoint for deleting specifc rows in the DB.
- Restful api overview.
- Setting up client side ReactJS app powered by VITE.
Building the client side ReactJS App.
- Create functions using fetch api method = POST.
- Read functions using fetch api.
- Delete functions using fetch api method = DELETE.
- Created edit modal.
- Edit function using fetch api method = PUT.
Softwares required are -
npm install express
npm install nodemon
npm install pg
npm install cors
//to run server
npm run server
npm install vite
//to run frontend
npm run dev
> psql -U user-name
Server port is 5000 and client port is 3000.
Though if you change the Postgresql port while installation then you need to specify that port in the DB.js file (./Server/db.js). Also you will need to specify the username and password of your postgresql server.
Run the database.sql commands to create a database and table inside it.
PREVIEW -