{"id":26363286,"url":"https://github.com/melksedeque/organo-alura-reactjs","last_synced_at":"2026-04-19T19:02:25.901Z","repository":{"id":273150793,"uuid":"918452306","full_name":"Melksedeque/organo-alura-reactjs","owner":"Melksedeque","description":"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.","archived":false,"fork":false,"pushed_at":"2025-04-21T01:31:15.000Z","size":3082,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T02:44:38.970Z","etag":null,"topics":["javascript","react","react-hooks","reactjs","typescript","typescript-interface"],"latest_commit_sha":null,"homepage":"https://organo-alura-reactjs-om778vgg5-melksedeques-projects.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Melksedeque.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-18T01:07:40.000Z","updated_at":"2025-04-21T01:31:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"25acc9c2-63aa-4073-97b2-446645b4d99f","html_url":"https://github.com/Melksedeque/organo-alura-reactjs","commit_stats":null,"previous_names":["melksedeque/organo-alura-reactjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Melksedeque/organo-alura-reactjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Forgano-alura-reactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Forgano-alura-reactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Forgano-alura-reactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Forgano-alura-reactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Melksedeque","download_url":"https://codeload.github.com/Melksedeque/organo-alura-reactjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Forgano-alura-reactjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32018764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","react-hooks","reactjs","typescript","typescript-interface"],"created_at":"2025-03-16T18:27:25.258Z","updated_at":"2026-04-19T19:02:25.896Z","avatar_url":"https://github.com/Melksedeque.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Projeto Organo - Pessoas e Times - React \u0026 Typescript\n\nO 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.\n\n![Tela Principal](./screenshot/tela-principal.png)\n\n## Menu\n\n- [Layout](#layout)\n- [Descrição](#descrição)\n  - [Principais recursos incluem](#principais-recursos-incluem)\n  - [Proximos passos de desenvolvimento](#proximos-passos-de-desenvolvimento)\n- [Tecnologias Utilizadas](#tecnologias-utilizadas)\n- [Estrutura de Pastas](#estrutura-de-pastas)\n  - [Arquivos Principais](#arquivos-principais)\n- [Como Instalar e Rodar o Projeto](#como-instalar-e-rodar-o-projeto)\n  - [Configuração](#configuração)\n  - [Casos de Uso Comuns](#casos-de-uso-comuns)\n  - [Solução de Problemas](#solução-de-problemas)\n- [Projeto ao Vivo](#projeto-ao-vivo)\n- [Fluxo de Dados](#fluxo-de-dados)\n- [Licença](#licença)\n- [Autor](#autor)\n\n## Layout\n\n[Layout no Figma](\u003chttps://www.figma.com/design/THdd84v1UUyQpYj99c5XPf/React%253A-desenvolvendo-com-JavaScript-%7C-Organo-(Community)\u003e)\n\n## Descrição\n\nEste projeto é uma aplicação React para gerenciar equipes e colaboradores dentro de uma organização.\n\nA 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.\n\nEste projeto ainda está em desenvolvimento para melhorias.\n\n### Principais recursos incluem:\n\n- Criação e gerenciamento dinâmico de equipes\n- Perfis de colaboradores com funcionalidade de favoritos\n- Seções de equipes com códigos de cores\n- Design responsivo para vários tamanhos de tela\n- Alternância de formulários para melhor experiência do usuário\n\n### Proximos passos de desenvolvimento\n\n- Criar possibilidade de um Colaborador pertencer a mais de um time;\n- Criar possibilidade de edição para trocar membros de times;\n\n## Tecnologias Utilizadas\n\n- **React.JS:** Biblioteca JavaScript para a construção de interfaces de usuário.\n- **CSS:** Utilizado para a estilização dos componentes e layout da aplicação.\n- **JavaScript:** Linguagem de programação utilizada no desenvolvimento da lógica da aplicação.\n- **useState:** Hook do React.JS utilizado para gerenciar o estado dos componentes.\n- **useEffect:** Hook do React.JS utilizado para realizar o fetch da API.\n- **react-icons:** Biblioteca para inclusão de ícones no projeto.\n- **react-select:** Componente de seleção customizável para React.\n- **uuid:** Biblioteca para geração de identificadores únicos.\n- **hex-to-rgba:** Utilitário para conversão de cores hexadecimais para RGBA.\n- **json-server:** Utilizado para criar uma API REST fake para desenvolvimento e testes.\n\n## Estrutura de Pastas\n\n```\norgano-alura-reactjs/\n├── Database/\n│ └── db.json\n├── public/\n│ ├── imagens/\n│ └── manifest.json\n├── screenshot/\n│ └── tela-principal.png\n├── src/\n│ ├── compartilhado/\n│ │ └── interfaces/\n│ ├── componentes/\n│ │ ├── Banner/\n│ │ ├── BotaoSubmit/\n│ │ ├── Campo/\n│ │ ├── Colaborador/\n│ │ ├── ExibirEsconderFormularios/\n│ │ ├── Formulario/\n│ │ ├── ListaSuspensa/\n│ │ ├── Rodape/\n│ │ ├── Time/\n│ │ └── TituloSecao\n│ ├── App.tsx\n│ ├── index.css\n│ ├── main.tsx\n│ └── vite-env.d.ts\n├── .gitignore\n├── eslint.config.js\n├── icon.ico\n├── index.html\n├── LICENSE\n├── package-lock.json\n├── package.json\n├── README.md\n├── tsconfig.app.json\n├── tsconfig.json\n├── tsconfig.node.json\n└── vite.config.ts\n```\n\n### Arquivos Principais:\n\n- `Database/db.json`: Arquivo JSON que contém os dados iniciais de times e colaboradores para a API REST fake\n- `src/App.tsx`: Componente principal da aplicação que gerencia o estado e a lógica de negócios\n- `src/main.tsx`: Ponto de entrada da aplicação que inicializa o React\n- `src/compartilhado/interfaces/`: Diretório contendo as interfaces TypeScript que definem as estruturas de dados\n  - `IColaborador.ts`: Interface para o tipo Colaborador\n  - `ITimes.ts`: Interface para o tipo Times\n- `index.html`: Template HTML principal que serve como ponto de montagem para a aplicação React\n- `vite.config.ts`: Configuração do Vite para build e desenvolvimento\n- `tsconfig.json`: Configuração principal do TypeScript\n- `tsconfig.app.json`: Configuração do TypeScript específica para a aplicação\n- `tsconfig.node.json`: Configuração do TypeScript para ambiente Node.js\n- `package.json`: Configuração do projeto, scripts e dependências\n- `eslint.config.js`: Configuração do ESLint para linting do código\n\n## Como Instalar e Rodar o Projeto\n\nPré-requisitos:\n\n- Node.js (versão 12.0 ou superior)\n- npm (versão 6.0 ou superior)\n\n1. Faça o clone deste repositório em sua máquina local:\n   ```bash\n   git clone https://github.com/Melksedeque/organo-alura-reactjs.git\n   ```\n2. Acesse o diretório do projeto:\n   ```bash\n   cd organo-alura-reactjs\n   ```\n3. Instale as dependências do projeto:\n   ```bash\n   npm install\n   ```\n4. Instale o json-server globalmente:\n   ```bash\n   npm install -g json-server\n   ```\n5. Inicie o servidor JSON para usar como base de dados:\n   ```bash\n   json-server --watch Database/db.json -p 8080\n   ```\n6. Inicie o servidor de desenvolvimento:\n   ```bash\n   npm run dev\n   ```\n7. 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*.\n\n8. 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.\n\n### Configuração\n\nA 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.\n\n### Casos de Uso Comuns\n\n1. Adicionando um novo colaborador:\n\n   - Clique no botão \"Criar Card\"\n   - Preencha os detalhes do colaborador no formulário\n   - Selecione a equipe para o colaborador\n   - Clique em \"Criar Card\" para adicionar o novo colaborador\n\n2. Criando uma nova equipe:\n\n   - Role até a seção \"Criar um novo time\"\n   - Digite o nome da equipe e escolha uma cor\n   - Clique em \"Criar um novo time\" para adicionar a equipe\n\n3. Favoritando um colaborador:\n\n   - Clique no ícone de estrela no card do colaborador para alternar seu status de favorito\n\n4. Alterando a cor de uma equipe:\n   - Use o seletor de cores na seção de cada equipe para alterar sua cor\n\n### Solução de Problemas\n\nProblema Comum: Componentes não renderizando\n\n- Problema: Você pode ver uma página em branco ou componentes faltando.\n- Solução:\n  1. Verifique o console do navegador para mensagens de erro.\n  2. Certifique-se de que todas as importações de componentes em `App.js` estão corretas.\n  3. Verifique se os nomes dos componentes no JSX correspondem aos nomes dos componentes exportados.\n\nModo de Depuração:\nPara 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`:\n\n```javascript\nuseEffect(() =\u003e {\n  console.log(\"Estado atual:\", { times, colaboradores, exibirFormulario });\n}, [times, colaboradores, exibirFormulario]);\n```\n\n## Projeto ao Vivo\n\nVocê pode ver o projeto ao vivo neste link: [https://organo-alura-reactjs.vercel.app/](https://organo-alura-reactjs.vercel.app/)\n\n## Fluxo de Dados\n\nA 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:\n\n1. O estado inicial é definido em `App.js` para equipes (`times`) e colaboradores (`colaboradores`).\n2. Interações do usuário (por exemplo, adicionar um colaborador, criar uma equipe) acionam atualizações de estado em `App.js`.\n3. O estado atualizado é passado para os componentes filhos como props.\n4. Componentes filhos (por exemplo, `Time`, `Colaborador`) renderizam com base nas props recebidas.\n5. Ações do usuário em componentes filhos (por exemplo, favoritar um colaborador) chamam funções passadas de `App.js` para atualizar o estado.\n\n```\n     ┌─────────────────────────────────────────────┐\n     │                   App                       │\n     │  ┌─────────────────────────────────────┐    │\n     │  │    Estado (times, colaboradores)    │    │\n     │  └─────────────────────────────────────┘    │\n     │         │                    ▲              │\n     │         │ Props              │ Atualizações │\n     │         │                    │ de Estado    │\n     │         ▼                    │              │\n     │  ┌─────────────────────────────────────┐    │\n     │  │ Componentes Filhos (Time, Banner)   │    │\n     │  └─────────────────────────────────────┘    │\n     └─────────────────────────────────────────────┘\n```\n\nNota: A aplicação usa o fluxo de dados unidirecional do React, onde o estado é passado através de props e atualizado via callbacks.\n\n## Licença\n\nEste projeto está licenciado sob a Licença MIT. Veja o arquivo [LICENSE](https://github.com/Melksedeque/organo-alura-reactjs?tab=MIT-1-ov-file) para mais detalhes.\n\n## Autor\n\n- GitHub - [Melksedeque Silva](https://github.com/Melksedeque/)\n- FrontEndMentor - [@Melksedeque](https://www.frontendmentor.io/profile/Melksedeque)\n- Twitter / X - [@SouzaMelk](https://x.com/SouzaMelk)\n- LinkedIn - [Melksedeque Silva](https://www.linkedin.com/in/melksedeque-silva/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelksedeque%2Forgano-alura-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelksedeque%2Forgano-alura-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelksedeque%2Forgano-alura-reactjs/lists"}