Skip to content

Aplicação desenvolvida usando React, Typescript, 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.

License

Notifications You must be signed in to change notification settings

Gonzagadavid/appointment-calendar-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

App'ointment Calendar - Frontend




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.

tela da aplicação


Instruções para rodar localmente

1 - Abra o terminal

2 - clone o repositório do Backend git@github.com:Gonzagadavid/appointment-calendar-backend.git

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

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

5 - 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

6 - execute o comando para iniciar o servidor npm start

7 - abra um nova janela do terminal

8 - clone o repositório do Frontend git clone git@github.com:Gonzagadavid/appointment-calendar-frontend.git

9 - entre no diretório do repositorio clonado cd appointment-calendar-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


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. Para rodar os testes localmente use o comando npm test ou npm test <nome do arquivo>

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

About

Aplicação desenvolvida usando React, Typescript, 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

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published