Sign in

In this tutorial, I will show you step by step to build Node.js PostgreSQL CRUD Restful API example using Express and Sequelize.

Node.js PostgreSQL CRUD Rest API overview

We will build Rest Apis that can create, retrieve, update, delete and find Tutorials by title.

First, we start with an Express web server. Next, we add configuration for PostgreSQL database, create Tutorial model with Sequelize, write the controller. Then we define routes for handling all CRUD operations (including custom finder).

The following table shows overview of the Rest APIs that will be exported:

  • POST /api/tutorials: create new Tutorial
  • GET /api/tutorials: retrieve all Tutorials
  • GET /api/tutorials/[id]: retrieve a…


In this tutorial, we will learn how to build a full stack Angular 11 + Spring Boot + MongoDB example with a CRUD App. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data JPA for interacting with MongoDB database. Front-end side is made with Angular 11, HTTPClient & Router.

Angular 11 + Spring Boot + MongoDB CRUD example

We will build a full-stack Tutorial Application in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • We can also find Tutorials by title.

The images below shows screenshots of our System.

– Add a Tutorial:


In this tutorial, I will show you how to make Angular 11 File Upload Application with Firebase Storage using @angular/fire & AngularFireStorage. Files’ info will be stored in Firebase Realtime Database for Display/Delete operations.

Angular 11 File Upload Firebase Storage example

We’re gonna build an Angular 11 App that helps us:

  • upload file to Firebase Storage
  • see the progress bar with percentage
  • save file metadata (name, url) to Firebase Realtime Database
  • display list of files
  • delete any file in the list


In this tutorial, I will show you step by step to integrate Vue.js with Spring Boot so that Spring Boot project can serve Vue App. You will also know how to configure Vue SPA Routing to avoid Whitelabel Error Page.

Vue & Spring Boot application Overview

Assume that we have 2 projects: Vue & Spring Boot:


In this tutorial, I will show you how to build Angular 11 CRUD App with Firebase Cloud Firestore that uses AngularFireStore service to get/add/update/delete documents in a collection.

Angular 11 Firestore CRUD Overview

We’re gonna build an Angular 11 Firestore App using @angular/fire library in which:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.

Here are the screenshots:

– Create a new Tutorial:


In this tutorial, I will show you how to make File Upload/Display/Delete with Firebase Storage and Angular 10 with the help of @angular/fire. Files' info will be stored in Firebase Realtime Database.

Firebase Storage + Angular 10 example Overview

We’re gonna build an Angular 10 App that helps us:

  • upload file to Firebase Storage
  • see the progress bar with percentage
  • save file metadata (name, url) to Firebase Realtime Database
  • display list of files
  • delete any file in the list


In this tutorial, we will learn how to build a full stack Django + Angular + PostgreSQL example with a CRUD App. The back-end server uses Django with Rest Framework for REST APIs. Front-end side is made with Angular 11/10/8, HTTPClient & Router.

Django + Angular + PostgreSQL example Overview

We will build a full-stack Django + Angular Tutorial Application working with PostgreSQL in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • We can also find Tutorials by title.

The images below shows screenshots of our System.

- Create an item:


In this tutorial, I will show you way to build Material UI File Upload example with Rest API. The React App uses Axios and Multipart File for making HTTP requests, Material UI for progress bar and other UI components. You also have a display list of files’ information (with download url).

Overview

We’re gonna create a Material UI File upload application in that user can:

  • see the upload process (percentage) with progress bar
  • view all uploaded files
  • link to download the file when clicking on the file name

In this tutorial, I will show you ways to convert Reactor Flux into List/Map that uses collectList(), collectSortedList(), collectMap(), collectMultimap() function.

Ways to convert Flux into Collection

We will use Flux methods such as:

  • collectList(): accumulate sequence into a Mono<List>.
  • collectSortedList(): accumulate sequence and sort into a Mono<List>.
  • collectMap(): convert sequence into a Mono<Map>.
  • collectMultimap(): convert sequence into a Mono<Map> that each Map’s key can be paired with multi-value (in a Collection).

Then the Mono result above will be converted into a real List/Map using block() method.

Getting Reactor

Reactor installation in Maven

– First, import the BOM by adding the following to pom.xml:

<dependencyManagement> 
<dependencies>
<dependency>
<groupId>io.projectreactor</groupId> …

In this tutorial, I will show you step by step to integrate React project with Node.js Express Rest API so that we only need to run both on same Server/Port. You will also know how to configure React SPA Routing to avoid 404 on refresh.

React & Node.js Express Application Overview

Assume that we have 2 separated projects: React & Node.js Express like this-

For example, if we run them separately:

Using React to call Express Rest API:

BezKoder

A passionate engineer in software development, especially web, mobile & cross-platform application. I love sharing knowledge by writing blogs & tutorials.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store