demo.webm
Neste desafio foi solicitado a criação de um CRUD de Usuários para o back-end. Juntamente com um front-end para fazer a integração e utilização dessa API.
Optei por fazer meu back-end com o PHP utilizando a framework Laravel. E no meu front-end utilizei o React com o Vite juntamente com o bootstrap.
- Comecei pelo back-end, onde escolhi a framework PHP Laravel na versão 10.
- Após configurar o .env para a conexão com o banco de dados e criar model/controller, criei uma migration de Usuários e um seeder para popular a tabela com uns usuários de teste. Depois fui para o desenvolvimento da API.
- Implementei o softdelete, para que os dados possam ser recuperados e manter um histórico.
- No meu controller fiz os métodos de inserir, buscar, buscar pelo ID, atualizar e deletar os usuários. Onde coloquei verificações, para que não pudessem ser passados valores vazios para o banco de dados.
- Adicionei o CORS e coloquei o endereço do meu front-end. Para garantir uma navegação segura.
- Escolhi o react juntamente com o vite, que é uma tecnologia front-end que vi recentemente e estou achando interessante para a criação de SPAs(single pages applications).
- Bibliotecas que adicionei para o desenvolvimento do front: Bootstrap(para me auxiliar no desenvolvimento da interface), Axios(para fazer a conexão com o meu back-end) e o Yup(que utilizei para a validação dos dados).
- Também adicionei a biblioteca de ícones Iconify e o SweetAlert2 para janelas de alerta mais elegantes.
- Criei as páginas (Home, Adicionar Usuário, Editar Usuário, Listar Usuários, Não Encontrado) e os componentes de Cabeçalho e Rodapé.
- Sobre a página Listar Usuários, adicionei no botão de 'Excluir' uma janela de confirmação da exclusão dos dados. Onde só é excluído quando for confirmado nessa janela.
- E para as páginas de 'Editar' e 'Adicionar', inseri a busca pelo CEP, utilizando a API ViaCep para assim agilizar na hora do preenchimento dos dados. Ainda nessas páginas coloquei para que ao realizar uma ação de submissão por exemplo, o botão é substituído por um gif de carregando, assim evitando da pessoa realizar a mesma solicitação novamente.
Observação: Dentro das pastas de front-end e back-end, existem os arquivos readme.md informando como rodar os projetos.
Back-end: https://github.com/jonas-holanda/desafio-fullstack/tree/main/backend-laravel
Front-end: https://github.com/jonas-holanda/desafio-fullstack/tree/main/frontend-react
Copyright © Jonas Holanda. All Rights Reserved.