/Organo

Projeto feito como estudo no curso da Alura: React: desenvolvendo com JavaScript

Primary LanguageJavaScript

Organo

📌 Concluído: Acesse o projeto Organo

📝 Sobre

Este é um projeto em React para organizar colaboradores em seus respectivos times. Com esta aplicação, você pode facilmente adicionar, visualizar, editar e excluir colaboradores e criar, editar e excluir times.


Telas

🔖 Índice


Pré-requisitosInstalaçãoExecutando o ProjetoFuncionalidades do projetoTecnologiasAutora


📋  Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode

🔧 Instalação

# Clone este repositório
$ git clone https://github.com/seu-usuario/Organo.git

# Acesse a pasta do projeto no terminal/cmd
$ cd organo

# Instale as dependências
$ yarn

🍷 Executando o Projeto

yarn start

A aplicação estará disponível em http://localhost:3000.


🔨 Funcionalidades do projeto

Ao iniciar a aplicação, você será apresentado a dois formulários distintos: um para o cadastro de colaboradores e outro para o cadastro de times.

Para adicionar um colaborador, preencha o formulário com todas as informações necessárias. Note que todos os campos são obrigatórios, exceto o campo de imagem. Caso você não insira uma imagem, o colaborador será cadastrado com uma imagem padrão. Depois de preencher os detalhes, clique no botão "Cadastrar" para concluir o processo.

Para adicionar um novo time, preencha o formulário com as informações específicas do time desejado e clique em "Cadastrar". Após essa ação, o novo time será exibido na lista de times, que pode ser visto no formulário de colaboradores.

Abaixo dos formulários, você encontrará uma seção onde os colaboradores são agrupados por time. Neste espaço, você terá a opção de realizar diversas ações, como alterar a cor de um time, favoritar colaboradores e excluir colaboradores. Importante destacar que, se todos os colaboradores de um time forem excluídos, o time deixará de ser exibido na lista de times.

Além disso existe um botão na parte de "Minha Organização" que tem a ação de ocultar os formulários, caso queira ver somente as organizações.

Cadastro Colaborador

Cadastro Colaborador

Cadastro Time

Cadastro Time

🛠 Tecnologias

react logo js logo figma logo git logo github logo

✒️ Autora

Desenvolvido com 💜 por Diana Rose