ClientHub é uma aplicação web desenvolvida com Angular para organização e visualização de clientes, com foco em componentização, organização de dados e experiência do usuário. O projeto permite buscar contatos de forma inteligente (com suporte a acentuação), agrupá-los automaticamente por letra inicial e exibir informações complementares como empresa e status do contato, aproximando a aplicação de um mini sistema de gestão. A aplicação foi desenvolvida como parte do curso da Alura, mas foi expandida além da proposta original, incluindo melhorias estruturais, ajustes de usabilidade e personalização visual. O projeto também foi versionado com Git e GitHub desde o início, simulando um fluxo mais próximo do ambiente profissional.
Este projeto foi desenvolvido durante o curso da Alura:
- "Angular: construa uma aplicação web com componentes, linguagem de template e CLI"
A proposta inicial foi adaptada e expandida, transformando uma listagem de contatos em uma aplicação mais estruturada e próxima de um pequeno sistema de gestão.
- Aplicar componentização em Angular
- Utilizar a linguagem de template (@for) para controle de fluxo
- Trabalhar com leitura de dados externos (JSON)
- Praticar organização de código com Angular CLI
- Implementar lógica de busca com normalização de dados
- Explorar diferenças e similaridades entre Angular e React, ampliando visão sobre ecossistemas front-end
- Listagem dinâmica de contatos
- Busca inteligente com suporte a acentuação
- Agrupamento alfabético automático
- Ocultação de letras sem contatos
- Exibição de empresa e status do cliente
- Interface organizada por componentes reutilizáveis
- Estrutura preparada para expansão futura (como edição ou cadastro de clientes)
Tecnologias e conceitos aplicados no projeto:
- Angular – criação de componentes e organização estrutural
- TypeScript – tipagem de dados e definição de interfaces
- Angular Template Syntax (@for) – controle de fluxo e renderização dinâmica
- Angular CLI – geração e organização de componentes
- Leitura de JSON – manipulação de dados externos
- Normalização de strings – tratamento de acentuação para busca inteligente
- CSS – estilização e personalização do layout
- Git & GitHub – versionamento durante todo o desenvolvimento
Uma prévia das principais funcionalidades da aplicação:
📋 Listagem de Clientes
Exibição dinâmica dos contatos organizados por letra inicial, com separadores automáticos e ocultação de letras sem registros.
🔎 Busca Inteligente
Campo de busca com normalização de acentuação, permitindo encontrar contatos independentemente do uso de acentos ou letras maiúsculas/minúsculas.
🌐 Acesse o Projeto Online
O projeto está disponível para visualização na Vercel:
Desenvolvido por Natalia Mirian Timote, desenvolvedora e educadora em tecnologia e programação.
