O projeto "Organo - Pessoas e Times" é uma aplicação React, recém migrada de JS para Typescript, que permite o cadastro de colaboradores em seus respectivos times dentro de uma organização. Cada time é representado por uma cor diferente, tornando a visualização mais intuitiva e agradável.
- Layout
- Descrição
- Tecnologias Utilizadas
- Estrutura de Pastas
- Como Instalar e Rodar o Projeto
- Projeto ao Vivo
- Fluxo de Dados
- Licença
- Autor
Este projeto é uma aplicação React para gerenciar equipes e colaboradores dentro de uma organização.
A aplicação permite aos usuários criar e gerenciar equipes, adicionar colaboradores a essas equipes e visualizar a estrutura da organização. Ela fornece uma interface amigável para adicionar novos membros da equipe, criar novas equipes e personalizar as cores das equipes.
Este projeto ainda está em desenvolvimento para melhorias.
- Criação e gerenciamento dinâmico de equipes
- Perfis de colaboradores com funcionalidade de favoritos
- Seções de equipes com códigos de cores
- Design responsivo para vários tamanhos de tela
- Alternância de formulários para melhor experiência do usuário
- Criar possibilidade de um Colaborador pertencer a mais de um time;
- Criar possibilidade de edição para trocar membros de times;
- React.JS: Biblioteca JavaScript para a construção de interfaces de usuário.
- CSS: Utilizado para a estilização dos componentes e layout da aplicação.
- JavaScript: Linguagem de programação utilizada no desenvolvimento da lógica da aplicação.
- useState: Hook do React.JS utilizado para gerenciar o estado dos componentes.
- useEffect: Hook do React.JS utilizado para realizar o fetch da API.
- react-icons: Biblioteca para inclusão de ícones no projeto.
- react-select: Componente de seleção customizável para React.
- uuid: Biblioteca para geração de identificadores únicos.
- hex-to-rgba: Utilitário para conversão de cores hexadecimais para RGBA.
- json-server: Utilizado para criar uma API REST fake para desenvolvimento e testes.
organo-alura-reactjs/
├── Database/
│ └── db.json
├── public/
│ ├── imagens/
│ └── manifest.json
├── screenshot/
│ └── tela-principal.png
├── src/
│ ├── compartilhado/
│ │ └── interfaces/
│ ├── componentes/
│ │ ├── Banner/
│ │ ├── BotaoSubmit/
│ │ ├── Campo/
│ │ ├── Colaborador/
│ │ ├── ExibirEsconderFormularios/
│ │ ├── Formulario/
│ │ ├── ListaSuspensa/
│ │ ├── Rodape/
│ │ ├── Time/
│ │ └── TituloSecao
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── icon.ico
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
Database/db.json: Arquivo JSON que contém os dados iniciais de times e colaboradores para a API REST fakesrc/App.tsx: Componente principal da aplicação que gerencia o estado e a lógica de negóciossrc/main.tsx: Ponto de entrada da aplicação que inicializa o Reactsrc/compartilhado/interfaces/: Diretório contendo as interfaces TypeScript que definem as estruturas de dadosIColaborador.ts: Interface para o tipo ColaboradorITimes.ts: Interface para o tipo Times
index.html: Template HTML principal que serve como ponto de montagem para a aplicação Reactvite.config.ts: Configuração do Vite para build e desenvolvimentotsconfig.json: Configuração principal do TypeScripttsconfig.app.json: Configuração do TypeScript específica para a aplicaçãotsconfig.node.json: Configuração do TypeScript para ambiente Node.jspackage.json: Configuração do projeto, scripts e dependênciaseslint.config.js: Configuração do ESLint para linting do código
Pré-requisitos:
- Node.js (versão 12.0 ou superior)
- npm (versão 6.0 ou superior)
-
Faça o clone deste repositório em sua máquina local:
git clone https://github.com/Melksedeque/organo-alura-reactjs.git
-
Acesse o diretório do projeto:
cd organo-alura-reactjs -
Instale as dependências do projeto:
npm install
-
Instale o json-server globalmente:
npm install -g json-server
-
Inicie o servidor JSON para usar como base de dados:
json-server --watch Database/db.json -p 8080
-
Inicie o servidor de desenvolvimento:
npm run dev
-
Acesse a aplicação em seu navegador no endereço http://localhost:8080 para visualizar a API, ou nos links http://localhost:8080/times e http://localhost:8080/pessoas.
-
Acesse o endereço gerado pelo terminal ao rodar o comando
npm run dev, por padrão este endereço é o http://localhost:5173, mas isso pode variar de acordo com as suas configurações de ambiente.
A aplicação utiliza um servidor JSON para armazenar e recuperar dados de times e pessoas. Os dados iniciais estão localizados no arquivo Database/db.json. Para modificar as equipes e colaboradores iniciais, você pode editar este arquivo JSON.
-
Adicionando um novo colaborador:
- Clique no botão "Criar Card"
- Preencha os detalhes do colaborador no formulário
- Selecione a equipe para o colaborador
- Clique em "Criar Card" para adicionar o novo colaborador
-
Criando uma nova equipe:
- Role até a seção "Criar um novo time"
- Digite o nome da equipe e escolha uma cor
- Clique em "Criar um novo time" para adicionar a equipe
-
Favoritando um colaborador:
- Clique no ícone de estrela no card do colaborador para alternar seu status de favorito
-
Alterando a cor de uma equipe:
- Use o seletor de cores na seção de cada equipe para alterar sua cor
Problema Comum: Componentes não renderizando
- Problema: Você pode ver uma página em branco ou componentes faltando.
- Solução:
- Verifique o console do navegador para mensagens de erro.
- Certifique-se de que todas as importações de componentes em
App.jsestão corretas. - Verifique se os nomes dos componentes no JSX correspondem aos nomes dos componentes exportados.
Modo de Depuração:
Para habilitar logs mais detalhados, você pode adicionar declarações console.log nos métodos de renderização dos componentes ou nos hooks useEffect. Por exemplo, em App.js:
useEffect(() => {
console.log("Estado atual:", { times, colaboradores, exibirFormulario });
}, [times, colaboradores, exibirFormulario]);Você pode ver o projeto ao vivo neste link: https://organo-alura-reactjs.vercel.app/
A aplicação gerencia o fluxo de dados principalmente através do componente App, que serve como o contêiner principal de estado. Aqui está uma visão geral do fluxo de dados:
- O estado inicial é definido em
App.jspara equipes (times) e colaboradores (colaboradores). - Interações do usuário (por exemplo, adicionar um colaborador, criar uma equipe) acionam atualizações de estado em
App.js. - O estado atualizado é passado para os componentes filhos como props.
- Componentes filhos (por exemplo,
Time,Colaborador) renderizam com base nas props recebidas. - Ações do usuário em componentes filhos (por exemplo, favoritar um colaborador) chamam funções passadas de
App.jspara atualizar o estado.
┌─────────────────────────────────────────────┐
│ App │
│ ┌─────────────────────────────────────┐ │
│ │ Estado (times, colaboradores) │ │
│ └─────────────────────────────────────┘ │
│ │ ▲ │
│ │ Props │ Atualizações │
│ │ │ de Estado │
│ ▼ │ │
│ ┌─────────────────────────────────────┐ │
│ │ Componentes Filhos (Time, Banner) │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
Nota: A aplicação usa o fluxo de dados unidirecional do React, onde o estado é passado através de props e atualizado via callbacks.
Este projeto está licenciado sob a Licença MIT. Veja o arquivo LICENSE para mais detalhes.
- GitHub - Melksedeque Silva
- FrontEndMentor - @Melksedeque
- Twitter / X - @SouzaMelk
- LinkedIn - Melksedeque Silva