CRUD de Usuários - Front-End

Este projeto é a interface front-end de um sistema de gerenciamento de usuários, construído em React 19 com TypeScript. Ele integra Formik e Yup para validação de formulários, Axios para comunicação com a API REST, e utiliza Styled Components para estilização modular. O front-end gerencia autenticação via token JWT, manipula erros de backend de forma estruturada e oferece componentes reutilizáveis para formulários, botões e navegação. O backend utiliza Java 21.

Repositório do Sistema Backend

🔗 User_CRUD_API

Vídeo Mostrando o Projeto

🔗 Veja um vídeo do projeto no YouTube

🚀 Funcionalidades

• Registro de usuários com validação de formulários
• Listagem de usuários com opções de editar e excluir
• Edição de usuários existente com validação de campos opcionais
• Gerenciamento de autenticação via token JWT armazenado no localStorage
• Integração com backend Spring Boot via Axios
• Tratamento de erros com tipos customizados e mensagens detalhadas
• Componentes reutilizáveis: botões, formulários e navegação
• Estilização consistente com Styled Components

🛠️ Stack Tecnológica

• React: 19.1.1
• TypeScript: 5.9.3
• Axios: ^1.13.2
• Formik: ^2.4.9
• Yup: ^1.7.1
• Styled Components: ^6.1.19
• React Router DOM: ^7.9.5
• ESLint + Prettier: Configuração para qualidade e padronização de código

📂 Estrutura do Projeto

• src/components: Componentes reutilizáveis como botões, formulários e cabeçalho
• src/pages: Páginas de registro, edição e listagem de usuários
• src/utils: Bootstrap de token JWT
• src/styles: Styled Components global
• src/types: Tipos e interfaces customizadas para formulários, payloads e respostas do backend

📑 Tipos e Interfaces

• AxiosErrorResponse: Tipagem para respostas de erro do Axios
• BackendError: Tipagem para respostas de erro do backend
• BootstrapResponse: Interface para resposta da rota de bootstrap e gerenciamento de token JWT
• Forms: Tipos para valores de formulários de registro e edição
• UserPayloads: Interfaces para respostas do backend, requisções do frontend e payload de atualização de usuários existentes

🧪 Testes e Validações

• Validação dos formulários usando Yup
• Tratamento de erros com tipos customizados para capturar mensagens detalhadas do backend
• Componentes testados visualmente e funcionalmente durante desenvolvimento

⚙️ Primeiros Passos

1. Clone o repositório:

   git clone https://github.com/AsrielDreemurrGM/User_CRUD.git

2. Instale as dependências:

   npm install

3. Clone o repositório de backend e siga as instruções no README e schema.sql:

   git clone https://github.com/AsrielDreemurrGM/User_CRUD_API.git

4. Após ter o sistema backend rodando, inicie o projeto frontend em modo de desenvolvimento:

   npm run dev

5. Acesse o front-end no navegador:

   http://localhost:5173

📜 Histórico de Commits Relevantes

• Inicialização do projeto React com TypeScript e configuração de ferramentas (ESLint, Prettier, Vite)
• Criação de Header e Footer responsivos
• Implementação do formulário de registro e integração com API
• Configuração de navegação com React Router DOM
• Adição da listagem de usuários, edição e exclusão
• Criação de tipos customizados e refatoração de formulários para tipagem e validação aprimorada
• Gestão de token JWT e bootstrap de autenticação
• Refatoração de componentes reutilizáveis e estilização consistente