danrleypereira / jwtdotnetapiwithredux Goto Github PK

• Criar projeto
• Criar solução
• Definir repository
• DTOs

• pegar dados de paginação
• atualizar guia de paginação de acordo

Como parte do nosso esforço contínuo para melhorar a segurança e a experiência do usuário, precisamos implementar a autenticação de usuário no frontend da aplicação. Isso inclui:

• Implementar o formulário de registro de usuário (precisamos coletar: nome de usuário, email e senha)
• Implementar a lógica de autenticação no frontend que irá comunicar-se com o backend
• Implementar a lógica para salvar o JWT token em um reducer
• Implementar um método para incluir o token JWT nas futuras solicitações que necessitem de autenticação
• Proteger rotas no frontend com autenticação (apenas usuários autenticados devem ter acesso)
• Implementar lógica para lidar com tokens JWT expirados
• Testar todos os aspectos do fluxo de autenticação
  Nota: É importante garantir que todas as informações do usuário sejam transmitidas de forma segura.

• Implementar controllers
• só funciona com token de administrador passado via Bearer

Durante o desenvolvimento e revisão de código do aplicativo de gerenciamento de veículos, identificamos várias áreas onde melhorias podem ser feitas para melhorar a eficiência, segurança e usabilidade do aplicativo.

Componentização da Lógica de Paginação

A lógica de paginação está atualmente contida no componente Cars. Para melhorar a reutilização de código e a manutenibilidade, essa lógica deve ser movida para seu próprio componente.

Criação de um Componente de Edição/Registro de Veículos

Atualmente, a funcionalidade de edição e registro de veículos é realizada no componente HoveredVehicle. Isso deve ser movido para um novo componente para separar as responsabilidades dos componentes.

Proteção das Rotas com Base na Expiração do Token

Para melhorar a segurança do aplicativo, as rotas devem ser protegidas com base na expiração do token do usuário. Isso significa que se o token do usuário expirou, ele deve ser redirecionado para a tela de login.

Tratamento de Rota Inexistente

Quando o usuário tenta navegar para uma rota que não existe, ele deve ser redirecionado para uma rota específica, como a página inicial ou uma página de erro personalizada.

Melhorias no Componente VehicleForm

O componente VehicleForm requer algumas melhorias para evitar a mudança entre inputs controlados e não controlados. O estado inicial dos veículos deve ser definido para evitar inputs não controlados.

Tarefas:

• Mover a lógica de paginação para seu próprio componente.
• Criar um componente de edição/registro de veículos.
• Implementar proteção de rotas com base na expiração do token.
• Implementar redirecionamento para rota específica quando o usuário tenta acessar uma rota que não existe.
• Fazer melhorias no componente VehicleForm para evitar a mudança entre inputs controlados e não controlados.

Proposed Solution

Implement a full stack CI/CD pipeline using GitHub Actions for integration, AWS Amplify for frontend (React) deployment, AWS EC2 for backend (.NET Core API) deployment environment, and AWS CodeDeploy for backend deployment automation.

The proposed workflow should include the following steps:
Code Commit: Developers commit the code to the GitHub repository. Any new commit to the main branch triggers the CI/CD pipeline.
Build: GitHub Actions initiates the build process and runs the test cases.
Amplify Deployment: If the build and tests are successful for the React app, GitHub Actions triggers a deployment process using AWS Amplify.
CodeDeploy Deployment: If the build and tests are successful for the .NET Core API, GitHub Actions triggers a deployment process using AWS CodeDeploy.
Deployment: AWS Amplify deploys the latest version of the React application. Simultaneously, AWS CodeDeploy deploys the latest version of the .NET Core API to an AWS EC2 instance. The successful deployment results in the latest full-stack application running with the React frontend on Amplify and .NET API on EC2.

Acceptance Criteria

A commit to the main branch should trigger the pipeline automatically.
The pipeline should successfully build both the frontend and backend applications and run all the test cases.
If the build or tests fail, the pipeline should halt and notify the team.
If the build and tests are successful, AWS Amplify should automatically deploy the React application, and AWS CodeDeploy should automatically deploy the .NET Core API to AWS EC2.
On successful deployment, the team should be notified.

Tasks

Create an IAM role with the necessary permissions for AWS CodeDeploy and EC2.
Set up AWS CodeDeploy to deploy the .NET Core API to the EC2 instance.
Set up AWS Amplify to deploy the React application.
Write GitHub Actions workflow file for CI/CD, which includes building and testing for both frontend and backend, and deployment triggers for Amplify and CodeDeploy.
Test the pipeline by making a commit to the main branch.
Document the pipeline setup and workflow for future reference.

• extrair dados de https://www.kavak.com/br/carros-usados
• inserir esses dados na tabela Veiculos

• Configurar JWT
• Criar Roles, User e UserRoles entities
• Criar UserService
• Criar UserController
• Credenciar com login e senha
• retornar um token

• React create;
• Configurar Materialize;
• Configurar conexão com a api usando (axios ou fetch);
• Pegar veículos paginados;
• Mostrar veiculos;

Objetivos:

Gerenciar o currentPage com um número pageSize de veículos, além de manter o veículo selecionado por último.
Utilizar o Redux Thunk para separar as responsabilidades e isolar os componentes das requisições, permitindo que se concentrem no uso de estados para gerenciar a interface.
Fluxo de trabalho:

No componente "Cars", a thunk será disparada no useEffect para fazer a requisição à API de veículos.
Em caso de sucesso, a thunk irá disparar as actions correspondentes para salvar os veículos e os dados de paginação no Redux store.
Estado atual da aplicação:
Atualmente, a API é requisitada através de uma função de serviço que salva os veículos e os dados de paginação em um state local do componente.

Benefícios:

Melhorar a organização e separação de responsabilidades no código, tornando-o mais fácil de manter e entender.
Permitir a reutilização dos estados de veículos e paginação em diferentes componentes.
Facilitar a integração de futuras funcionalidades, como autenticação, através do uso do Redux Thunk.
No Futuro:

A thunk será responsável por manter os dados de requisição autenticada com token e controlar o acesso a recursos específicos com base na autenticação do usuário.

CRUD de veículo

• Criar domínio de Veículo Id, Nome, Marca, Modelo e Foto;
• Criar repository de veiculo
• Criar script sql para criar tabela e banco
• GET todos os veículos (deve ter a opção de listagem.
• GET por id do veículo