Este é o projeto Fullstack de uma lista de tarefas onde pessoas usuárias podem realizar cadastro e login bem como criar, ler, atualizar e deletar (CRUD) suas tarefas.
O projeto foi desenvolvido num monorepo (um único repositório) contento a implementação do back-end, front-end e dos containers de desenvolvimento da aplicação.
O projeto utiliza Docker Compose para orquestrar múltiplos containers de desenvolvimento.
Ao todo, foram utilizados 3 containers, sendo eles:
db
: serviço do banco de dados da aplicação.api
: serviço da API da aplicação.ui
: serviço da interface da pessoa usuária com a aplicação.
As particularidades e dependências de cada container podem ser vistas no arquivo docker-compose.yml.
O back-end do projeto é formado pelo banco de dados, que armazena os dados das pessoas usuárias e suas tarefas, e pela API, que controla o acesso ao banco de dados a partir de requisições feitas no front-end.
O banco de dados utilizado é o MySQL
, um banco relacional. Essa escolha foi feita porque usuários e tarefas, as entidades trabalhadas na aplicação, possuem um relacionamento fundamental entre si.
As tabelas do banco, Users e Tasks, têm relacionamento 1:N e possuem os seguintes atributos:
id | name | password | |
---|---|---|---|
integer | string | string | string |
id
: identificador único da pessoa usuária.name
: nome da pessoa usuária.email
: email único da pessoa usuária.password
: senha da pessoa usuária.
id | name | status | user_id | created_at |
---|---|---|---|---|
integer | string | string | integer | date |
id
: identificador único da tarefa.name
: nome da tarefa.status
: status da tarefa (Pendente, Em progresso ou Pronta).user_id
: identificador único da pessoa usuária a qual a tarefa pertence.created_at
: data de criação da tarefa.
A API é RESTful (segue as restrições da arquitetura REST) e foi desenvolvida em Node.js
com a arquitetura MSC (Model, Service, Controller) para separação de responsabilidades.
As tecnologias utilizadas para desenvolver a API foram:
Express
: para construir o servidor da API.Joi
: para validar os dados enviados à API.Cors
: para liberar o acesso à API.Json Web Token
: para gerar e validar tokens de acesso usados em endpoints da API.Sequelize
: para mapear as entidades do banco de dados em objetos.Md5
: para gerar o hash das senhas das pessoas usuárias que serão guardados no banco de dados.
Para ver os endpoints da API e o formato de requisição para cada um deles, acesse a documentação da API.
O front-end do projeto é formado pela interface da pessoa usuária. Essa interface é uma SPA (Single Page Application) e permite que a pessoa interaja com a aplicação para realizar cadastro ou login e gerenciar suas tarefas.
As tecnologias utilizadas para desenvolver a interface da pessoa usuária foram:
React
: para construir a interface da pessoa usuária.Axios
: para fazer requisições à API.Local Storage
: para armazenar o token de acesso e nome da pessoa usuária.Context API
: para criar o estado global da interface da pessoa usuária.Styled Components
: para estilizar a interface da pessoa usuária.
Página inicial onde a pessoa usuária pode realizar login na aplicação.
Caso sejam enviados dados de login (email e senha) inválidos, uma resposta visual é exibida na tela. Quando o login é feito com sucesso, a pessoa é redirecionada à página das tarefas.
Ao acessar esta página, caso haja um token válido armazenado no local storage, a pessoa é redirecionada automaticamente para a página das tarefas.
Página onde a pessoa usuária pode se cadastrar para usar a aplicação.
Caso sejam enviados dados de cadastro (email, nome e senha) inválidos, uma resposta visual é exibida na tela. Quando o cadastro é feito com sucesso, a pessoa é redirecionada à página das tarefas.
Página onde a pessoa usuária pode ver todas as suas tarefas, além de editá-las, deletá-las e criar novas.
Nesta página é possível também fazer o logout da aplicação, redirecionando a pessoa para a página de login logo em seguida.
Caso a pessoa tente acessar diretamente esta página sem estar autenticada, ela é redirecionada automaticamente para a página de login.
⚙️ O deploy da aplicação será disponibilizado em breve.
- Ter o Docker e o Docker Compose instalados na sua máquina.
- Clonar o este repositório.
- Criar um arquivo
.env
na raiz do projeto, com base no .env.example, definindo os valores de cada variável de ambiente usada.
Com os pré-requisitos atendidos, siga os seguintes passos para executar o projeto:
- Na raiz do projeto, execute o seguinte comando para iniciar os containers da aplicação:
docker-compose up
Caso queira iniciar os containers em segundo plano, use o seguinte comando:
docker-compose up -d
- Com os containers inicializados, acesse o seguinte endereço no navegador para ver a aplicação rodando:
localhost:3000
Foram feitos testes de integração para cada endpoint da API usando Mocha
, Chai
, Chai-http
e Sinon
, obtendo 98% de cobertura de testes.
Para executar os testes, siga os seguintes passos:
- Acesse o terminal do container da API com o comando abaixo:
docker exec -it todo-list-api bash
- No terminal do container da API, execute o seguinte comando:
npm test
⚙️ Os testes do front-end estão em execução.
- Adicionar a funcionalidade de filtrar tarefas