🐱 Kitty Chat React Sistema de Feedback com Emojis e Supabase

Kitty Chat React é um sistema moderno e responsivo de coleta de feedback com emojis, desenvolvido em React 18, TypeScript, Tailwind CSS e Supabase, ideal para sites e produtos que desejam entender rapidamente a percepção do usuário com uma experiência visual envolvente.

O que é o Kitty Chat?

É uma aplicação web que oferece um carrossel interativo de emojis que representa emoções do usuário, com direito a animações, tooltip dinâmico, área de comentários opcionais e estatísticas em tempo real com persistência de dados no Supabase.

A ideia nasceu com um objetivo simples: transformar o feedback em algo leve, visual, divertido — mas também eficiente e técnico.

Funcionalidades Técnicas

Carrossel de Emojis Interativo

• Loop horizontal infinito com animações suaves.

• Destaque visual para o emoji central (com escala e bolinha verde).

• Tooltip automática com descrição da emoção.

Campo de Comentário + Gatinho Animado

• Área para texto opcional com GIF de gatinho rotativo.

• Experiência afetuosa e personalizada no envio do feedback.

Estatísticas em Tempo Real

• Gráficos com barras de progresso por tipo de emoção.

• Totalizadores automáticos atualizados a cada novo feedback.

Backend com Supabase

• Tabela feedback com UUID, emoji, sentimento, comentário e timestamp.

• Serviços com validação, persistência e tratamento de erros.

Stack de Tecnologias

• React 18 – Frontend moderno

• TypeScript – Tipagem robusta

• Tailwind CSS – Estilização utilitária

• Supabase – Backend-as-a-Service (PostgreSQL + Realtime)

• Lucide React – Ícones SVG modulares

• Vite – Build tool rápida

Estrutura do Projeto

src/
├── App.tsx                  # Componente principal
├── GatinhoAnimado.tsx       # Gato animado com GIFs
├── FeedbackStats.tsx        # Painel de estatísticas
├── feedbackService.ts       # Comunicação com Supabase
├── supabase.ts              # Instância Supabase
├── assets/                  # Imagens e ícones
├── styles/                  # Tailwind e customizações

Instalação Local

npm install
npm run dev

Configuração do Supabase é feita via botão “Connect to Supabase” e variáveis de ambiente são injetadas automaticamente.

Emojis e Emoções

Dashboard Integrado

• Contadores dinâmicos por emoção

• Distribuição percentual em barras

• Auto-refresh na UI a cada novo envio

Roadmap Futuro

• Exportação automática para Notion e Google Sheets

• Integração com Zapier/Make para automações

• Dashboard em Flask para agendamento de tarefas

• 🔥 Integração com IA da Meta (Mr Coquinha AI 🤖)

Em breve, os feedbacks poderão ser interpretados em tempo real por uma IA que responde como um gatinho — sim, como o Mr. Coquinha da Meta: instagram.com/ai/450744101398316.

Deploy & Produção

• npm run build para gerar a build

• Arquivos exportados para /dist com possibilidade de deploy em Vercel, Netlify ou servidor próprio

Scripts Disponíveis

npm run dev       # Dev server
npm run build     # Build para produção
npm run preview   # Preview da build
npm run lint      # Lint do projeto

Licença e Contato

Este projeto é open-source e pode ser usado livremente para fins educacionais e demonstrativos.

Desenvolvido por:

Rafael Marques Lins – Ad Rock Digital Mkt

📩 rafael@adrock.com.br

Repositório GitHub:

🔗 github.com/adrockmkt/kitty-chat-react