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.