Spring Boot + ReactJS: Fullstack do Zero ao Deploy no Docker

Name: Spring Boot + ReactJS: Fullstack do Zero ao Deploy no Docker
Rating: 4.9 (297 reviews)

Desenvolva um sistema web completo do zero, utilizando Spring Boot 3 com React JS, Docker, PostgreSQL e muito mais!

Created byDougllas Sousa

Last updated 11/2024

Portuguese

What you'll learn

Criar e desenvolver uma aplicação fullstack com Spring e React
Desenvolver API Rest com Spring Boot
Criar bancos de dados SQL e manipular os dados através da aplicação
Testar API's com o POSTMAN
Criar componentes e páginas utilizando React
Estilização de páginas web com Tailwind CSS
Fazer Build das aplicações e Deploy em containers Docker

Course content

8 sections • 95 lectures • 16h 15m total length

Boas vindas e Estruturação do Curso4:42

Criando o projeto Spring Boot 3 e rodando no Intellij15:15
Criando endpoint para recebimento de imagens18:05
Criando uma stack do PostgreSQL no Docker Compose25:53
Seguem as propriedades do arquivo yml, apenas para visualização. O arquivo em formato original indentado e pronto para uso está anexado a esta aula, estou colocando o conteúdo aqui apenas para que você consiga capturar as propriedades e valores adicionados durante a aula:

version: '3.9'

services:
db:
image: postgres
restart: always
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_DB: imagelite
ports:
- '5432:5432'
volumes:
- ./data:/var/lib/postgresql/data

pgadmin:
image: dpage/pgadmin4
restart: always
environment:
PGADMIN_DEFAULT_PASSWORD: admin
PGADMIN_DEFAULT_EMAIL: admin@admin.com
ports:
- '15432:80'
depends_on:
- db
Conectando a API com o Banco de Dados8:07
Mapeamento JPA para a entidade Image14:29
Criando a Tabela e o Repositorio de Imagens11:14
Criando a camada de Serviço8:11
Salvando a imagem através da API19:38
Criar a URL da imagem e configurando o tamanho do Upload14:00
Criando URL para acesso da imagem para renderização19:44
Revisão do modelo do projeto3:28
Construindo o DTO e o Mapper de imagens8:31
Adicionando capacidade de executar Specifications no repositorio de imagens6:15
Criando a lógica de pesquisa no repositorio17:27
Implementando o endpoint de pesquisa de imagens10:26
Testando a pesquisa de imagens6:43
Corrigindo problemas da pesquisa de Imagens6:24
Finalizando a primeira parte do back end9:52

Introdução ao React4:19
Criando o projeto React com NextJS10:54
Entendendo como funcionam as páginas no NextJS9:50
Básico de criação de componentes React15:36
Propriedade de componentes9:08
Criando o template das páginas15:14
Padrão Barrels e explicações adicionais6:57
Componente ImageCard e Página galeria14:05
Comunicação Front-end com Back-end3:32
Criando a camada de comunicação com a API13:37
Conhecendo o React Hook useState18:53
Trazendo as imagens através do front-end10:52
Renderizando as imagens na galeria11:07
Criando o formulário para pesquisa de imagens8:54
Implementação da lógica de pesquisa de imagens15:09
Iniciando as melhorias na tela de pesquisa de imagens7:47
Melhorias no card de imagens10:09
Código da Função formatBytes:

function formatBytes(bytes: number = 0, decimals = 2) {
if (!+bytes) return '0 Bytes'

const k = 1024
const dm = decimals < 0 ? 0 : decimals
const sizes = ['Bytes', 'KB', 'MB', 'GB']

const i = Math.floor(Math.log(bytes) / Math.log(k))

return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
}
Código da Função formatBytes0:12
Finalizando a tela de Pesquisa de imagens18:22

Overview dos componentes Tailwind CSS4:52
Configurando a navegação entre as páginas6:14
Processo de componentização de botoes e inputs13:33
Componentizando o InputText9:01
Iniciando a construção do formulário11:57
O código do SVG encontra-se abaixo e também disponível para download em formato HTML na aba "Recursos".

<svg className="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" /></svg>
Finalizando a casca do formulário8:30
Capturando os valores dos campos via Formik12:44
Implementando o upload de imagem com pre visualização11:40
Enviado o upload para a API via formulário.11:28
Resetando o formulario para o estado inicial7:02
Implementando feedback ao usuário atrávés de notificação16:57
Aplicando validação no formulário11:09
Validação de campo de upload de arquivos8:16
Finalizando o cadastro de imagens5:07

Iniciando a camada de autenticação8:36
Implementando o serviço de usuários10:05
Finalizando a camada de serviço de usuários8:38
Trabalhando com JWT7:21
Implementando a geração de token JWT12:28
API de Usuários com rotas de cadastro e autenticação12:49
Configurando o Spring Security e testando o fluxo de autenticação16:23
Criando a página de login e cadastro de usuários13:15
Lógica para alternância de estado do formulário8:08
Aplicando validações no formulário de login e cadastro13:35
Mapeando os resources para autenticacao4:33
Criando o servico de autenticação do front end8:51
Implementação o Login de usuario10:14
Implementação do Cadastro de usuário15:20
Criando a sessao de usuario11:58
Obtendo dados para validar sessão do usuário10:49
Criando a lógica para proteção de páginas autenticadas7:50
Aplicando o bloqueio de URL no backend via security5:25
Criando método para obter o email através do Token no backend8:42
Criando o filtro interceptor de tokens JWT19:41
Finalizando o controle de autenticação no backend15:36
Enviando o token Jwt via front end7:29
Resolvendo o problema de imagens não autorizadas4:04

Mostrando o nome do usuário logado e botão Sair no Header13:31
Definindo a página inicial da aplicação3:27
Página 404 customizada6:05
Configuração de filtro para urls abertas3:52
Entendendo o processo de deploy de produção no Docker6:36
Preparando o back end para produção17:56
Construindo o Dockerfile da API14:13
Resolvendo problema com imagem openjdk-174:23
Adicionando a API na stack do Docker compose e testando9:15
Preparando o front end para produção8:55
Construindo o Dockerfile da aplicação React5:06
Finalizando a stack com o deploy de todo o projeto10:27
Finalização do Curso1:00

Requirements

Java e Orientação a objetos
Javascript/ Typescript
SQL e banco de dados
Noções de HTTP
Saber instalar ferramentas

Description

Olá! Seja bem vindo!

Neste curso iremos abordar de forma totalmente prática, o desenvolvimento de uma aplicação fullstack do absoluto zero, desde a instalação das ferramentas até o deploy da aplicação em containers Docker.

O curso é para desenvolvedores que já tem conhecimento nas linguagens de programação Java e Javascript e desejam criar uma stack para construir aplicações WEB. Os assuntos abordados no curso são:

React JS e Next.JS, uma lib e um framework que estão sendo utilizados por várias grandes empresas no mundo todo e está ganhando bastante mercado;
Spring Boot 3, um framework java completo para desenvolvimento de API's Rest com todos os recursos necessários para acesso a bancos de dados, segurança, Web, etc;
Tailwind CSS, um framework css para estilização de páginas HTML;
Banco de Dados PostgreSQL, um banco de dados SQL relacional robusto e bastante utilizado pelo mercado.
Docker, uma tecnologia para criação de containers para criação de serviços que rodam em nuvem.

Todo o projeto é criado, configurado e codificado pelo instrutor, os links para o código fonte das aulas estará anexo logo no início do curso, além do link para os sites mostrados no curso e o link para download direto das ferramentas nas versões utilizadas pelo instrutor.

Who this course is for:

Desenvolvedores que precisam de uma stack WEB completa
Alunos que ainda estão em fase de aprendizado e ainda não conseguiram desenvolver uma aplicação completa
Desenvolvedores que queiram aprender sobre arquitetura fullstack
Desenvolvedores que desejam aprender a desenvolver API's com Spring e integrar com frontend React

Spring Boot + ReactJS: Fullstack do Zero ao Deploy no Docker

What you'll learn

Explore related topics

Course content

Introdução1 lecture • 5min

Configuração do Ambiente6 lectures • 35min

Construindo a API RestFul18 lectures • 3hr 44min

Desenvolvendo a aplicação React19 lectures • 3hr 25min

Trabalhando com formulários14 lectures • 2hr 19min

Autenticação e Login utilizando Spring Security e JWT23 lectures • 4hr 2min

Finalização do projeto e Deploy no Docker13 lectures • 1hr 45min

Modulo Complementar (Opcional - Aulas Bônus)1 lecture • 22min

Requirements

Description

Who this course is for: