Skip to content

Aplicação full stack desenvolvida usando React TS, Typescript, Express, Json Web Token, Axios e Context-API, com o objetivo de proporcionar a pessoa usuária de forma visual o controle de prazos e agendamento de tarefas, prazos e compromissos.

Notifications You must be signed in to change notification settings

Gonzagadavid/appointment-calendar-fullstack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

App'ointment Calendar - Full stack




Sumário


Introdução

A aplicação Appoiment Calendar foi desenvolvida com o objetivo de proporcionar a pessoa usuária de forma visual o controle de prazos e agendamento de tarefas, prazos e compromissos.


Instruções

1 - abra o terminal

2- clone o repositório do full stack [email protected]:Gonzagadavid/appointment-calendar-fullstack.git

3- entre no diretório do repositorio clonado appointment-calendar-fullstack

4- entre no diretório do backend cd backend

5- execute o comando para instalar as dependências npm install

6- preencha o arquivo .env-eg com os dados do seu banco de dados MongoDB local e mude o nome do arquivo para .env
caso não tenha o MongoDB instalado siga o seguinte tutorial

7- execute o comando para iniciar o servidor npm start

7- abra um nova janela do terminal no diretorio appointment-calendar-fullstack

9- entre no diretório do frontend cd frontend

10- execute o comando para instalar as dependências npm install

11 - verifique no arquivo src/services/backend/endpoints.ts está com a constante BASE_URL condizente com a porta do backend, caso tenha alterado no backend, deverá ser atulizado nessa constante também

12- execute o comando para iniciar a aplicação npm start

13- a aplicação iniciará em http://localhost:3000

Frontend

Detalhes da aplicação

Tela inicial

Ao iniciar a aplicação, a pessoa usuária terá acesso normalmente ao calendário, porém para adicionar tarefa será requisitado o login.

tela inicial

Cadastro

Ao clicar em Sign Up na parte superior direita a pessoa usuária porderá se cadastrar na aplicação, forncendo nome, sobrenome e um email ativo.

formulario de cadastro

Login

Ao clicar em Log In na parte superior da tela a pessoa usuária poderá entrar na aplicação, tendo a opção de manter-se logada.

tela de login

Após logar o nome da pessoa usuária será exibido no lado superio direito da tela

tela inicial

Adicionar tarefa

Para adicionar tarefa basta a pessoa usuária clicar em 'Add Task' na parte inferior direita

formulário de tarefa

Após preencher o formulário com as informações da tarefa e clicar em 'Send', será exibido os detalhes da tarefa, e então a tarefa será adicionada na lista daquele dia. Os dias em que tarefas são adicionado a cor da data será azulada com um ícone, indicando que há compromisso para aquele dia.

tela com tarefa adicionada

Detalhes da tarefa

Ao clicar em uma tarefa da lista, será exibido os detalhes da tarefa, e pessoa poderá também editar e remover a tarefa.

detalhes da tarefa


Api

Para a renderização correta do calendário foi utilizada a API Calendar JSON API


Testes

Desenvolvido testes unitários para todos os componentes da aplicação.

cobertura de testes


Tecnologias

  • React
  • Typescript
  • Testing Library
  • Axios
  • Eslint
           

Deploy

Para o deploy da aplicação foi escolhido a Vercel

Futuras implementações

  • cobertura de teste em 100% da aplicação

  • implementar página para a pessoa adminitradora direcionar tarefas para outras pessoas usuárias


Backend

Arquitetura

Sequindo o formato da arquitetura em camadas MSC (Model Service Controllers), inicialmente o código foi desenvolvido de forma funcional, porém foi refatorado para POO(programação orientada a objetos) ,a estruturação do código foi feita de forma tornar o código légivel e de fácil entendimento, visando o reaproveitamento e não gerar problemas para a implementação de futuras melhorias, novas funcionalidades e escalabilidade.

estruturação de pastas

Rotas

POST /users

A rota POST /users foi desenvolvida para o registro de novas pessoas usuárias da aplicação.

entrada:

{
  "body": {
	  "name": "User",
    "lastname": "Test",
	  "email": "[email protected]",
	  "password": "123456"
  }
}

saída (status: 201):

{
	"message": "user created successfully"
}

POST /users/login

A rota POST /users/login foi desenvolvida para que a pessoa usuária registrada no banco de dados possa logar na aplicação.

entrada:

{
  "body": {
  	"email": "[email protected]",
	  "password": "123456"
  }
}

saída (status: 202):

{
	"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E",
	"userName": "User Test"
}

POST /email

A rota POST /email foi desenvolvida para enviar um código de validação para o email da pessoa usuária, durante o cadastro.

entrada:

{
  "body": {
  	"email": "[email protected]",
	  "password": "123456"
  }
}

saída (status: 202):

{
  {
	  "code": "BUQN-8"
  }
}

POST /email/password

A rota POST /email/password foi desenvolvida para enviar a senha da pessoa usuária para seu email, caso tenha esquecido.

entrada:

{
  "body": {
  	"email": "[email protected]",
	  "password": "123456"
  }
}

saída (status: 202):

{
	{
		"message": "password sent to email [email protected]"
	}

}

POST /tasks

A rota POST /tasks foi desenvolvida para a inseção de uma nova tarefa no banco de dados.

entrada:

{
  "body": {
	  "title": "Tarefa 1",
	  "description":"Descrição da tarefa 1",
	  "status": "Programmed",
    "date": "2022-04-10T16:46:08.471+00:00"
  },
  "headers": {
    "authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E"
  }
}

saída (status: 201):

{
	"_id": "6253391c4b6c6911e42b7593",
	"userId": "625333e34b6c6911e42b7590",
	"email": "[email protected]",
	"title": "Tarefa 1",
	"description": "Descrição da tarefa 1",
	"status": "Programmed",
	"date": "2022-04-10T16:46:08.471+00:00",
	"updated": "2022-04-10T20:07:56.489Z"
}

GET /tasks

A rota GET /tasks foi desenvolvida para buscar todas as tarefas da pessoa usuária no banco de dados.

entrada:

{
   "headers": {
    "authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E"
  }
}

saída (status: 200):

{
	"tasks": [
		{
			"title": "Tarefa 1",
			"status": "Programmed",
			"date": "2022-04-10T16:46:08.471+00:00",
			"id": "6253391c4b6c6911e42b7593"
		},
		{
			"title": "Tarefa 2",
			"status": "Programmed",
			"date": "2022-04-10T16:46:08.471+00:00",
			"id": "625339394b6c6911e42b7594"
		}
	]
}

GET /tasks/:id

A rota GET /tasks/:id foi desenvolvida para buscar e retornar os dados completos de uma tarefa pelo seu id.

entrada:

{
   "headers": {
    "authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E"
  }
}

saída (status: 200):

{
	"_id": "6253391c4b6c6911e42b7593",
	"userId": "625333e34b6c6911e42b7590",
	"email": "[email protected]",
	"title": "Tarefa 1",
	"description": "Descrição da tarefa 1",
	"status": "Programmed",
	"date": "2022-04-10T16:46:08.471+00:00",
	"updated": "2022-04-10T20:07:56.489Z"
}

PUT /tasks/:id

A rota PUT /tasks/:id foi desenvolvida para atualizar e retornar os dados completos de uma tarefa pelo seu id.

entrada:

{
  "body": {
	  "title": "Tarefa 1",
	  "description":"Descrição da tarefa 1",
	  "status": "Programmed",
    "date": "2022-04-10T16:46:08.471+00:00"
  },
  "headers": {
    "authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E"
  }
}

saída (status: 202):

{
	"message": "task modified successfully"
}

DELETE /task/:id

A rota DELETE /task/:id foi desenvolvida para remover uma tarefa do banco de dados pelo seu id.

entrada:

{
	"headers": {
		"authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E"
  }
}

saída (status: 202):

{
	"message": "task removed successfully"
}

Banco de dados

O banco de dados usado para aplicação foi o MongoDB, sendo ele um banco não relacional, tornou-se uma excelente opção para uma aplicação, pois a relação entre os dados da aplicação são simples.


Validação

Para a validação de entrada foi desenvolvido middlewares, dessa forma evitando o desperdício de recursos com requisições inválidas. Para gerar e validar o token foi utilizado o jsonwebtoken, podendo utilizar informações da pessoa usuária contidas no payload para registro de suas ações evitando uso de recursos para obter essas informações.


Testes

Desenvolvido testes unitários para as camadas models, services e controllers. Para rodar os testes localmente basta rodar o comando npm test ou npm test <nome do arquivo>.

cobertura de testes


Tecnologias

  • Express
  • Typescript
  • Ts node
  • Nodemon
  • MongoDB
  • Json Web Token
  • Dotenv
  • ESlint
                       

Deploy

Deploy feito no heroku Heroku

heroku icon

Implementações Futuras

  • Documentação Swagger
  • 100% de cobertura de teste
  • Rota de pessoa administradora para direcionar tarefas.

About

Aplicação full stack desenvolvida usando React TS, Typescript, Express, Json Web Token, Axios e Context-API, com o objetivo de proporcionar a pessoa usuária de forma visual o controle de prazos e agendamento de tarefas, prazos e compromissos.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published