Personal Kanban ToDo List com CodeIgniter 4 e Vanilla JS

O que é o projeto?

ToDo List Kanban é uma aplicação web leve, ágil e visual projetada para o #gerenciamento de #tarefas pessoais e de equipes. Inspirado na #metodologia ágil Kanban, o sistema permite que o usuário acompanhe o fluxo de trabalho de forma altamente visual através de um quadro interativo com colunas representando o status de cada atividade.

O diferencial do sistema é sua arquitetura técnica, dividindo completamente o processamento da "inteligência" (Backend API) da interface com o usuário (Frontend Visual), criando uma experiência de uso instantânea sem a necessidade de recarregar a tela (Single Page Application - SPA).

Github: https://github.com/GilbertoMG/personal-todo-codeigniter-res.git


Funcionalidades Principais

Aqui estão as funcionalidades que entregam valor direto na organização diária:

  1. Gestão Visual Intuitiva (Quadro de 4 Estágios): A tela principal é dividida em 4 colunas clássicas para organização clara do estado da tarefa:

    •  Limbo: Para ideias despriorizadas ou bloqueadas temporariamente.
    •  Para Fazer (To Do): Backlog de tarefas que devem ser iniciadas.
    •  Fazendo (Doing): O que está sob a atenção do usuário neste momento.
    •  Feito (Done): Registro de conquistas e atividades terminadas.
  2. Interação Drag and Drop (Arrastar e Soltar): A mudança de status e progressão flui com um simples movimento do mouse. O usuário clica, segura e solta o cartão de tarefa na próxima coluna, atualizando o sistema automaticamente em tempo real e de forma silenciosa.

  3. Operações Completas de Tarefas (Mini-CRUD ágil):

    • Criar: Um botão rápido para registrar um novo Título e Descrição, já caindo no #quadro em tempo real.
    • Ler: Apresentação clara de todos os cartões nos seus devidos estágios.
    • Editar: Ícone num clique para reescrever títulos com erros de digitação ou expansão de texto.
    • Deletar: Lixeira de fácil acesso, mas protegida por uma janela de confirmação de segurança previnindo "missclicks".
  4. Feedback de Interface Refinado: Alertas e balões na tela não são daquele modelo nativo e "feio" dos navegadores. Usamos o sistema SweetAlert2 que oferece janelas redondas, animadas e agradáveis. Além disso, cada cartão se coloriza com a cor da coluna correspondente (Cartões Vermelhos, Azuis, Amarelos e Verdes).

  5. Exclusões Seguras (Soft Deletes): Para prevenir perda catastrófica de dados, deletar uma tarefa no quadro visual não a apaga permanentemente do banco de dados na hora, garantindo tranquilidade institucional e logs históricos de auditoria no "fundo" do sistema se necessário.


Aplicações de Uso

Esta aplicação pode ser usada (ou escalada nos negócios) em diversos contextos:

  • Produtividade Pessoal/Estudantil: Estudantes organizando matérias da faculdade, afazeres da casa, fluxo de revisão, entre outros.
  • Freelancers e Autônomos: Uma visão unificada dos clientes ou projetos (O que entra, o que estou fazendo, o que entreguei).
  • Provas de Conceito Técnicas e Tutoriais: O código-fonte foi escrito de maneira extremamente pragmática usando a divisão Backend/Frontend, transformando-o num material de estudo de alta qualidade para currículo ou ensino.
  • Base Escalonável MVP: Perfeito como base barata para empresas que precisam de um gerenciador de tickets próprios interno, com capacidade enorme de ter "login de usuários" adicionado posteriormente de maneira simplificada.

Tecnologia

Embora construída para parecer o mais simples possível para o usuário, as engrenagens rodam numa stack robusta:

  • Backend (PHP 8 + CodeIgniter 4): Age puramente como uma API de dados enxuta via protocolo REST. Responsável estritamente pela leitura no Banco de Dados (MySQL) e validação de segurança reforçada (Evitando scripts maliciosos ou ataques como falsificação CSRF).
  • Frontend (Vanilla Javascript + Bootstrap 5 CSS): Toda animação de carregamento, colorização e estrutura de grade provém direto do navegador do usuário, contornando a renderização pesada e provendo uma fluidez muito mais atraente ao ser usada.