Visão geral
Chatbot interativo desenvolvido em React.js para responder perguntas de programação com base em palavras-chave e respostas pré-definidas. O projeto foi construído como Projeto 5 Estrelas no programa The Accelerator da Workana, com foco em clareza de fluxo e experiência de uso.
Funcionalidades
- Interface responsiva e intuitiva com Bootstrap 5.
- Sistema de matching por palavras-chave com pontuação.
- Mais de 350 respostas sobre tópicos diversos de programação.
- Histórico salvo automaticamente no localStorage.
- Botão para limpar conversa com confirmação.
- Auto-scroll para novas mensagens e suporte à tecla Enter.
- Normalização de texto para ignorar acentos e pontuação.
- Avatar do bot e interface visual limpa para facilitar a leitura.
Tópicos cobertos
- Linguagens como JavaScript, Python, TypeScript, Java, C++, C#, PHP, Ruby, Swift, Kotlin, Go e Rust.
- Frameworks e bibliotecas como React, Vue, Angular, Next.js, Node.js, Express, Django e Flask.
- Bancos de dados relacionais e NoSQL, incluindo PostgreSQL, MongoDB, MySQL e SQLite.
- Ferramentas e conceitos de arquitetura, DevOps, segurança, web moderna e metodologias ágeis.
Como funciona o matching
- O texto do usuário é normalizado para reduzir ruído de acentos e pontuação.
- O algoritmo atribui maior peso para correspondência exata completa.
- Depois avalia se a palavra-chave está contida na mensagem.
- Em seguida soma pontuação por palavra individual encontrada.
- Também considera matches parciais para palavras maiores.
- A resposta com maior pontuação final é a escolhida para o retorno do bot.
Estrutura do projeto
ChatContainer.jsx
Componente principal que organiza a experiência da conversa.
MessageList.jsx
Renderiza a lista de mensagens e acompanha o histórico da interação.
MessageItem.jsx
Responsável por cada mensagem individual, incluindo o avatar do bot.
InputField.jsx
Controla a entrada do usuário e o envio das perguntas.
responses.js
Banco local de respostas com palavras-chave e conteúdo associado.
chatLogic.js
Implementa a lógica de matching e seleção da melhor resposta.
Tecnologias e execução
- React.js para a interface baseada em componentes.
- Vite como ferramenta de build e servidor local de desenvolvimento.
- Bootstrap 5 para o layout responsivo e rápido de montar.
- JavaScript ES6+ para componentes e lógica de matching.
- LocalStorage API para persistência de histórico no navegador.
O README também documenta uma execução totalmente local: instalar dependências com `npm install`, iniciar com `npm run dev` e testar em `http://localhost:5173/`. Isso torna o projeto simples de demonstrar e fácil de personalizar.
Possibilidades de evolução
Entre as melhorias futuras citadas no README estão integração com APIs de IA como GPT, exportação do histórico de conversas, modo escuro, sugestões de perguntas, múltiplos idiomas e mecanismos de feedback do usuário. Isso mostra um projeto simples na base, mas com espaço claro para crescer em direção a um assistente mais sofisticado.