{"id":20925006,"url":"https://github.com/gonzagadavid/appointment-calendar-fullstack","last_synced_at":"2026-05-08T14:14:04.130Z","repository":{"id":107665900,"uuid":"480202775","full_name":"Gonzagadavid/appointment-calendar-fullstack","owner":"Gonzagadavid","description":" 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.","archived":false,"fork":false,"pushed_at":"2022-04-24T23:37:32.000Z","size":5627,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-23T21:32:29.232Z","etag":null,"topics":["axios","context-api","eslint","express","jsonwebtoken","poo","react-typescript","testing","ts-node-dev","typescript"],"latest_commit_sha":null,"homepage":"https://appointment-calendar-frontend.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gonzagadavid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-11T02:40:51.000Z","updated_at":"2023-05-01T02:40:33.000Z","dependencies_parsed_at":"2023-03-10T18:31:11.831Z","dependency_job_id":null,"html_url":"https://github.com/Gonzagadavid/appointment-calendar-fullstack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Gonzagadavid/appointment-calendar-fullstack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fappointment-calendar-fullstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fappointment-calendar-fullstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fappointment-calendar-fullstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fappointment-calendar-fullstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gonzagadavid","download_url":"https://codeload.github.com/Gonzagadavid/appointment-calendar-fullstack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fappointment-calendar-fullstack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32783663,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","context-api","eslint","express","jsonwebtoken","poo","react-typescript","testing","ts-node-dev","typescript"],"created_at":"2024-11-18T20:28:39.167Z","updated_at":"2026-05-08T14:14:04.089Z","avatar_url":"https://github.com/Gonzagadavid.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# App'ointment Calendar - Full stack\n\n\u003ch1\u003e\u003ca href=\"https://appointment-calendar-frontend.vercel.app/\" \u003eVisite a Aplicação\u003c/a\u003e\u003c/h1\u003e\n\n---\n\n\u003ch2\u003e\u003ca href=\"https://github.com/Gonzagadavid/appointment-calendar-frontend\" \u003eApp'ointment Calendar - Frontend\u003c/a\u003e\u003c/h2\u003e\n\n---\n\n\u003ch2\u003e\u003ca href=\"https://github.com/Gonzagadavid/appointment-calendar-backend\" \u003eApp'ointment Calendar - Backend\u003c/a\u003e\u003c/h2\u003e\n\n---\n\n# Sumário\n\n- [Introdução](#introdução)\n- [Instruções](#instruções)\n- [Frontend](#Frontend)\n  - [Detalhes da aplicação](#detalhes-da-aplicação)\n    - [Tela inicial](#tela-inicial)\n    - [Cadastro](#cadastro)\n    - [Login](#login)\n    - [Adicionar tarefa](#adicionar-tarefa)\n  - [API](#api)\n  - [Testes](#testes)\n  - [Tecnologias](#tecnologias)\n  - [Deploy](#deploy)\n  - [Futuras Implementações](#futuras-implementações)\n- [Backend](#backend)\n  - [Arquitetura](#Arquitetura)\n  - [Rotas](#rotas)\n    - [POST /users](post-/user)\n    - [POST /users/login](post-/user/login)\n    - [POST /tasks](post-/task)\n    - [GET /tasks](get-/task)\n    - [GET /tasks/:id](get-/task/:id)\n    - [PUT /tasks/:id](put-/task/:id)\n    - [DELETE /tasks/:id](delete-/task/:id)\n  - [Banco de Dados](#banco-de-dados)\n  - [Validação](#validação)\n  - [Tecnologias](#tecnologias)\n  - [Testes](#testes)\n  - [Deploy](#deploy)\n  - [Implementações Futuras](implementações-futuras)\n\n\n---\n\n# Introdução\n\nA 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.\n\n---\n\n# Instruções\n\n1 - abra o terminal\n\n2- clone o repositório do full stack `git@github.com:Gonzagadavid/appointment-calendar-fullstack.git`\n\n3- entre no diretório do repositorio clonado `appointment-calendar-fullstack`\n\n4- entre no diretório do backend `cd backend`\n\n5- execute o comando para instalar as dependências `npm install`\n\n6- preencha o arquivo `.env-eg` com os dados do seu banco de dados MongoDB local e mude o nome do arquivo para `.env`  \n*caso não tenha o MongoDB instalado siga o seguinte [tutorial](https://docs.mongodb.com/manual/installation/)* \n\n7- execute o comando para iniciar o servidor `npm start`\n\n7- abra um nova janela do terminal no diretorio `appointment-calendar-fullstack`\n\n9- entre no diretório do frontend `cd frontend`\n\n10- execute o comando para instalar as dependências `npm install`\n\n11 - 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 \n\n12- execute o comando para iniciar a aplicação `npm start`\n\n13- a aplicação iniciará em `http://localhost:3000`\n\n\n# Frontend\n\n# Detalhes da aplicação\n\n\n## Tela inicial\n\nAo iniciar a aplicação, a pessoa usuária terá acesso normalmente ao calendário, porém para adicionar tarefa será requisitado o login. \n\n![tela inicial](./frontend/public/assets/images/tela-inicial.png)\n\n## Cadastro\n\nAo 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.\n\n![formulario de cadastro](./frontend/public/assets/images/cadastro.png)\n\n\n## Login\n\nAo 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. \n\n![tela de login](./frontend/public/assets/images/login.png)\n\n\nApós logar o nome da pessoa usuária será exibido no lado superio direito da tela\n\n![tela inicial](./frontend/public/assets/images/logged.png)\n\n## Adicionar tarefa\n\nPara adicionar tarefa basta a pessoa usuária clicar em 'Add Task' na parte inferior direita\n\n![formulário de tarefa](./frontend/public/assets/images/add-task.png)\n\nApó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.\nOs dias em que tarefas são adicionado a cor da data será azulada com um ícone, indicando que há compromisso para aquele dia.\n\n![tela com tarefa adicionada](./frontend/public/assets/images/task-added.png)\n\n## Detalhes da tarefa\n\nAo clicar em uma tarefa da lista, será exibido os detalhes da tarefa, e pessoa poderá também editar e remover a tarefa.\n\n![detalhes da tarefa](./frontend/public/assets/images/task-details.png)\n\n---\n\n# Api\n\nPara a renderização correta do calendário foi utilizada a API [Calendar JSON API](#https://github.com/Gonzagadavid/calendar-json-api)\n\n---\n\n# Testes\n\nDesenvolvido testes unitários para todos os componentes da aplicação.\n\n![cobertura de testes](./frontend/public/assets/images/testes.png)\n\n---\n\n# Tecnologias\n\n- React\n- Typescript\n- Testing Library\n- Axios\n- Eslint\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg height=\"100\" width=\"100\" src=\"./frontend/public/assets/icons/react.svg\"/\u003e \n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./frontend/public/assets/icons/typescript.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./frontend/public/assets/icons/testinglibrary.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./frontend/public/assets/icons/eslint.svg\" /\u003e\n\u003c/div\u003e\n\n# Deploy\n\nPara o deploy da aplicação foi escolhido a [Vercel](#https://vercel.com/)\n\n\u003ch1\u003e\u003ca href=\"https://appointment-calendar-frontend.vercel.app/\" \u003eVisite a Aplicação\u003c/a\u003e\u003c/h1\u003e\n\n# Futuras implementações\n\n- cobertura de teste em 100% da aplicação\n\n- implementar página para a pessoa adminitradora direcionar tarefas para outras pessoas usuárias\n\n---\n\n# Backend\n\n# Arquitetura\n\nSequindo 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.\n\n![estruturação de pastas](./backend/assets/images/arquitetura.png)\n\n\n# Rotas\n\n## POST /users \n\nA rota `POST /users` foi desenvolvida para o registro de novas pessoas usuárias da aplicação.\n\nentrada:\n\n```json\n{\n  \"body\": {\n\t  \"name\": \"User\",\n    \"lastname\": \"Test\",\n\t  \"email\": \"user@server.com\",\n\t  \"password\": \"123456\"\n  }\n}\n\n```\n\nsaída *(status: 201)*:\n\n```json\n{\n\t\"message\": \"user created successfully\"\n}\n\n```\n\n## POST /users/login\n\nA rota `POST /users/login` foi desenvolvida para que a pessoa usuária registrada no banco de dados possa logar na aplicação.\n\nentrada:\n\n```json\n{\n  \"body\": {\n  \t\"email\": \"user@server.com\",\n\t  \"password\": \"123456\"\n  }\n}\n\n```\n\nsaída *(status: 202)*:\n\n```json\n{\n\t\"token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E\",\n\t\"userName\": \"User Test\"\n}\n\n```\n\n## POST /email\n\nA rota `POST /email` foi desenvolvida para enviar um código de validação para o email da pessoa usuária, durante o cadastro.\n\nentrada:\n\n```json\n{\n  \"body\": {\n  \t\"email\": \"user@server.com\",\n\t  \"password\": \"123456\"\n  }\n}\n\n```\nsaída *(status: 202)*:\n\n```json\n{\n  {\n\t  \"code\": \"BUQN-8\"\n  }\n}\n\n```\n\n## POST /email/password\n\nA rota `POST /email/password` foi desenvolvida para enviar a senha da pessoa usuária para seu email, caso tenha esquecido.\n\nentrada:\n\n```json\n{\n  \"body\": {\n  \t\"email\": \"user@server.com\",\n\t  \"password\": \"123456\"\n  }\n}\n\n```\n\nsaída *(status: 202)*:\n\n```json\n{\n\t{\n\t\t\"message\": \"password sent to email user@server.com\"\n\t}\n\n}\n\n```\n\n\n## POST /tasks\n\nA rota `POST /tasks` foi desenvolvida para a inseção de uma nova tarefa no banco de dados.\n\nentrada:\n\n```json\n{\n  \"body\": {\n\t  \"title\": \"Tarefa 1\",\n\t  \"description\":\"Descrição da tarefa 1\",\n\t  \"status\": \"Programmed\",\n    \"date\": \"2022-04-10T16:46:08.471+00:00\"\n  },\n  \"headers\": {\n    \"authorization\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E\"\n  }\n}\n\n```\n\nsaída *(status: 201)*:\n\n```json\n{\n\t\"_id\": \"6253391c4b6c6911e42b7593\",\n\t\"userId\": \"625333e34b6c6911e42b7590\",\n\t\"email\": \"user@server.com\",\n\t\"title\": \"Tarefa 1\",\n\t\"description\": \"Descrição da tarefa 1\",\n\t\"status\": \"Programmed\",\n\t\"date\": \"2022-04-10T16:46:08.471+00:00\",\n\t\"updated\": \"2022-04-10T20:07:56.489Z\"\n}\n\n```\n\n## GET /tasks\n\nA rota `GET /tasks` foi desenvolvida para buscar todas as tarefas da pessoa usuária no banco de dados.\n\nentrada:\n\n```json\n{\n   \"headers\": {\n    \"authorization\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E\"\n  }\n}\n\n```\n\nsaída *(status: 200)*:\n\n```json\n{\n\t\"tasks\": [\n\t\t{\n\t\t\t\"title\": \"Tarefa 1\",\n\t\t\t\"status\": \"Programmed\",\n\t\t\t\"date\": \"2022-04-10T16:46:08.471+00:00\",\n\t\t\t\"id\": \"6253391c4b6c6911e42b7593\"\n\t\t},\n\t\t{\n\t\t\t\"title\": \"Tarefa 2\",\n\t\t\t\"status\": \"Programmed\",\n\t\t\t\"date\": \"2022-04-10T16:46:08.471+00:00\",\n\t\t\t\"id\": \"625339394b6c6911e42b7594\"\n\t\t}\n\t]\n}\n\n```\n\n## GET /tasks/:id\n\nA rota `GET /tasks/:id` foi desenvolvida para buscar e retornar os dados completos de uma tarefa pelo seu id.\n\nentrada:\n\n```json\n{\n   \"headers\": {\n    \"authorization\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E\"\n  }\n}\n\n```\n\nsaída *(status: 200)*:\n\n```json\n{\n\t\"_id\": \"6253391c4b6c6911e42b7593\",\n\t\"userId\": \"625333e34b6c6911e42b7590\",\n\t\"email\": \"user@server.com\",\n\t\"title\": \"Tarefa 1\",\n\t\"description\": \"Descrição da tarefa 1\",\n\t\"status\": \"Programmed\",\n\t\"date\": \"2022-04-10T16:46:08.471+00:00\",\n\t\"updated\": \"2022-04-10T20:07:56.489Z\"\n}\n\n```\n\n## PUT /tasks/:id\n\nA rota `PUT /tasks/:id` foi desenvolvida para atualizar e retornar os dados completos de uma tarefa pelo seu id.\n\nentrada:\n\n```json\n{\n  \"body\": {\n\t  \"title\": \"Tarefa 1\",\n\t  \"description\":\"Descrição da tarefa 1\",\n\t  \"status\": \"Programmed\",\n    \"date\": \"2022-04-10T16:46:08.471+00:00\"\n  },\n  \"headers\": {\n    \"authorization\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E\"\n  }\n}\n\n```\n\nsaída *(status: 202)*:\n\n```json\n{\n\t\"message\": \"task modified successfully\"\n}\n\n```\n\n\n## DELETE /task/:id\n\nA rota `DELETE /task/:id` foi desenvolvida para remover uma tarefa do banco de dados pelo seu id.\n\n\nentrada:\n\n```json\n{\n\t\"headers\": {\n\t\t\"authorization\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjYyNTMzM2UzNGI2YzY5MTFlNDJiNzU5MCIsImVtYWlsIjoidXNlckBzZXJ2ZXIuY29tIn0sImlhdCI6MTY0OTYyMDI5M30.OfG82bGfsF_TJqLJ3Cp1SIAZMgaTGxxY_WChRBX-85E\"\n  }\n}\n\n```\n\nsaída *(status: 202)*:\n\n```json\n{\n\t\"message\": \"task removed successfully\"\n}\n\n```\n\n---\n\n# Banco de dados\n\nO 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.\n\n---\n\n# Validação\n\nPara 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. \n\n---\n\n# Testes\n\nDesenvolvido testes unitários para as camadas models, services e controllers.\nPara rodar os testes localmente basta rodar o comando `npm test` ou `npm test \u003cnome do arquivo\u003e`.\n\n![cobertura de testes](./backend/assets/images/testes.png)\n\n---\n\n# Tecnologias\n\n- Express\n- Typescript\n- Ts node\n- Nodemon\n- MongoDB\n- Json Web Token\n- Dotenv\n- ESlint\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg height=\"100\" width=\"100\" src=\"./backend/assets/icons/express.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./backend/assets/icons/typescript.svg\"/\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./backend/assets/icons/tsnode.svg\"/\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./backend/assets/icons/nodemon.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./backend/assets/icons/mongodb.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./backend/assets/icons/eslint.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./backend/assets/icons/jsonwebtokens.svg\" /\u003e\n\u003c/div\u003e\n\n# Deploy\n\nDeploy feito no heroku [Heroku](https://www.heroku.com/)\n\n \u003cimg src=\"./backend/assets/icons/heroku.svg\" alt=\"heroku icon\" height=\"70\" width=\"70\"\u003e\n\n\u003ch1\u003e\u003ca href=\"https://appointment-calendar-frontend.vercel.app/\" \u003eVisite a Aplicação\u003c/a\u003e\u003c/h1\u003e\n\n# Implementações Futuras\n\n- Documentação Swagger\n- 100% de cobertura de teste\n- Rota de pessoa administradora para direcionar tarefas.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzagadavid%2Fappointment-calendar-fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgonzagadavid%2Fappointment-calendar-fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzagadavid%2Fappointment-calendar-fullstack/lists"}