Aplicação de chat web em tempo real, onde cada aba do navegador representa um usuário diferente. O sistema permite login simples, troca de mensagens em tempo real, indicador de digitação, notificações, contador de mensagens não lidas e alternância de tema (claro/escuro).
- Login simples com nome de exibição
- Criação e entrada em salas de chat
- Mensagens em tempo real via WebSocket
- Indicador de “usuário digitando”
- Notificações de novas mensagens
- Contador de mensagens não lidas no título da aba
- Feedback visual de usuários entrando e saindo
- Tema claro / escuro com toggle
- Arquitetura baseada em boas práticas (DDD + Clean Architecture)
Tecnologias e ferramentas utilizadas:
- React
- Vite
- TypeScript
- Zustand (gerenciamento de estado global)
- Socket.IO Client
- Shadcn/UI
- Tailwind CSS
- Atomic Design (atoms, molecules, organisms, templates)
- Web Notifications API
- Dark / Light Mode
- Gerenciar estado da aplicação
- Controlar UX (typing indicator, notificações, contador)
- Comunicação em tempo real com o backend
- Persistência leve em
sessionStorage
Tecnologias e ferramentas utilizadas:
- Node.js
- NestJS
- TypeScript
- Socket.IO
- PNPM
- class-validator
- Arquitetura DDD + Clean Architecture
- Persistência em memória
- Logging customizado
- Gerencia salas de chat
- Orquestra casos de uso (join, leave, send message)
- Retransmite eventos em tempo real
- Mantém domínio desacoplado da infraestrutura
- Domain Driven Design (DDD) de forma pragmática
- Ports & Adapters (Hexagonal Architecture)
- Domain
- Application
- Infrastructure
- Presentation
O projeto possui um docker-compose de desenvolvimento, permitindo subir frontend e backend com um único comando.
- Docker
- Docker Compose
docker compose -f docker-compose.dev.yml up --builddocker compose -f docker-compose.dev.yml downdocker compose -f docker-compose.dev.yml logs -f| Serviço | URL |
|---|---|
| Frontend | http://localhost:5173 |
| Backend | http://localhost:3000 |
| WebSocket | ws://localhost:3000 |