Esse desafio foi proposto pela time de recrutamento da empresa J&A, em que foram requisitadas habilidades necessáiras para desenvolver um projeto Full Stack. O resultado final é uma plataforma para organização e acompanhamento dos projetos pelos usuários que se cadastram na plataforma, salvando dados num banco de dados SQL através de uma API.
"Nesse desafio, você deverá criar uma aplicação para nos mostrar suas skills e se elas estão de acordo com o dia-a-dia do nosso time de desenvolvimento!"
"Essa será uma aplicação para gerenciar projetos. Será permitida a criação de um usuário com name, password e username, bem como fazer o CRUD de projects"
Abaixo estão os requisitos técnicos e as funcionalidades que a solução deve possuir:
- Front-End para uso do CRUD dos projetos na área logada;
- Back-End em NodeJS ou Python com rotas especificadas;
- Modalagem PostgreSQL;
- Listar todos os projects;
- Alterar o title e deadline de um projeto existentes;
- Marcar um projeto como feito;
- Excluir um projeto;
A solução do desafio foi separarada em duas partes: front-end e back-end, cada em sua respectiva pasta com as seguintes tecnologias principais:
React
Typescript
ReactHooksForms
MUI
Jotai
ReactQuery
Nest
Nodejs
JWT
ClassValidator
GraphQL
Gostaria de informar que me autodesafiei muito nesse case e quis desenvolve-lo com tecnologias em alta no mercado, algumas que até eu nunca tinha trabalhado antes como: Postgre, GraphQL, Rect Hooks Forms, Nestjs e Docker. Por estar atuando a muitos meses no front-end imaginei que iria sentir muita dificuldade na instalação, configuraçao e manipulação do Postgre, um SGBD que nunca havia trabalhado, mas utilizando o Docker consegui criar uma ambiente com tudo que eu precisava sem se quer ter que fazer as configurações manuais que levam tempo para os desenvolvedores inciarem de fato a programação dos seu apps no projeto. Acredito que o ponto alto foi de fato o Docker. Além de claro, o GraphQL que me ajudou a criar com um único end-point a API com tudo que eu precisava.
Para facilitar o processo de rodar o projeto localmente. Recomendo seguir o passo a passo descrito a abaixo, após instalar o Docker e Docker Compose em seu notebook usando a própria documentação da ferramenta para o seu sistema operacional. Em poucos passos você vai perceber que o projeto estará rodando em seu notebook com poucos comandos. É sensacional! Mas se preferir em cada pasta há um readme gerado pelas ferramentas pricipais que explica como manipular e instalar as dependências de cada pasta.
Vamos lá!
- Abra o terminal e crie um diretório no local de sua preferência com o comando mkdir:
mkdir desafio-jea- Entre no diretório que acabou de criar e depois clone o projeto:
cd desafio-jea
git clone https://github.com/dudawiltiner/jea-technical-challenge.git- Entre no diretório criado após a clonagem do repositório.
cd jea-technical-challenge- Crie um arquivo .env na raiz do projeto e em cada pasta (front-end e back-end) com essas variáveis de ambiente.
API_PORT=3001
APP_PORT=3000
APP_ENDPOINT=http://localhost:3001/graphql
DB_HOST=localhost
DB_PORT=5435
DB_USERNAME=eduarda
DB_PASSWORD=dbpass
DB_NAME=project
DB_SYNC=true #sincronização para desenvolvimento- Garanta de remover todas os containers, volumes e imagens que você possui.
docker-compose down -v --rmi all- Limpar tudo que ainda tiver.
docker system prune -af- Instale todas as dependências e rode a aplicação, usando o CLI docker-compose.
docker-compose up --buildApós cada um dos passos a seguir, haverá um exemplo de como cada página pode ser usada, caso tenha dificuldades e o exemplo não seja suficiente, não hesite em me contatar em eduardawiltiner@gmail.com.
Acessando a plataforma neste link, você irá encontrar a tela de Login, em que será redirecionado(a) e poderá realizar o cadastro na tela após clicar no link.
Será onde você deverá se autenticar para ter acesso ao acompanhamento dos projetos na página Home. Sem a autenticação você não terá acesso a Home, mas quando autenticado(a) você não terá que fazer o login novamente quando fechar a página e abri-la depois durante 15 minutos, por conta do uso do JWT e cookies configurados.
Para criar uma tarefa, você deve apenas clicar no "+" do botão flutuante. Uma data de prazo já estará configurada para o mesmo dia de criação da tarefa, mas você pode modificá-la. Que tal colocar um darkmode?!
Para atualizar um projeto, você deve apenas clicar no símbolo de edição no card de cada projeto. E você pode também excluir ou clicar no check para mudar o status para done.
Você pode filtrar os projetos para aparecer apenas os que estão sob a sua responsabilidade.
Para se desconectar da sua conta, só é necessário clicar em seu nome no NavBar e, em seguida, clicar em "Sair". Ao digitar a URL do site de forma errada, não se preocupe, vai paracer a página de erro 404 que vai te ajudar a voltar a Home.
Com o GraphQl temos como testar e olhar a documentação playground da ferramenta. Isso facilita com os testes e na tipagem acessando o seguinte link.
