Organo

Aplicação web para organizar colaboradores em times. O usuário pode cadastrar pessoas, criar novos times, personalizar suas cores, favoritar colaboradores e remover cards.

O projeto foi desenvolvido com React, TypeScript e Vite.

Funcionalidades

• Cadastro de colaboradores com nome, cargo, URL da imagem e time.
• Criação de novos times com nome e cor personalizados.
• Organização automática dos colaboradores por time.
• Alteração da cor de cada time.
• Marcação e desmarcação de colaboradores como favoritos.
• Exclusão de colaboradores.
• Layout responsivo para dispositivos móveis.
• Controles com labels e descrições acessíveis.

Os dados ficam somente no estado da aplicação. Ao recarregar a página, as alterações feitas pelo usuário são descartadas.

Tecnologias

Tecnologia	Finalidade
React 18	Construção da interface e gerenciamento de estado
TypeScript	Tipagem estática dos componentes e dados
Vite 7	Servidor de desenvolvimento e build de produção
React Icons	Ícones de exclusão e favoritos
hex-to-rgba	Conversão das cores dos times para fundos transparentes
CSS	Estilização e responsividade

Pré-requisitos

Antes de executar o projeto, instale:

• Node.js 20.19 ou superior, ou Node.js 22.12 ou superior.
• npm, incluído na instalação do Node.js.

Essas versões são necessárias por causa dos requisitos do Vite 7.

Instalação

Clone o repositório e acesse a pasta do projeto:

git clone <URL_DO_REPOSITORIO>
cd organa

Instale as dependências:

npm install

Inicie o servidor de desenvolvimento:

npm run dev

O terminal mostrará o endereço local da aplicação, normalmente http://localhost:5173.

Scripts disponíveis

Comando	Descrição
npm run dev	Inicia o servidor de desenvolvimento do Vite
npm start	Alias para iniciar o servidor de desenvolvimento
npm run typecheck	Valida os tipos TypeScript sem gerar arquivos
npm run build	Valida os tipos e gera a versão de produção em dist/
npm run preview	Exibe localmente o conteúdo gerado pelo build

Build de produção

Gere os arquivos otimizados:

npm run build

Depois, visualize o resultado:

npm run preview

Os arquivos finais são gerados na pasta dist/, que não deve ser versionada.

Estrutura do projeto

organa/
├── public/
│   └── imagens/              # Imagens estáticas da interface
├── src/
│   ├── componentes/
│   │   ├── Banner/           # Cabeçalho visual
│   │   ├── Botao/            # Botão de envio reutilizável
│   │   ├── Campo/            # Campo de formulário reutilizável
│   │   ├── Colaborador/      # Card individual de colaborador
│   │   ├── Formulario/       # Formulários de colaborador e time
│   │   ├── ListaSuspensa/    # Seleção de time
│   │   ├── Rodape/           # Rodapé e redes sociais
│   │   └── Time/             # Seção e personalização de um time
│   ├── App.tsx               # Estado e regras principais da aplicação
│   ├── index.css             # Estilos globais
│   ├── main.tsx              # Ponto de entrada do React
│   └── types.ts              # Modelos compartilhados
├── index.html                # Documento HTML usado pelo Vite
├── package.json              # Dependências e scripts
├── tsconfig*.json            # Configurações do TypeScript
└── vite.config.ts            # Configuração do Vite

Arquitetura e fluxo de dados

O componente App é responsável pelo estado global local da página:

• times: lista dos times disponíveis.
• colaboradores: lista completa de colaboradores.

O fluxo segue o padrão de dados descendentes e eventos ascendentes do React:

App
├── Formulario
│   ├── envia um novo colaborador para App
│   └── envia um novo time para App
└── Time
    ├── recebe os colaboradores filtrados
    ├── solicita alterações de cor para App
    └── Colaborador
        ├── solicita exclusão para App
        └── solicita alteração de favorito para App

As atualizações utilizam funções imutáveis, como map e filter, evitando alterações diretas no estado.

Modelos de dados

Os modelos compartilhados ficam em src/types.ts.

Time

interface Time {
  id: string
  nome: string
  cor: string
}

Colaborador

interface Colaborador {
  id: string
  favorito: boolean
  nome: string
  cargo: string
  imagem: string
  time: string
}

Os IDs dos novos registros são gerados no navegador com crypto.randomUUID().

Componentes

Formulario

Mantém os valores temporários dos dois formulários. Após a validação nativa do navegador, envia os dados ao componente App e limpa os campos correspondentes.

Time

Renderiza somente quando possui colaboradores. Recebe a cor, o nome e a lista já filtrada pelo componente App.

Colaborador

Exibe a foto, nome, cargo e controles de favorito e exclusão. Imagens usam carregamento tardio (loading="lazy").

Componentes de formulário

Campo, ListaSuspensa e Botao concentram comportamentos reutilizáveis e possuem props tipadas.

Estilos e arquivos públicos

• Cada componente possui seu próprio arquivo CSS.
• Os estilos globais e utilitários de acessibilidade ficam em src/index.css.
• Imagens referenciadas com caminhos iniciados por / ficam em public/imagens.
• As cores dos times são aplicadas por estilos inline porque são definidas em tempo de execução.

Acessibilidade

O projeto inclui:

• Associação de labels aos respectivos campos.
• Texto acessível para controles representados apenas por ícones.
• Estado aria-pressed no botão de favorito.
• Identificação das seções por aria-labelledby.
• Indicadores visuais para navegação por teclado.
• HTML semântico com main, article, nav, header e footer.

Verificação antes de contribuir

Execute:

npm run typecheck
npm run build
npm audit

O projeto ainda não possui testes automatizados. Alterações nas regras de cadastro, exclusão ou favoritos devem ser verificadas manualmente até a inclusão de uma suíte de testes.

Licença

Este repositório ainda não possui uma licença definida. Antes de distribuir ou reutilizar o projeto publicamente, adicione um arquivo LICENSE apropriado.