📕 Kanban Board

Aplicação desenvolvida para que você possa gerenciar sua lista de afazeres e dividindo as tarefas em:

To Do
Doing
Done

Highlights da aplicação:

drag and drop para mover entre colunas
renderização de markdown no conteúdo de um card
layout responsivo
persistência de dados em API

Setup

Para executar a aplicação em sua máquina você tem duas maneiras: localmente com uma versão do NodeJS >= 16 ou via Docker.

🚧 Antes de executar os passos é muito importante que as variáveis de ambiente sejam configuradas. Tanto o backend quanto o frontend, possuem um arquivo .env para este fim. Sem estas configurações o aplicativo não funcionará adequadamente.

Utilizando Docker para rodar a aplicação

Na raiz do repositório execute docker compose up -d. A aplicação estará disponível no endereço http://localhost:5173/.

Rodando sem Docker

Você também pode seguir os seguintes passos:

Navegar até a pasta /backend, e executar yarn ou npm i para instalar as dependências
Iniciar o backend a partir do comando yarn server ou npm run server
Abrir em outro terminal a pasta /frontend e executar yarn ou npm i para instalar as dependências
Iniciar o frontend com o comando yarn dev ou npm run dev

A aplicação estará disponível no endereço http://localhost:5173/.

Decisões Arquiteturais

A decisão das tecnologias utilizadas no projeto envolveu três fatores: pré-requisitos, tempo estimado e experiências anteriores. São elas as principais:

React JS: lib de interfaces para SPA que tenho maior proeficiência;
Typescript: utilizar tipos no front-end é libertador e desde que comecei achei extremamente poderoso para velocidade de desenvolvimento e manter projetos bem estruturados;
React Query: lib de gerenciamento de estados provenientes de api que foi crucial para separar conceitos e manter componentes menores.
Vite: bundler extremamente rápido e leve.
Plop: lib para criar arquivos baseados em templates, foi utilizada para criar componentes com rapidez no desenvolvimento e manter o padrão no nome e estrutura dos arquivos.

Alguns ganhos da arquitetura escolhida:

SPA: single page applications tornam a experiência de usuário mais fluida,
Stale While Revalidate: utilizando o react-query foi possível gerenciar com menos código o estado proveniente de dados da API junto com algumas funcionalidades relevantes, o SWR é uma das melhores delas que possibilita que o usuário veja um conteúdo mais recente enquanto a api é chamada em background, isso diminui a quantidade de loadings e melhora UX, além de ser um código mais enxuto se comparado com uma implementação análoga em Redux, por exemplo.

Pontos de melhoria

Recursos que não foram possíveis de adicionar até o momento mas que são importantes: