Frontend da SPA de gerenciamento de projetos usando o método Kanban. Este frontend foi construído utilizando as tecnologias Nuxt 3, Vue 3, Tailwind CSS e DaisyUI, e se integra com duas APIs distintas. Uma delas é uma API RESTful responsável pelo gerenciamento de usuários, fornecida pelo serviço de BaaS (Backend As A Service) oferecido pelo provedor Back4App. A segunda API é uma API GraphQL fornecida pelo micro-serviço Kanban Data.

Link para o protótipo em alta fidelidade no Figma

Este frontend foi desenvolvido como uma parte do trabalho de conclusão do terceiro e último módulo - Desenvolvimento Backend Avançado - da Pós-Graduação em Engenharia de Software/Desenvolvimento FullStack da PUC-RIO.

• Listar quadros.
• Criar novo quadro.
• Criar tarefa.
• Editar tarefa.
• Excluir tarefa.
• Adicionar sub tarefas.
• Login de usuário.
• Logout de usuário.
• Registro de usuários.
• Gerenciador de temas.
• Sistema de notificação.
• Implementar backend real.

• Arquivar quadros.
• Criar/Editar/Arquivar workflows|status.
• Arquivar tarefas.
• Reordenar tarefas.
• Reordenar sub tarefas.
• Arrastar tarefas entre workflows|status.
• Layout Responsivo para mobile.
• Validação dos formulários.
• Tratamento de erro para consultas graphql.
• Exibir/Editar informações do perfil de usuário.
• Loading overlay

Antes de começar, verifique se o seu ambiente atende aos seguintes requisitos:

ATENÇÃO, este frontend requer que o módulo de gerenciamento de usuários do Back4App e micro serviço de dados Kanban Data estejam em execução antes de iniciar. Recomendo seguir as instruções contidas no README do repositório de implantação - Kanban Deploy - para garantir uma configuração adequada.

• Docker

Instalação do docker: https://docs.docker.com/engine/install/

• Conta no BaaS - Back4app

Você precisa criar uma conta gratuita no Back4app (https://back4app.com) e recuperar as seguintes Keys:

APPLICATION_ID
RESTAPIKEY

As Keys estão disponíveis na dashboard administrativa em "App Settings" > "Security & Keys"

Faça clone do projeto:

git clone https://github.com/bpbastos/kanban-frontend.git

Acesse o diretório do projeto com:

cd kanban-frontend

Crie um arquivo .env na raiz do diretório kanban-frontend com as seguintes variáveis:

Substituia as variáveis BACK4APP_APPID e BACK4APP_RESTAPIKEY com as keys da sua conta no Back4app. Crie uma chave única de 32 caracteres e atribua à variável NUXT_SECRET.

BACK4APP_URL=https://parseapi.back4app.com
BACK4APP_APPID=chave-appid-do-back4app
BACK4APP_RESTAPIKEY=chave-restapikey-do-back4app
KANBANDATA_URL=http://localhost:8000/graphql
NUXT_SECRET=chave-com-32-caracteres

No diretório kanban-frontend em um terminal, execute:

docker build -t kanban-frontend:1.0 $(for i in `cat .env`; do out+="--build-arg $i " ; done; echo $out;out="") .

PS.: O trecho "$(for i in cat .env; do out+="--build-arg $i " ; done; echo $out;out="")" constrói o parâmetro --build-arg automaticamente de acordo com as variáveis do arquivo .env.

E depois:

docker run -d --env-file ./.env -p 3000:3000 --name frontend kanban-frontend:1.0 

Abra o endereço http://localhost:3000/ no seu navegador.