Este é um projeto React feito com Create React App sobre organização de times e equipes desenvolvido no curso de formação React da Alura
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Organo |
| 🏷️ Tecnologias | react, tsx, typescript, css, html, npm |
| 🚀 URL | https://organo-app-blond.vercel.app/ |
O Organo é um projeto de estudo de React, onde o usuário pode criar times e equipes, e adicionar membros a elas, com o objetivo de organizar melhor o trabalho em equipe.
Para que o projeto funcione corretamente, é necessário instalar as dependências do projeto. Para isso, basta executar o comando abaixo no terminal:
npm installNo diretório do projeto, você pode executar:
npm startCom o comando acima, você irá rodar o projeto em modo de desenvolvimento que pode ser acessado em http://localhost:3000 no seu navegador.
Para o desenvolvimento foi utilizado algumas bibliotecas do npm sendo elas:
O usuário pode adicionar os membros de sua equipe através do formulário abaixo, vinculando-os a um time, com seu nome, cargo e foto.
É importante ressaltar que a imagem deve ser informada através de url para que o programa possa navegar até ela e exibi-la na página:
Após adicionar seus membros, cada um é dispostos em sessões selecionadas pelo formulário
Após ter pelo menos um registro de time, a sessão de grupos é exibida junto ao botão de esconder formulário para melhor visualização:
O usuário, através do formulário de times, pode criar uma nova section para vincular os cards de membros no primeiro formulário, podendo escolher seu nome e cor:
Em cada section da organização, ao canto existe um input de tipo cor que é possível alterar, mudando a cor dos cards e do background da section:
Em cada card criado é possível visualizar um icone de exclusão que ao pressionado exclui o card em questão, desde que o mesmo não seja um card favoritado:
Em cada submit de formulário, adicionando membros e times, mudando suas cores e os removendo, o Local Storage guarda todas as informações para que o organograma não seja perdido quando é atualizada ou fechada a página.
| Cards 🃏 | Times 👨👩👦👦 |
|---|---|
 |
 |