SpectrumChat: Plataforma de Chat Integrado para Streamers

Este projeto é uma solução completa para streamers, focada em exibir chats da Twitch e YouTube em um único lugar, com interface responsiva para dispositivos móveis.

🎯 Descrição

SpectrumChat é uma aplicação web progressiva (PWA) que permite aos streamers conectarem-se simultaneamente ao chat da Twitch e do YouTube, visualizando as mensagens em uma interface única e responsiva. O projeto é dividido em duas partes principais: frontend e backend.

✨ Características Principais

• 🔄 Integração simultânea com Twitch e YouTube
• 📱 Interface responsiva (PWA)
• 🌙 Modo escuro por padrão
• 🔒 Autenticação com Google e vinculação de contas Twitch/YouTube
• 🚫 Recursos de moderação integrados
• 💾 Suporte offline
• 📊 Badges e emotes nativos de cada plataforma

🛠️ Tecnologias Utilizadas

Frontend

• React com TypeScript
• Vite para build e desenvolvimento
• Tailwind CSS para interface
• WebSocket para comunicação em tempo real
• Service Workers para funcionalidades offline
• PWA para instalação nativa
• ESLint para linting de código

Backend

• Node.js com TypeScript
• Express para API REST
• WebSocket para comunicação em tempo real
• Integração com APIs da Twitch, YouTube e Google
• Sistema de logging estruturado
• Swagger para documentação da API
• SQLite para persistência de dados
• Jest para testes unitários e de integração

📦 Pré-requisitos

• Node.js 18.x ou superior
• npm 9.x ou superior
• Chaves de API da Twitch, YouTube e Google OAuth
• Navegador moderno com suporte a WebSocket

🚀 Como Iniciar

Configuração Inicial

1. Clone o repositório:

   git clone https://github.com/seu-usuario/spectrum.git
   cd spectrum

2. Copie os arquivos de exemplo para criar os arquivos de ambiente:

   copy backend\.env.example backend\.env
   copy frontend\.env.example frontend\.env

3. Configure as credenciais nos arquivos .env criados. Você precisará configurar:

   • Credenciais da API do Google (para autenticação)
   • Credenciais da API da Twitch
   • Credenciais da API do YouTube

Configuração do Backend

1. Entre na pasta do backend:

   cd backend
   npm install

2. Configure as variáveis de ambiente no arquivo backend/.env seguindo o modelo backend/.env.example:

   # Requisitos mínimos
   GOOGLE_CLIENT_ID=seu_client_id_google
   GOOGLE_CLIENT_SECRET=seu_client_secret_google
   TWITCH_CLIENT_ID=seu_client_id_twitch
   TWITCH_CLIENT_SECRET=seu_client_secret_twitch
   YOUTUBE_CLIENT_ID=seu_client_id_youtube
   YOUTUBE_CLIENT_SECRET=seu_client_secret_youtube
   YOUTUBE_API_KEY=sua_api_key_youtube

3. Inicie o servidor:

   npm run dev

Configuração do Frontend

1. Entre na pasta do frontend:

   cd frontend
   npm install

2. Configure as variáveis de ambiente no arquivo frontend/.env seguindo o modelo frontend/.env.example:

   VITE_API_URL=http://localhost:3001
   VITE_WS_URL=ws://localhost:3001

3. Inicie o servidor de desenvolvimento:

   npm run dev

🔑 Configuração das APIs

Configuração da API do Google

1. Acesse o Google Cloud Console
2. Crie um novo projeto
3. Navegue até "APIs e Serviços" > "Credenciais"
4. Clique em "Criar Credenciais" > "ID do Cliente OAuth"
5. Configure as origens JavaScript autorizadas (ex: http://localhost:3000, que será o endereço do frontend Vite)
6. Configure as URIs de redirecionamento autorizadas (ex: http://localhost:3001/auth/google/callback, que é o endpoint no backend)
7. Copie o Client ID e Client Secret para o arquivo backend/.env

Configuração da API da Twitch

1. Acesse o Twitch Developer Console
2. Crie uma nova aplicação
3. Defina o URI de redirecionamento OAuth: http://localhost:3001/auth/twitch/callback
4. Obtenha o Client ID e Client Secret e adicione ao arquivo backend/.env

Configuração da API do YouTube

1. Acesse o Google Cloud Console
2. No seu projeto, vá para "APIs e Serviços" > "Biblioteca"
3. Ative a "YouTube Data API v3"
4. Crie credenciais OAuth para esta API (ID do Cliente OAuth)
5. Configure o URI de redirecionamento OAuth: http://localhost:3001/auth/youtube/callback
6. Copie o Client ID e Client Secret para o arquivo backend/.env
7. Crie uma Chave de API (API Key) para o projeto e adicione ao backend/.env como YOUTUBE_API_KEY.

📱 PWA Features

O SpectrumChat pode ser instalado como um aplicativo nativo em:

• 📱 Android através do Chrome
• 📱 iOS através do Safari
• 💻 Desktop através do Chrome, Edge ou outros navegadores compatíveis

Recursos offline disponíveis:

• Cache de mensagens anteriores
• Interface completa
• Indicador de status de conexão
• Sincronização automática quando online

🔒 Segurança

• OAuth2 para autenticação segura
• JWT para sessões (gerenciadas via cookies httpOnly e secure)
• HTTPS obrigatório em produção
• Rate limiting para proteção contra abusos (a ser implementado conforme necessidade)
• Validação de origem de WebSocket
• Sanitização de mensagens para prevenir XSS

🎨 Personalização

A interface do SpectrumChat é construída com Tailwind CSS, permitindo uma ampla personalização:

• Cores e Tema: Modifique as cores primárias, secundárias e de fundo no arquivo frontend/tailwind.config.js para ajustar o tema (incluindo o modo escuro).
• Estilos de Componentes: Personalize componentes React (frontend/src/components/) individualmente aplicando classes Tailwind ou modificando seus estilos internos.
• Fontes e Tipografia: Configure fontes e estilos tipográficos através do frontend/tailwind.config.js e frontend/src/index.css.
• Espaçamentos e Layout: Ajuste espaçamentos, margens e o layout geral utilizando as classes de utilitário do Tailwind CSS nos componentes.

📡 API WebSocket

O WebSocket (backend/src/websocket/index.ts) permite:

• Recebimento de mensagens em tempo real
• Ações de moderação instantâneas
• Indicadores de status de conexão
• Reconexão automática
• Buffer de mensagens offline (gerenciado pelo frontend)

👥 Contribuindo

1. Faça um Fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📝 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

🤝 Suporte

Para suporte, envie um email para [seu-email@exemplo.com] ou abra uma issue no GitHub.