Essa é uma aplicação para gerenciar projetos. É permitida a criação de usuários, bem como fazer o CRUD de projects para cada usuário.
O desafio foi dividido em duas partes, backend e frontend.
Foi necessário criar uma API com as seguintes funcionalidades:
- Criar um novo projeto
- Listar todos os projetos
- Recuperar um projeto pelo seu
id
- Alterar informações de um projeto existente (
title
,deadline
,cost
ezip_code
) - Marcar um projeto como concluído
- Excluir um projeto
- Permitir acesso às funcionalidades do CRUD de projetos apenas aos usuários logados
- Criar um novo usuário
- Login de usuário existente
Foi necessário criar uma tela para criar/logar usuários e outra para ser feita a gestão dos projetos.
Para o frontend, utilizei React (veja as principais tecnologias utilizadas neste projeto mais abaixo), e dividi o fluxo em 4 páginas:
- Login
- Cadastro
- Listagem de todos os projetos
- A funcionalidade de inserir um novo projeto está nesta tela
- Detalhes de um projeto
- As funcionalidades de editar, excluir e marcar como concluído estão nesta tela
Para o backend, desenvolvi a API utilizando Node.js e o framework Express, conectando a um banco de dados PostgreSQL, utilizando o Prisma como ORM (veja as principais tecnologias utilizadas neste projeto mais abaixo), implementando todas as funcionalidades requeridas (veja a documentação completa da API aqui):
Cria um novo usuário
Autentica um usuário existente
Cria um novo projeto
Busca um projeto pelo id
Busca todos os projetos
Marca um projeto como concluído
Altera as informações de um projeto
Exclui um projeto
Para este projeto foram utilizados:
- Typescript
- ts-standard para formatação, padronização e lint do código
- zod, para validação
- Frontend:
- React
- React Hook Form
- React Hot Toast
- raviger, para roteamento
- SWR
- Backend:
Clone o projeto:
git@github.com:israelss/projects-manager.git
Após clonar o projeto, entre no diretório e instale as dependências:
cd projects-manager
npm install
Preencha os arquivos .env
com as variáveis necessárias:
#/.env
POSTGRES_PASSWORD=ExamplePassword
#/api/.env
PORT=3001
DATABASE_URL="postgresql://postgres:ExamplePassword@db:5432/dbname?schema=public"
DATABASE_URL
:
0: Essa variável é necessária por causa do Prisma. Para detalhes de como configurar a conexão com o PostgreSQL via Prisma, acesse a documentação neste link.
1: postgres
é o nome de usuário padrão da imagem docker do PostgreSQL utilizada neste projeto. Se for utilizar outa imagem, ou outra instância do PostgreSQL, altere de acordo.
2: ExamplePassword
é a mesma senha definida na variável POSTGRES_PASSWORD
no arquivo .env
da raiz do projeto.
3: db
é o nome do serviço definido nos arquivos docker-compose.yml
e docker-compose.dev.yml
. Caso não queira utilizar o PostgreSQL definido nestes arquivos, troque db
pelo endereço do HOST correspondente (EX: localhost
)
4: 5432
é a porta padrão exposta pela imagem docker do PostgreSQL utilizada neste projeto. Se for utilizar outa imagem, ou outra instância do PostgreSQL, altere de acordo, tomando cuidado para não escolher uma porta que já esteja em uso.
A partir da raiz do projeto, execute:
npm run compose:up:dev
O frontend estará disponível em http://localhost:3000.
O backend estará disponível em http://localhost:3001.
O banco de dados estará disponível em http://localhost:3002.
A partir da raiz do projeto, execute:
npm run compose:up
O frontend estará disponível em http://localhost:3000.
O backend estará disponível em http://localhost:3001.
O banco de dados estará disponível em http://localhost:3002.
A partir da raiz do projeto, execute os comandos:
cd api
npm run test
Para ver a cobertura de código execute o comando:
npm run coverage
Com mais tempo eu teria implementado as seguintes funcionalidades, e é o que pretendo fazer em breve:
- Mais testes unitários
- Backend
- Frontend
- Testes de integração
- Backend
- Frontend
- Filtragem de projetos:
- Nome
- Prazo (Data máxima | Data exata)
- Custo (Mínimo | Máximo | Exato)
- Status de conclusão (Concluído | Não concluído)
- Localização
- Ordenação de projetos:
- Nome (A-Z | Z-A)
- Prazo (Próximo | Distante)
- Custo (Maior | Menor)
- Melhorar a UX/UI