This document outlines how to build a full-stack CRUD application using Angular 14, Node.js Express, and PostgreSQL. It discusses setting up the front-end with Angular, the back-end with a Node/Express server, and connecting it to a PostgreSQL database. Key steps include generating Angular components, configuring the Express server, setting up the database connection with Sequelize, and building CRUD operations to create, read, update and delete records. The full-stack architecture diagram shows how the front-end, back-end, and database interact to develop a complete web application.

1. BUILDING A FULL-STACK CRUD APPLICATION
USING ANGULAR 14, NODE.JS EXPRESS AND POSTGRESQL

2. INTRODUCTION
• Full-stack development involves working on both the front end (user interface) and back end
(server-side) of a web application. Front-end development focuses on creating the visual
elements and user experience, typically using HTML, CSS, and JavaScript. Back-end development
involves server-side scripting, databases, and server management using languages like Python,
Ruby, or Node.js.
• In this project we will build a full-stack Angular 14 and Node PostgreSQL CRUD Tutorial
Application in that:
Tutorial has id, title, description, published status.
User can create, retrieve, update, delete Tutorials.
There is a search box for finding Tutorials by title.

3. AGENDA
• Overview of the technologies
• Project structure
• Setting up Node.js Express
• Configuring PostgreSQL database & Sequelize
• Setting up Angular 14
• Building CRUD operations
• Conclusion

4. OVERVIEW OF THE TECHNOLOGIES
• Angular is a popular open-source front-end web application framework maintained by Google. It
allows developers to build dynamic, single-page web applications (SPAs) with features like data binding,
dependency injection, and modular development.
• Node.js Express is a popular back-end web application framework built on top of Node.js. It simplifies
the process of building robust and scalable web applications by providing a set of features and tools
like middleware support, routing, HTTP utility methods, template engines, JSON handling, static file
serving, error handling, RESTful API development, middleware customization.
• PostgreSQL is a powerful open-source relational database management system (RDBMS). It's known
for its robustness, extensibility, and adherence to SQL standards.

5. Angular 14 and Node PostgreSQL Full-stack Architecture

6. PROJECT STRUCTURE
Backend Node.js Frontend Angular

7. SETTING UP NODE.JS EXPRESS
First, we create a folder:
Next, we initialize the Node.js App with a package.json file:
We need to install necessary modules: express, sequelize, pg, pg-hstore, cors:

8. CONFIGURING POSTGRESQL DATABASE & SEQUELIZE
In the app folder, we create a separate config folder for configuration with db.config.js file like this:
Max: maximum number of connection in pool
Min: minimum number of connection in pool
Idle: maximum time, in milliseconds, that a
connection can be idle before being released
Acquire: maximum time, in milliseconds, that pool
will try to get connection before throwing error

9. SETTING UP ANGULAR 14
Let’s open cmd and use Angular CLI to create a new Angular Project as following command:
We also need to generate some Components and Services:
Angular 14 Front-end Overview

10. BUILDING CRUD OPERATIONS
Create: Adding a new record Read: Retrieving data from the database

11. BUILDING CRUD OPERATIONS
Update: Modifying existing records Delete: Removing records

12. CONCLUSION
In this project we have developed a user-friendly tutorial full-stack application using Using Angular
14, Node.js Express and PostgreSQL and performed CRUD operations.

13. THANK YOU