https://github.com/ninomiquelino/realtime-chat-app-angularjs
ChatFlow é uma plataforma de comunicação em tempo real desenvolvida com Angular e Firebase,proporcionando uma experiência similar ao Slack/Discord com canais organizados, mensagens instantâneas e colaboração eficiente para equipes de todos os tamanhos.
https://github.com/ninomiquelino/realtime-chat-app-angularjs
angular-cli angularjs firebase html5 nodejs scss typescript vscode
Last synced: 2 months ago
JSON representation
ChatFlow é uma plataforma de comunicação em tempo real desenvolvida com Angular e Firebase,proporcionando uma experiência similar ao Slack/Discord com canais organizados, mensagens instantâneas e colaboração eficiente para equipes de todos os tamanhos.
- Host: GitHub
- URL: https://github.com/ninomiquelino/realtime-chat-app-angularjs
- Owner: NinoMiquelino
- License: mit
- Created: 2025-11-12T21:02:16.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-11-12T21:17:07.000Z (7 months ago)
- Last Synced: 2025-11-12T23:13:56.150Z (7 months ago)
- Topics: angular-cli, angularjs, firebase, html5, nodejs, scss, typescript, vscode
- Language: TypeScript
- Homepage:
- Size: 44.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 🙋♂️ Autor
---
# 💬 ChatFlow - Plataforma de Chat em Tempo Real
Uma aplicação moderna de chat em tempo real desenvolvida com Angular e Firebase, oferecendo comunicação instantânea, canais organizados e colaboração eficiente para equipes.
## ✨ Características Principais
### 💬 **Chat em Tempo Real**
- Mensagens instantâneas com atualização em tempo real
- Múltiplos canais de comunicação
- Histórico de conversas persistente
### 🎯 **Sistema de Canais**
- Criação e gerenciamento de canais públicos e privados
- Organização por temas e projetos
- Controle de acesso e permissões
### 👥 **Gestão de Usuários**
- Sistema de autenticação seguro
- Perfis personalizáveis
- Status online/offline/ausente
- Controle de papéis (Admin, Usuário, Convidado)
### 📱 **Design Responsivo**
- Interface otimizada para desktop e mobile
- Experiência adaptável a diferentes tamanhos de tela
- Navegação intuitiva e acessível
### 🚀 **Funcionalidades Avançadas**
- Upload de arquivos e imagens
- Sistema de reações com emojis
- Notificações em tempo real
- Timestamps e indicadores de leitura
## 🛠️ Tecnologias Utilizadas
| Camada | Tecnologias |
|--------|-------------|
| **Frontend** | Angular 17, TypeScript, RxJS, HTML5, SCSS |
| **Backend** | Firebase Authentication, Firestore, Storage |
| **Real-time** | Firebase Realtime Database |
| **Deploy** | Firebase Hosting, GitHub Actions |
| **Ferramentas** | Angular CLI, GitHub, VS Code |
## 📋 Pré-requisitos
- **Node.js** 18.x ou superior
- **npm** 9.x ou superior
- **Angular CLI** 17.x
- Conta no **Firebase**
## 🚀 Instalação e Configuração
### 1. Clonar o Repositório
```bash
git clone https://github.com/NinoMiquelino/realtime-chat-app-angularjs.git
cd realtime-chat-app-angularjs
```
2. Instalar Dependências
```bash
npm install
```
3. Configurar Firebase
1. Crie um projeto no Firebase Console
2. Ative os serviços:
· Authentication (Email/Password)
· Firestore Database
· Storage
3. Faça o download do arquivo de configuração environment.ts
4. Configurar Ambiente
Crie o arquivo src/environments/environment.ts:
```typescript
export const environment = {
production: false,
firebase: {
apiKey: "sua-api-key",
authDomain: "seu-projeto.firebaseapp.com",
projectId: "seu-projeto-id",
storageBucket: "seu-projeto.appspot.com",
messagingSenderId: "seu-sender-id",
appId: "seu-app-id"
}
};
```
5. Executar a Aplicação
```bash
# Servidor de desenvolvimento
ng serve
# Acesse: http://localhost:4200
```
📁 Estrutura do Projeto
```
src/
├── app/
│ ├── components/ # Componentes Angular
│ │ ├── chat/ # Componente principal de chat
│ │ ├── channels/ # Lista e gestão de canais
│ │ ├── profile/ # Perfil do usuário
│ │ └── login/ # Autenticação
│ ├── services/ # Serviços e lógica de negócio
│ │ ├── auth.service.ts
│ │ ├── chat.service.ts
│ │ └── notification.service.ts
│ ├── guards/ # Guards de rota
│ ├── models/ # Interfaces TypeScript
│ └── pipes/ # Pipes personalizados
├── assets/ # Recursos estáticos
└── environments/ # Configurações de ambiente
```
🔧 Scripts Disponíveis
```bash
# Desenvolvimento
npm start # Servidor de desenvolvimento
ng serve # Alternativa
# Build
npm run build # Build de produção
ng build # Alternativa
# Testes
npm test # Executar testes unitários
ng test # Alternativa
# Análise de código
npm run lint # ESLint
ng lint # Alternativa
```
🌐 Deploy
Deploy no Firebase Hosting
```bash
# Build da aplicação
ng build --configuration production
# Instalar Firebase CLI
npm install -g firebase-tools
# Login e deploy
firebase login
firebase init hosting
firebase deploy
```
📱 Funcionalidades
🎨 Interface do Usuário
· Layout Responsivo: Adaptável a desktop, tablet e mobile
· Tema Escuro: Interface moderna com tema escuro
· Navegação Intuitiva: Sidebar colapsável em mobile
💬 Sistema de Mensagens
· Tempo Real: Atualização instantânea das mensagens
· Formatação: Suporte a markdown básico
· Citações: Sistema de reply para mensagens
· Reações: Emojis para interação rápida
🔐 Segurança
· Autenticação JWT: Via Firebase Auth
· Controle de Acesso: Baseado em roles
· Regras Firestore: Segurança no nível do banco
📊 Administração
· Painel Admin: Gestão de usuários e canais
· Estatísticas: Métricas de uso
· Moderação: Ferramentas de moderação
🤝 Contribuição
Contribuições são sempre bem-vindas! Por favor, siga estas etapas:
1. Fork o 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
🔄 Changelog
· ✅ Chat em tempo real
· ✅ Sistema de canais
· ✅ Autenticação de usuários
· ✅ Design responsivo
· ✅ Upload de arquivos
---
Desenvolvido com ❤️ usando Angular e Firebase
---
## 🤝 Contribuições
Contribuições são sempre bem-vindas!
Sinta-se à vontade para abrir uma [*issue*](https://github.com/NinoMiquelino/realtime-chat-app-angularjs/issues) com sugestões ou enviar um [*pull request*](https://github.com/NinoMiquelino/realtime-chat-app-angularjs/pulls) com melhorias.
---
## 💬 Contato
📧 [Entre em contato pelo LinkedIn](https://www.linkedin.com/in/onivaldomiquelino/)
💻 Desenvolvido por **Onivaldo Miquelino**
---
