https://github.com/matheuscara/desafio-angular
Crie uma SPA utilizando Angular para uma tela de lista de usuários e um modal para adicionar usuários. O layout e a arquitetura são por sua conta, apenas atente-se aos requisitos propostos.
https://github.com/matheuscara/desafio-angular
angular jest signals taiwindcss
Last synced: about 2 months ago
JSON representation
Crie uma SPA utilizando Angular para uma tela de lista de usuários e um modal para adicionar usuários. O layout e a arquitetura são por sua conta, apenas atente-se aos requisitos propostos.
- Host: GitHub
- URL: https://github.com/matheuscara/desafio-angular
- Owner: Matheuscara
- Created: 2024-06-05T02:26:57.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-07T08:32:25.000Z (about 2 years ago)
- Last Synced: 2024-06-07T09:54:37.475Z (about 2 years ago)
- Topics: angular, jest, signals, taiwindcss
- Language: TypeScript
- Homepage:
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Projeto
Crie uma SPA utilizando Angular para uma tela de lista de usuários e um modal para adicionar usuários. O layout e a arquitetura são por sua conta, apenas atente-se aos requisitos propostos.
### Tecnologias Utilizadas
- Angular v16:
- Utilizado para desenvolver a aplicação devido à sua robustez e suporte contínuo. A versão 16 traz melhorias de desempenho e novas funcionalidades que ajudam a criar uma SPA moderna e eficiente.
- Tailwind CSS:
- Utilizado para a estilização das páginas. Tailwind CSS permite uma maneira rápida e eficiente de criar estilos personalizados sem sair do HTML, resultando em um desenvolvimento mais rápido e um design mais consistente.
- State com Signals:
- O estado da aplicação é gerenciado com `Subject Service` utilizando signals para compartilhamento de dados entre os componentes. Isso proporciona um gerenciamento de estado reativo e eficiente.
### Desafios Encontrados
Tive dificuldade em fazer o componente de paginação para a tabela. Tentei encontrar algum modelo pronto que ficasse parecido, mas não achei, e para fazer, fiquei com dificuldade também. Adicionar a inteligência de próximas páginas e os filtros foi interessante de fazer. Tive dificuldade também para fazer a exibição do país ao digitar o telefone.
### Melhorias Futuras
- Implementar o projeto com testes E2E.
- Implementar filtro de status e nome ao mesmo tempo.
- Melhorar o componente de paginação na tabela.
- Melhorar o ícone de país no input de telefone.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
## Instalar dependencias
Para instalar todas as dependencias, execute:
```
npm install
```
## Iniciar a aplicação
Para iniciar o servidor de desenvolvimento execute:
```
npm run start
```
## Para rodar os testes unitarios
Para iniciar o servidor de testes (atualmente com 80% de coverage) execute:
```
npm run test
```