Kairos WebApp 💻

Tecnologias usadas • Introdução • Funcionalidades • API Endpoints • Autores • Licença • Créditos • Contato

Web app para agendamento de eventos pessoais.

📦 Tecnologias usadas:

• Django(Backend)
• Django REST Framework(API)
• Vue 3(Composition API com script setup)
• Tailwind CSS
• Quasar 2(Framework para construção de aplicações Vue.js)
• Pinia(Gerenciamento de estado)
• Vue-Router(Gerenciamento de rotas)
• Axios(Integração de APIs)
• Bootstrap Icons

🔥 Introdução:

⚙️ Pré-requisitos:

Você precisa ter instalado na sua máquina as seguintes tecnologias:

• Node
• Python

*Obs.: Desenvolvi este projeto com Node 20.x e Python 3.12.x. Não testei o projeto em versões anteriores destas tecnologias.

🔨 Guia de instalação:

Passo 1: Clone esse repositório

git clone git@github.com:EmanuelLacerda/kairos-webapp.git

Passo 2: Acesse a pasta do respositório

cd kairos-webapp

Passo 3: Instale as dependências

Neste repositório, há 2 diretórios, sendo um deles a api(server/) e o outro o frontend(web/). Cada repositório possuí dependências próprias. Então, você precisa instalar as dependências individualmente. Abaixo segue como fazer para cada um dos dois.

1° Acesse o diretório "server":

cd server

2° Execute o "pip3 install -r requirements.txt":

pip3 install -r requirements.txt

3° Volte para a raiz do projeto:

cd ..

4° Acesse o diretório "web":

cd web

5° Execute o comando "npm install":

npm install

6° Volte para a raiz do projeto:

cd ..

Passo 04: Adicione as variáveis de ambiente no diretório server

Ao acessar server/.env.examples você verá o seguinte conteúdo:

SECRET_KEY=
DEBUG=
DB_NAME=
DB_USER=
DB_PASSWORD=
DB_HOST=
DB_PORT=
EMAIL_HOST=
EMAIL_HOST_USER=
EMAIL_HOST_PASSWORD=
EMAIL_PORT=

Explicação sobre as varíaveis:

• SECRET_KEY: Coloque nesta a SECRET_KEY que você tiver gerado para a aplicação Django.
• DEBUG: Coloque nesta um boolean indicando se o projeto está ou não no debug mode.
• DB_NAME até DB_PORT: Coloque nestas as informações do banco relacional em você salvará os dados. De preferência, utilize um banco PostgreSQL, pois o projeto foi desenvolvido pensando neste banco.
• EMAIL_HOST até EMAIL_PORT: Coloque nestas as informações do host de e-mail que será utilizado para enviar as mensagens via e-mail.

Passo 05: Execute o projeto

1° Acesse o diretório server:

cd server

2° Execute as migrations:

python3 manage.py migrate

3° Execute a api:

python3 manage.py 

4° Acesse o diretório web:

cd web

5° Execute o frontend:

npx quasar dev #ou
quasar dev #este segundo comando só funcionará se tiver o Quasar instalado globalmente

*Obs.: Para o projeto funcionar corretamente, api e frontend devem estar em execução ao mesmo tempo.

⚙️ Funcionalidades

Funcionalidades de autenticação:

• Cadastro de usuário.
• Verificação de e-mail de usuário.
• Login.
• Logout.

Funcionalidades de gerenciamento de eventos:

• Adição de eventos com duração de 1 dia ou mais e ligados ao usuário que os criou.
• Listagem de eventos em calendário.
• Edição de eventos.
• Remoção de eventos.

⚙️ API Endpoints

A API provém os seguintes endpoints:

rota	descrição
POST /auth/register/	Registra um novo usuário Ver detalhes
POST /auth/verify-email/	Verifica o e-mail de um usuário Ver detalhes
POST /auth/login/	Retorna o access e o refresh token de um usuário Ver detalhes
POST /auth/logout/	Adiciona o refresh token de um usuário na blacklist Ver detalhes
GET /auth/profile/	Verifica a validade do access token de um usuário Ver detalhes
POST /auth/token/refresh/	Gera um novo access token para um usuário Ver detalhes
POST /auth/password-reset/	Solicita mudança de senha Ver detalhes
GET /auth/password-reset-confirm/{uidb64}/{passwordResetToken}/	Verifica se o token de mudança de senha é válido Ver detalhes
PATCH /auth/set-new-password/	Muda a senha Ver detalhes
GET /events	Pega a lista de todos os eventos. Ver detalhes
GET /events/{eventUUID}/	Pega um evento específico por UUID. Ver detalhes
POST /events	Registra um novo evento Ver detalhes
PUT /events/{eventUUID}/	Edita os dados de um evento específico por UUID
PATCH /events/{eventUUID}/	Edita os dados de um evento específico por UUID
DELETE /events/{eventUUID}/	Remove um evento específico por UUID
GET /users/{userId}/eventUUID/	Pega todos os eventos de um usuário específico por UUID. Ver detalhes

POST /auth/register/

REQUEST:

{
  name: 'Emanuel de Souza Lacerda',
  email: 'emanuellacerda@gmail.com',
  password: 'te@12klLA',
  confirm_password: 'te@12klLA'
}

RESPONSE:

{
  name: 'Emanuel de Souza Lacerda',
  email: 'emanuellacerda@gmail.com'
}

POST /auth/verify-email/

REQUEST:

{
  code: '238657'
}

RESPONSE:

{
 message: "O e-mail foi verificado com sucesso"
}

POST /auth/login/

REQUEST:

{
  email: 'emanuellacerda@gmail.com',
  password: 'te@12klLA'
}

RESPONSE:

{
  name: 'Emanuel de Souza Lacerda',
  email: 'emanuellacerda@gmail.com',
  access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzQxNTQ5NjUxLCJpYXQiOjE3NDE1NDkwNTEsImp0aSI6IjViYTg3MzZkMDQ4ZTQ5YTk4ZGI3ZWJhNmFmYjA0YjlkIiwidXNlcl9pZCI6OH0.T69yVAqEFlAEcj8ODabqjheaYn7jEBMQZagat6EU0aI',
refresh_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTc0MTYzNTQ1MSwiaWF0IjoxNzQxNTQ5MDUxLCJqdGkiOiJmNWE3ZTJiMzcyNTQ0ZmViYjIwZTE4OTdiYjVkZDcxMyIsInVzZXJfaWQiOjh9.FX2a-g85tgb4iL9A-ISRe10RxG34za0QxmJslcnVgjk'
}

POST /auth/logout/

REQUEST:

{
  refresh_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwicm9sZSI6InVzZXIiLCJleHAiOjE2ODg4ODg4ODh9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
}

POST /auth/profile/

REQUEST:

headers: {
  'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzQxNTQ5NjUxLCJpYXQiOjE3NDE1NDkwNTEsImp0aSI6IjViYTg3MzZkMDQ4ZTQ5YTk4ZGI3ZWJhNmFmYjA0YjlkIiwidXNlcl9pZCI6OH0.T69yVAqEFlAEcj8ODabqjheaYn7jEBMQZagat6EU0aI'
}

RESPONSE:

{
    message: 'Access token válido'
}

POST /auth/token/refresh/

REQUEST:

{
  refresh: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwicm9sZSI6InVzZXIiLCJleHAiOjE2ODg4ODg4ODh9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
}

RESPONSE:

{
    access: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzQxNTU1Nzk1LCJpYXQiOjE3NDE1NTQyMDEsImp0aSI6IjQxZjlhMDgzZDc3NTQ1Nzc5MzVlYjU1ZDdkMmIxYWUzIiwidXNlcl9pZCI6MX0.LVBBXKoWAc2zj8mB68lMK1-X9fc4BULajVg1AL29Cyw'
}

POST /auth/password-reset/

REQUEST:

{
  email: 'emanuellacerda@gmail.com'
}

RESPONSE:

{
    message: 'Um link foi enviado para seu e-mail para redefinir sua senha'
}

GET /auth/password-reset-confirm/

RESPONSE:

{
    success: true,
    message: 'Credenciais são válidas',
    uidb64: 'OA',
    token: 'cmfa98-977a1ffcda77d9d43fee15f27c0e3e28'
}

PATCH /auth/set-new-password/

REQUEST:

{
  "password": "758$JFJ388lka@",
	"confirm_password": "758$JFJ388lka@",
	"uidb64": "OA",
	"token": "cmf783-35b27aa704b3d4b6e9010f6b1ab79c54"
}

RESPONSE:

{
  message: 'Sua senha foi redefinida com sucesso'
}

GET /events/

RESPONSE:

[
    {
        id: 'f75b6d05-439c-4af1-a2d9-8f7eb6efe19b',
        created_at: '2025-02-17T13:44:37.436230Z',
        updated_at: '2025-02-23T20:19:03.735480Z',
        active: true,
        description: 'Reunião de planejamento do projeto X',
        start: '2025-03-01T10:00:00Z',
        end: '2025-03-01T12:00:00Z',
        creator: 1,
        participants: []
    },
    {
        id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
        created_at: '2025-02-20T09:00:00.000000Z',
        updated_at: '2025-02-22T15:30:00.000000Z',
        active: true,
        description: 'Aniversário da equipe',
        start: '2025-03-15T14:00:00Z',
        end: '2025-03-15T17:00:00Z',
        creator: 4,
        participants: []
    }
]

GET /events/a1b2c3d4-e5f6-7890-1234-567890abcdef/

RESPONSE:

{
    id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
    created_at: '2025-02-20T09:00:00.000000Z',
    updated_at: '2025-02-22T15:30:00.000000Z',
    active: true,
    description: 'Aniversário da equipe',
    start: '2025-03-15T14:00:00Z',
    end: '2025-03-15T17:00:00Z',
    creator: 4,
    participants: []
}

POST /events/

REQUEST:

{
  description: 'Consulta médica de rotina',
  start: '2025-03-20T11:00:00Z',
  end: '2025-03-20T12:00:00Z',
  creator: 6
}

RESPONSE:

{
  id: '123e4567-e89b-12d3-a456-426614174000',
  created_at: '2025-02-23T20:30:00.000000Z',
  updated_at: '2025-02-23T20:30:00.000000Z',
  active: true,
  description: 'Consulta médica de rotina',
  start: '2025-03-20T11:00:00Z',
  end: '2025-03-20T12:00:00Z',
  creator: 6,
  participants: []
}

GET /users/6/events/

RESPONSE:

[
  {
    id: '123e4567-e89b-12d3-a456-426614174000',
    created_at: '2025-03-05T08:30:00.000000Z',
    updated_at: '2025-03-05T09:15:00.000000Z',
    active: true,
    description: 'Consulta médica de rotina',
    start: '2025-03-20T11:00:00Z',
    end: '2025-03-20T12:00:00Z',
    creator: 6,
    participants: []
  }
]

👷 Autores

• Emanuel Lacerda - Desenvolvedor - @EmanuelLacerda

📄 Licença

Esse projeto está sob a licença MIT - acesse os detalhes LICENSE.md.

Créditos:

O layout das telas de login, criar conta e similares foram baseadas neste design de tela de login publicado no FIGMA pelo usuário Ajay Gorecha(@gorechajay)

✉️ Contato

Se tiver alguma dúvida, quiser fazer sugestões, elogios, etc., se sinta livre para entrar em contato comigo por meio de um dos contatos abaixo:

• in/emanuel-de-souza-lacerda
• emanuelsouzalacerda@gmail.com