🚀 Sobre este projeto

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.

Live Preview

• Google Cloud Run

🧠 Contexto

O desafio foi dividido em duas partes, backend e frontend.

O BACKEND

Foi necessário criar uma API com as seguintes funcionalidades:

CRUD de projetos

• Criar um novo projeto
• Listar todos os projetos
• Recuperar um projeto pelo seu id
• Alterar informações de um projeto existente (title, deadline, cost e zip_code)
• Marcar um projeto como concluído
• Excluir um projeto
• Permitir acesso às funcionalidades do CRUD de projetos apenas aos usuários logados

Registro e login de usuários

• Criar um novo usuário
• Login de usuário existente

O FRONTEND

Foi necessário criar uma tela para criar/logar usuários e outra para ser feita a gestão dos projetos.

💡 O que foi entregue

Para o frontend, utilizei React (veja as principais tecnologias utilizadas neste projeto mais abaixo), e dividi o fluxo em 4 páginas:

1. Login
2. Cadastro
3. Listagem de todos os projetos

• A funcionalidade de inserir um novo projeto está nesta tela

4. 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):

POST /users

Cria um novo usuário

---

POST /users/login

Autentica um usuário existente

---

POST /project

Cria um novo projeto

---

GET /project/:id

Busca um projeto pelo id

---

GET /projects

Busca todos os projetos

---

PATCH /projects/:id/done

Marca um projeto como concluído

---

PUT /projects/:id

Altera as informações de um projeto

---

DELETE /projects/:id

Exclui um projeto

🧰 Tecnologias e ferramentas

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:
  • Express
  • PostgreSQL, via Docker
  • Prisma como ORM
  • Axios
  • Vitest
  • Supertest

📋 Instruções

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"

⚠️ Algumas observações sobre a variável 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.

⚙️ Rodando o projeto

⚠️ Este projeto está preparado para utilizar o Docker Compose, e é recomendado utilizá-lo, portanto é necessário ter instalada essa ferramenta na sua máquina.

Modo de Desenvolvimento

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.

Modo de Produção

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.

🧪 Testando o projeto

⚠️ No momento, apenas o backend possui testes. Testes para o frontend estão na lista de próximos passos, assim como testes de integração.

1️⃣ Testes unitários

A partir da raiz do projeto, execute os comandos:

cd api
npm run test

📊 Cobertura

Para ver a cobertura de código execute o comando:

npm run coverage

⏭️ Próximos passos

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