Forem: Loi Le

Angular 11 ElasticSearch Example

Loi Le — Wed, 06 Jan 2021 16:39:40 +0000

Angular 11 ElasticSearch Example

Link: https://loizenai.com/angular-11-elasticsearch-example/

– Tutorial: “Angular 11 ElasticSearch Example – How to add Elasticsearch.js”
In this tutorial, I guide how to add ElasticSearch to an Angular 11 Project.

Check Result

Run Angular 11 App, go to http://localhost:4200/:

Open Browser Console, we can see:

Tutorial Link

https://loizenai.com/angular-11-elasticsearch-example/

Youtube Video

Upload and Read Excel File in Node.js

Loi Le — Mon, 04 Jan 2021 14:34:09 +0000

https://loizenai.com/upload-read-excel-node-js/

Tutorial “Upload and Read Excel File in Node.js – Express RestAPI Upload/Import Download/Export Multiple Excel files”

In the tutorial, I will introduce how to build a Nodejs/Express RestAPIs application to upload/import and download/extract data from multiple Excel files to MySQL or PostgreSQL database by:

Express is used to build Nodejs RestApis
Multer is used to upload/download Excel files
Sequelize ORM is used to manipulate data with MySQL/PostgreSQL
Exceljs is used to save data objects to Excel file
Read-excel-file is used to parse Excel file to data objects

Architecture – Upload and Read Excel File in Node.js

We build Nodejs RestAPIs on the top of Express framework and use the Multer library to handle upload multiple excel files. For handling the business processing of our application, We implement a Controller.js that uses exceljs and read-excel-file libraries to write/read data objects to excel files. And for doing CRUD operations with MySQL and PostgreSQL database, we use Sequelizez ORM to finalize the jobs.

Project Goal – Upload and Read Excel File in Node.js

– Project Structure:

config package is used to setup database configuration with Sequelize ORM and Multer’s configuration for uploading file
models package is used to define Sequelize Customer model
routers package is used to define Express router for Nodejs RestAPIs
controllers is used to implement coding to read/write Excel files and interact with database (storing/retrieving)
view package is used to define a html view page for upload/download Excel files
resource/static/js is used to implement Ajax Javascript code to upload multiples Excel files

– Results:

Check MySQL database:

All Tutorial Link:

https://loizenai.com/upload-read-excel-node-js/

https://loizenai.com/angular-10-spring-boot-jwt-authentication-example/

Youtube List

https://www.youtube.com/watch?v=dTR-41_jMvc&t=46s
https://www.youtube.com/watch?v=lb5LVzJbquI&t=476s
https://www.youtube.com/watch?v=DoV8xfA8WBo&t=30s
https://www.youtube.com/watch?v=rYmf_MthobU&t=376s
https://www.youtube.com/watch?v=7ZfInOvFsz0&t=1308s

Upload and Read CSV File in Spring Boot

Loi Le — Mon, 04 Jan 2021 14:22:50 +0000

https://loizenai.com/upload-read-csv-spring-boot/

Tutorial: "Upload and Read CSV File in Spring Boot - SpringBoot Upload Download Multiple CSV files to MySQL/PostgreSQL with Ajax"

Creating SpringBoot RestAPIs to upload and download multiple CSV files to databases: MySQL and PostgreSQL is one of the most common question in the development world. Going through the tutorial post"SpringBoot Upload Download Multiple CSV files to MySQL/PostgreSQL", I explain details how to do it by step to step with coding and give you 100% running source code. What we will do?

I draw an overview diagram architecture of SpringBoot RestAPI Upload CSV Files.
I use Spring Web to development Spring RestApis.
I use ApacheCommon or Open CSV libraries to parse and read CSV files.
I use SpringJPA to save data from CSV files to MySQL and PostgreSQL.
I implement a SpringBoot Global Exception Handler when uploading with a very big files and fail.
I use Ajax and Bootstrap to implement a frontend client to upload/download CSV files.

Youtube Video Guide: Upload and Read CSV File in Spring Boot

https://youtu.be/n9KzlhN722s

Overview – Upload and Read CSV File in Spring Boot

Here is an overview about workflow data of SpringBoot Upload/Download multiple Csv Files project:

– We implement an Ajax or use a Rest client to upload/download Csv files to/from SpringBoot application.
– For manipulating Csv files, we develop an Csv Utils class to write and read data from them.
– We implement a Csv File Service to do CRUD operations with MySQL/PostgreSQL that supported by SpringJPA Repository.

Here is an overview of “SpringBoot Upload Download multiple CSV files to database” project that we will implement in the tutorial:

controller package implements Controller RestAPIs classes to upload/download Csv files from Ajax or a Rest-Client
repository package defines a CRUD JPA Repository: CustomerRepository
services package implements a class CsvFileServices with functions to store and retrieve Csv File’s data
utils package implements a class CsvUtils with common functions for reading or writing data to/from Csv files
model package defines a class Customer for mapping data between each CSV’s row with each database’s record
errorhandler package implements a class RestExceptionHandler to handle an exception: file size exceeded

Create Project – Upload and Read CSV File in Spring Boot

We use Eclipse to create a “SpringBoot upload download file” project with a set of below dependencies:

spring-boot-starter-data-jpa dependency is used to interact with PostgreSQL/MySQL database
postgresql or mysql-connector-java drivers are used to connect with PostgreSQL/MySQL database
spring-boot-starter-web dependency is used to implement Spring RestAPIs Controller
For writting and reading CSV files, we use dependency commons-csv of org.apache.commons or use dependency opencsv of com.opencsv

In the tutorial, we mainly do a demo with MySQL database, so here is the details of necessary dependencies in pom.xml file:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-csv -->
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-csv</artifactId>
    <version>1.8</version>
</dependency>       

<dependency>
    <groupId>com.opencsv</groupId>
    <artifactId>opencsv</artifactId>
    <version>4.5</version>
</dependency>       

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>

All Tutorial At

https://loizenai.com/upload-read-csv-spring-boot/

Youtube List

Angular Spring Boot jwt Authentication Example

Loi Le — Sun, 03 Jan 2021 16:02:34 +0000

Angular Spring Boot jwt Authentication Example Github

https://loizenai.com/angular-spring-boot-jwt/

Tutorial: ” Angular Spring Boot jwt Authentication Example Github – Angular Authentication and Authorization ”

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. So in tutorial ‘JWT Role Based Authorization with Spring Boot and Angular (Spring Boot Login Example)’, I guide you very clearly how to implement full stack example to demonstrade an jwt token based authentication flow from frontend Angular to backend: SpringBoot and MySQL.

– I give you an Epic of the application, a fullstack excutive flow from frontend – Angular to backend – SpringBoot with overall architecture diagram.
– I give you an architecture diagram of SpringBoot security backend.
– I give you a working flow diagram of Angular JWT Application.
– I guide you step by step how to develop a Backend SpringBoot secured RestAPIs with JWT token.
– I guide you step by step how to develop an Angular JWT Token Authentication application.
– Finally, I do an integrative testing from Angular JWT Authentication application to SpringBoot Backend Security RestAPIs.

Project Goal – Angular Spring Boot jwt Authentication Example Github

We will build an application, from frontend (Angular) to backend (Spring Boot), which allows users to register, login account. This application is secured with JWT (JSON Web Token) authentication and Spring Security. Then, depending on the role of current User (user, pm or admin), this system accepts what he can access:

The diagram below show how our system handles User Registration and User Login processes:

Spring Boot Token Based Authentication Example backend – Angular Spring Boot jwt Authentication Example Github

This is diagram for SpringBoot Token based authentication Security/JWT classes that are separated into 3 layers:
– HTTP
– Spring Security
– REST API

– SecurityContextHolder provides access to the SecurityContext.
– SecurityContext holds the Authentication and possibly request-specific security information.
– Authentication represents the principal which includes GrantedAuthority that reflects the application-wide permissions granted to a principal.
– UserDetails contains necessary information to build an Authentication object from DAOs or other source of security data.
– UserDetailsService helps to create a UserDetails from a String-based username and is usually used by AuthenticationProvider.
– JwtAuthTokenFilter (extends OncePerRequestFilter) pre-processes HTTP request, from Token, create Authentication and populate it to SecurityContext.
– JwtProvider validates, parses token String or generates token String from UserDetails.
– UsernamePasswordAuthenticationToken gets username/password from login Request and combines into an instance of Authentication interface.
– AuthenticationManager uses DaoAuthenticationProvider (with help of UserDetailsService & PasswordEncoder) to validate instance of UsernamePasswordAuthenticationToken, then returns a fully populated Authentication instance on successful authentication.
– SecurityContext is established by calling SecurityContextHolder.getContext().setAuthentication(…) with returned authentication object above.
– AuthenticationEntryPoint handles AuthenticationException.
– Access to Restful API is protected by HTTPSecurity and authorized with Method Security Expressions.

Angular JWT Authentication Example with Interceptor – Angular Authentication and Authorization

In the tutorial, “Angular + Spring Boot JWT Token Based Authentication Example – Angular Authentication and Authorization”, we need the Angular HTTP Interceptor to add JWT Token Based for Security authentication:

– app.component is the parent component that contains routerLink and router-outlet for routing. It also has an authority variable as the condition for displaying items on navigation bar.
– user.component, pm.component, admin.component correspond to Angular Components for User Board, PM Board, Admin Board. Each Board uses user.service to access authority data.
– register.component contains User Registration form, submission of the form will call auth.service.
– login.component contains User Login form, submission of the form will call auth.service and token-storage.service.

– user.service gets access to authority data from Server using Angular HttpClient ($http service).
– auth.service handles authentication and signup actions with Server using Angular HttpClient ($http service).
– every HTTP request by $http service will be inspected and transformed before being sent to the Server by auth-interceptor (implements HttpInterceptor).
– auth-interceptor check and get Token from token-storage.service to add the Token to Authorization Header of the HTTP Requests.

Video Guide – Angular Spring Boot jwt Authentication Example Github – Angular Authentication and Authorization

https://youtu.be/7ZfInOvFsz0

Overview SpringBoot JWT Token Based Authentication Example

Look back to the diagram for Spring Security/JWT classes that are separated into 3 layers:
– HTTP
– Spring Security
– REST API

Youtube - angular springBoot jwt authentication example

https://www.youtube.com/watch?v=7ZfInOvFsz0&t=868s

Reactjs JWT Authentication Example

Loi Le — Sun, 03 Jan 2021 15:59:35 +0000

https://loizenai.com/reactjs-jwt-authentication-example/

Reactjs JWT Authentication Example

Tutorial: Reactjs JWT Token Authentication Example

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. So in the tutorial, I introduce how to implement an application “Reactjs JWT token Authentication Example” with details step by step and 100% running sourcecode.

– I give you an Epic of the application, a fullstack excutive flow from frontend to backend with overall architecture diagram.
– I give you a layer diagram of Reactjs JWT Application.
– I give you an implementatin of security backend sourcecode (SpringBoot + Nodejs JWT RestAPIs).
– I guide you step by step how to develop a Reactjs JWT Authentication application.
– Finally, I do an integrative testing from Reactjs JWT Authentication application to Backend Security RestAPIs

Overall Epic System Architecture Diagram

For the Reactjs JWT Authentication tutorial, we have 2 projects:
– Backend project (using SpringBoot or Nodejs Express) provides secured RestAPIs with JWT token.
– Reactjs project will request RestAPIs from Backend system with the JWT Token Authentication implementation.

JWT Authentication Sequence Diagram

The diagram below show how our system handles User Registration and User Login processes:

User Registration Phase:
– User uses a React.js register form to post user’s info (name, username, email, role, password) to Backend API /api/auth/signup.
– Backend will check the existing users in database and save user’s signup info to database. Finally, It will return a message (successfully or fail) to
User Login Phase:
– User posts user/password to signin to Backend RestAPI /api/auth/signin.
– Backend will check the username/password, if it is right, Backend will create and JWT string with secret then return it to Reactjs client.

After signin, user can request secured resources from backend server by adding the JWT token in Authorization Header. For each request, backend will check the JWT signature and then returns back the resources based on user’s registered authorities.

Reactjs JWT Authentication Layer Diagram Overview

Reactjs JWT Authentication would be built with 5 main kind blocks:

Reactjs Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.
Reactjs Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Reactjs Service is a bridge between Reactjs Component and Backend Server, it is used to do technical logic with Backend Server (using Ajax Engine to fetch data from Backend, or using Local Storage to save user login data) and returned a response data to React.js Components
Local Storage allow to save key/value pairs in a web browser. It is a place to save the login user’s info.
Axios – (an Ajax Engine) is a promise-based HTTP client for the browser and Node. js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations.

Project Goal

We create a Reactjs JWT Authentication project as below:

It includes 8 components and 2 services and a router in app.js file.

– Home page:

– User Register page:

– Login Page:

– Profile Page:

– Use Page:

– Project Manager Page:

– Reactjs Admin page:

How to Integrate Reactjs with Nodejs Tutorial
Tutorial: SpringBoot + React + MongoDB – SpringBoot React.js CRUD Example
Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example – Express RestAPIs + JWT + BCryptjs + Sequelize

Angular Client Side Pagination with Nodejs + MySQL

Loi Le — Sun, 03 Jan 2021 15:53:15 +0000

Angular Client Side Pagination with Nodejs + MySQL

https://loizenai.com/angular-client-side-pagination-with-nodejs-mysql/

Tutorial: ” Angular Client Side Pagination with Nodejs + MySQL – Server Side Pagination in Node.js Angular MySQL database + Express + Sequelize CRUD ”

In the tutorial, I introduce how to build an “Angular 10 Nodejs Pagination RestAPIs Example with MySQL database (Server Side Pagination with filtering and sorting)” project using Express framework and Sequelize crud queries to interact with database’s records.

– Nodejs Express project (server side pagination) produces pagination RestAPIs with MySQL database records using Sequelize CRUD queries.
– Angular 10 project (client side pagination) will consume the Node.js pagination RestAPIs then show up on component’s views.

Architecture – Angular Client Side Pagination with Nodejs + MySQL

In the tutorial “Server Side Pagination in Node.js Angular 10”, We develop 2 projects:

Backend Project – Nodejs MySQL Pagination Application gets data from MySQL database then provides RestAPIs with pagination, filtering and sorting function for frontend
Frontend Project – Angular Application use HttpClient to fetch data from Backend Application then shows them in Bootstrap table with pagination, filtering and sorting functions

Project Goal – Angular Client Side Pagination with Nodejs + MySQL

– Make a request at API: /api/customers/pagefiltersort with pagination, filtering and sorting params as below:

page: 0 – first page
size: 5 – size of a page
salary: 4000 – filtering by salary field
agesorting: true – sorting by age
desc: true – descending or ascending sorting
– Result:

– Angular Frontend Pagination with Filtering and Sorting table:

Video Guide – Angular Client Side Pagination with Nodejs + MySQL

For the tutorial “Angular Client Side Pagination with Nodejs + MySQL”, I create a Youtube video guide with clearly steps to debug full-stack for all running flows of living code from Angular client to Nodejs backend pagination:

https://youtu.be/pkQY56B5Ut0

Overall Server Side Pagination in Node.js/Express Sequelize MySQL Pagination

To handling Pagination RestAPI requests and do Paging Filtering and Sorting queries with MySQL database, we create a backend web Node.js application with 4 main points:

To handle pagination RestAPI requests with Node.js, We use Express framework.
To do pagination filtering and sorting queries with MySQL database, We use Sequelize ORM.
We define all RestAPI URLs in router.js.
We implement code how to process each paging filtering and sorting RestAPI request in controller.js file.

Nodejs/Express Sequelize Pagination Queries

To do the pagination with database, Sequelize ORM provides 2 model methods for supporting the purpose with limit and offset parameters:

.findAll() – Search for multiple elements in the database
.findAndCountAll() - Search for multiple elements in the database, returns both data and total count
How about limit & offset for nodejs pagination?

limit is the maximum number of records to fetch
offset is the quantity of records to skip
For example, if we have total 12 items:

{ offset: 5 }: skip first 5 items, fetch 7 remaining items.
{ limit: 5 }: fetch first 5 items.
{ offset: 5, limit: 5 }: skip first 5 items, fetch 6th and 10th items.

Tutorial Link

https://loizenai.com/angular-client-side-pagination-with-nodejs-mysql/

Youtube Video

Spring Boot Pagination and Filter Example

Loi Le — Sun, 03 Jan 2021 15:39:06 +0000

Spring Boot Pagination and Sorting Example

Tutorial Link: https://loizenai.com/spring-boot-pagination-filter/

Youtube - SpringBoot Pagination and Filter Example

https://youtu.be/5fNK5lrj-X0

When we have a large dataset and we want to present it to the user in smaller chunks, pagination and sorting is often helpful solution. So in the tutorial, I introduce how to build “Spring Boot Pagination and Sorting Example” use Spring JPA APIs of PagingAndSortingRepository to do the task with SpringBoot project example.

Goal – Spring Boot Pagination and Sorting Example

– Paging Request:

– Pagination and Sorting request:

PagingAndSorting Repository

Crud Operation In React.js and Mysql

Loi Le — Sun, 03 Jan 2021 15:32:37 +0000

Crud Operation In React.js and Mysql

Tutorial : https://loizenai.com/react-node-js-crud-mysql/

Crud Operation In React.js and Mysql

Tutorial: React Node.js MySQL CRUD Example – Step By Step React, Nodejs and Mysql simple full-stack Application

In the tutorial, I introduce how to build an “React.js Nodejs CRUD MySQL Example” project with the help of Ajax to POST/GET/PUT/DELETE requests with step by step coding examples:

– Nodejs project produces CRUD RestAPIs with MySQL database using the supporting of Sequelize ORM.
– React.js project will consume the Nodejs CRUD RestAPIs by Ajax then show up on Reactjs component’s views.

– I draw a fullstack overview Diagram Architecture from React.js Frontend to MySQL database through Nodejs RestAPI backend.
– Develop Nodejs CRUD RestAPIs with the supporting of Sequelize ORM.
– Implement Reactjs CRUD application with Ajax fetching APIs to do CRUD request (Post/Get/Put/Delete) to Nodejs Backend APIs.
– I create a testsuite with a number of integrative testcases with CRUD RestAPI requests from Reactjs to do CRUD requests to Nodejs RestAPIs Server and save/retrieve data to MySQL database.

React Node.js Mysql CRUD Example – Step By Step React, Nodejs and Mysql simple full-stack Application

Overall Architecture System: Reactjs + Nodejs + MySQL – React Node.js MySQL CRUD Example - Crud Operation In React.js and Mysql

We build a backend: Nodejs CRUD Application with MySQL that provides RestAPIs for POST/GET/PUT/DELETE data entities and store them in MySQL database.
We implement React.js CRUD Application that use Ajax to interact (call/receive requests) with Nodejs CRUD application and display corresponding data in Reactjs Component.

Nodejs MySQL CRUD Design Application – React Node.js MySQL CRUD Example

We have 4 main blocks for the application:

For building RestAPIs in Nodejs application, we use Express framework.
For interacting with database MySQL, we use Sequelize ORM.
We define APIs URL in router.js file
We implement how to process each API URL in controller.js file
We use Bootstrap and JQuery Ajax to implement frontend client.

Reactjs CRUD Application Design – React Node.js MySQL CRUD Example - Crud Operation In React.js and Mysql

– Reactjs CRUD Application is designed with 2 main layers:

React.js components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Ajax is used by Reactjs component to fetch (post/put/get/delete) data from remote restapi by http request
Reactjs CRUD Application defines 5 components:

Home.js is used serve as the landing page for your app.
AppNavbar.js is used to establish a common UI feature between components.
CustomerList.js is used to show all customers in the web-page
CustomerEdit.js is used to modify the existed customer
App.js uses React Router to navigate between components.

Integrative Project Goal – React Node.js MySQL CRUD Example

Reactjs Home page:

Reactjs List all data:

Reactjs add data:

Reactjs update data:

Reactjs delete a customer with id=2, check the Customer List after deleting:

Check MySQL Database after do CRUD operations:

Tutorial Link - Crud Operation In React.js and Mysql

https://loizenai.com/react-node-js-crud-mysql/

Youtube Video - Crud Operation In React.js and Mysql

https://www.youtube.com/watch?v=MjLjHEP74vE&t=28s

Angular SpringBoot Pagination Example

Loi Le — Sun, 03 Jan 2021 15:28:52 +0000

Tutorial Link: https://loizenai.com/spring-boot-angular-pagination-example/

Angular SpringBoot Pagination Example

Tutorial: “Spring Boot Angular Pagination Example – Angular Table Pagination Filtering Sorting with SpringBoot RestAPIs + Bootstrap Example”

When we have a large dataset and we want to present it to the user in smaller chunks, pagination and sorting is often helpful solution. So in the tutorial, I introduce how to use Angular to build a table solution for pagination, filtering and sorting the fetching data with SpringBoot RestAPIs examples.

Overview Spring Boot Angular Pagination Example

Backend Project – SpringBoot Application gets data from MySQL/PostgreSQL database then provides RestAPIs with pagination, filtering and sorting function for frontend
Frontend Project – Angular Application use HttpClient to fetch data from Backend Application then shows them in Bootstrap table with pagination, filtering and sorting functions

Project Goal – Spring Boot Angular Pagination Example

– Make a request at API: /api/customers/custom/pageable with pagination, filtering and sorting params as below:

page: 0 – first page
size: 5 – size of a page
salary: 4000 – filtering by salary field
agesorting: true – sorting by age
desc: true – descending or ascending sorting

– Result:

– Angular Frontend Pagination with Filtering and Sorting table:

Tutorial Link - SpringBoot Angular Pagination Example

https://loizenai.com/spring-boot-angular-pagination-example/

Youtube video

Reactjs Nodejs MongoDB CRUD Example

Loi Le — Sun, 03 Jan 2021 15:23:05 +0000

Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application

Tutorial at: Reactjs Nodejs MongoDB CRUD Example

In the tutorial, I introduce how to build an “React.js Nodejs CRUD MongoDB Example” project with the help of Ajax to POST/GET/PUT/DELETE requests with step by step coding examples:

– Nodejs project produces CRUD RestAPIs with MongoDB database using the supporting of Mongoose ODM.
– React.js project will consume the Nodejs CRUD RestAPIs by Ajax then show up on Reactjs component’s views.

List to do - Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application:

– I draw a fullstack overview Diagram Architecture from React.js Frontend to MongoDB database through Nodejs RestAPI backend.
– Develop Nodejs CRUD RestAPIs with the supporting of Mongoose ODM.
– Implement Reactjs CRUD application with Ajax fetching APIs to do CRUD request (Post/Get/Put/Delete) to Nodejs Backend APIs.
– I create a testsuite with a number of integrative testcases with CRUD RestAPI requests from Reactjs to do CRUD requests to Nodejs RestAPIs Server and save/retrieve data to MongoDB database.

Overall Architecture System: Reactjs + Nodejs + MongoDB

We build a backend: Nodejs CRUD Application with MongoDB that provides RestAPIs for POST/GET/PUT/DELETE data entities and store them in MongoDB database.
We implement React.js CRUD Application that use Ajax to interact (call/receive requests) with Nodejs CRUD application and display corresponding data in Reactjs Component.

Nodejs MongoDB CRUD Design Application

We have 4 main blocks for the application:

For building RestAPIs in Nodejs application, we use Express framework.
For interacting with database MongoDB, we use Mongoose ODM.
We define APIs URL in router.js file
We implement how to process each API URL in controller.js file
We use Bootstrap and JQuery Ajax to implement frontend client.

Reactjs CRUD Application Design - Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application

React.js components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Ajax is used by Reactjs component to fetch (post/put/get/delete) data from remote restapi by http request

Reactjs CRUD Application defines 5 components:

Home.js is used serve as the landing page for your app.
AppNavbar.js is used to establish a common UI feature between components.
CustomerList.js is used to show all customers in the web-page
CustomerEdit.js is used to modify the existed customer
App.js uses React Router to navigate between components.

Integrative Project Goal - Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application

Tutorial: Reactjs Nodejs MongoDB CRUD Example

Youtube video

https://www.youtube.com/watch?v=Tn4Dfztkvww&t=49s

Forem: Loi Le

Angular 11 ElasticSearch Example

Angular 11 ElasticSearch Example

Check Result

Read More

Tutorial Link

Youtube Video

Upload and Read Excel File in Node.js

Architecture – Upload and Read Excel File in Node.js

Project Goal – Upload and Read Excel File in Node.js

All Tutorial Link:

Read More

Related posts

Youtube List

Upload and Read CSV File in Spring Boot

Youtube Video Guide: Upload and Read CSV File in Spring Boot

Overview – Upload and Read CSV File in Spring Boot

Create Project – Upload and Read CSV File in Spring Boot

All Tutorial At

Youtube List

Angular Spring Boot jwt Authentication Example

Angular Spring Boot jwt Authentication Example Github

Project Goal – Angular Spring Boot jwt Authentication Example Github

Spring Boot Token Based Authentication Example backend – Angular Spring Boot jwt Authentication Example Github

Angular JWT Authentication Example with Interceptor – Angular Authentication and Authorization

Video Guide – Angular Spring Boot jwt Authentication Example Github – Angular Authentication and Authorization

Overview SpringBoot JWT Token Based Authentication Example

Related post

Youtube - angular springBoot jwt authentication example

Reactjs JWT Authentication Example

Reactjs JWT Authentication Example

Overall Epic System Architecture Diagram

JWT Authentication Sequence Diagram

Reactjs JWT Authentication Layer Diagram Overview

Project Goal

Related posts

Angular Client Side Pagination with Nodejs + MySQL

Angular Client Side Pagination with Nodejs + MySQL

Architecture – Angular Client Side Pagination with Nodejs + MySQL

Project Goal – Angular Client Side Pagination with Nodejs + MySQL

Video Guide – Angular Client Side Pagination with Nodejs + MySQL

Overall Server Side Pagination in Node.js/Express Sequelize MySQL Pagination

Nodejs/Express Sequelize Pagination Queries

Tutorial Link

Related post

Youtube Video

Spring Boot Pagination and Filter Example

Spring Boot Pagination and Sorting Example

Youtube - SpringBoot Pagination and Filter Example

Goal – Spring Boot Pagination and Sorting Example

PagingAndSorting Repository

Related posts - SpringBoot Pagination and Filter Example

Crud Operation In React.js and Mysql

Crud Operation In React.js and Mysql

Overall Architecture System: Reactjs + Nodejs + MySQL – React Node.js MySQL CRUD Example - Crud Operation In React.js and Mysql

Nodejs MySQL CRUD Design Application – React Node.js MySQL CRUD Example

Reactjs CRUD Application Design – React Node.js MySQL CRUD Example - Crud Operation In React.js and Mysql

Integrative Project Goal – React Node.js MySQL CRUD Example

Tutorial Link - Crud Operation In React.js and Mysql

Youtube Video - Crud Operation In React.js and Mysql

Related post - Crud Operation In React.js and Mysql

Angular SpringBoot Pagination Example

Angular SpringBoot Pagination Example

Overview Spring Boot Angular Pagination Example

Project Goal – Spring Boot Angular Pagination Example

Tutorial Link - SpringBoot Angular Pagination Example

Related posts - SpringBoot Angular Pagination Example

Youtube video

Reactjs Nodejs MongoDB CRUD Example

Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application

List to do - Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application:

Overall Architecture System: Reactjs + Nodejs + MongoDB

Nodejs MongoDB CRUD Design Application

Reactjs CRUD Application Design - Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application

Integrative Project Goal - Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application

Related posts - Reactjs Nodejs MongoDB CRUD Example – MERN Stack Application

Youtube video