Remix

Make your own version of BrasCord Comunicação Social

Edit the prompt below and generate a customized version in seconds.

Original by Alan Wenner

Describe your app

Crie um site/app web chamado **BrasCord**, inspirado na experiência visual e de usabilidade do Discord, mas com identidade própria e tema brasileiro.

### 🎨 Interface e identidade

* Interface moderna, limpa, rápida e responsiva.
* Tema principal em **azul**, com tons de azul escuro e azul vibrante.
* Identidade visual brasileira, sem copiar logos, textos ou elementos proprietários do Discord.
* Página inicial com estrutura semelhante à referência/foto enviada, adaptada para o BrasCord.
* Nome **BrasCord** em destaque.
* Visual profissional, com animações suaves e boa experiência em computador e celular.
* Interface totalmente em português-BR.

### 🏠 Página inicial

Criar uma landing page com:

* Logo/nome BrasCord.
* Botão **Criar conta**.
* Botão **Entrar**.
* Botão **Continuar com Google**.
* Pequena apresentação do BrasCord destacando chamadas, compartilhamento de tela e comunicação entre amigos.
* Design brasileiro moderno e tecnológico.

### 👤 Conta e login

Implementar:

* Cadastro com e-mail, senha e nome de usuário.
* Login com e-mail e senha.
* Login funcional com Google.
* Logout.
* Perfil básico do usuário.
* Avatar e nome de usuário.

### 👥 Adicionar amigos

Após entrar:

* Botão **Adicionar amigo**.
* Campo para pesquisar usuário.
* Enviar solicitação de amizade.
* Aceitar ou recusar solicitação.
* Lista de amigos.
* Mostrar status online/offline.
* Botão para iniciar uma chamada com um amigo.

### 📞 Ligações reais

Implementar chamadas de áudio e vídeo **reais**, utilizando tecnologia adequada para comunicação em tempo real, preferencialmente **WebRTC**.

Durante a chamada:

* Ativar/desativar microfone.
* Ativar/desativar câmera.
* Encerrar chamada.
* Mostrar o usuário da chamada.
* Interface bonita e responsiva.
* Solicitar corretamente as permissões de câmera e microfone do navegador.

### 🖥️ Compartilhamento de tela

Adicionar botão **Compartilhar tela** durante uma chamada.

Permitir:

* Compartilhar tela inteira.
* Compartilhar uma janela.
* Compartilhar uma aba do navegador, quando suportado.
* Parar compartilhamento.
* Mostrar o compartilhamento para a outra pessoa.

Adicionar uma opção de **qualidade do compartilhamento**, com opções como:

* Automática
* 720p
* 1080p

A qualidade deve ser aplicada de forma real quando tecnicamente suportada pelo navegador/conexão.

### 💬 Chat

Dentro da conversa com um amigo:

* Chat de mensagens em tempo real.
* Campo para escrever mensagens.
* Botão enviar.
* Mostrar horário das mensagens.
* Separar visualmente mensagens enviadas e recebidas.
* Atualização em tempo real.

### 📱 Responsividade

O BrasCord deve funcionar bem em:

* PC
* Notebook
* Tablet
* Celular

### ⚡ Desempenho

Priorize:

* Carregamento rápido.
* Código organizado.
* Interface leve.
* Boa performance.
* Não criar funcionalidades desnecessárias neste momento.

### 🔐 Segurança

* Nunca armazenar senhas em texto puro.
* Utilizar autenticação segura.
* Proteger as rotas que exigem login.
* Solicitar permissões de câmera/microfone apenas quando necessário.
* Não criar dados falsos para fingir que chamadas ou mensagens são reais: as funcionalidades de comunicação devem funcionar de verdade quando configuradas.

### 🎯 Escopo inicial

**Por enquanto, NÃO adicionar servidores, canais, bots, marketplace, pagamentos, sistema de cargos ou outras funções complexas.**

O foco do primeiro MVP deve ser somente:

1. Página inicial BrasCord.
2. Criar conta.
3. Login.
4. Login com Google.
5. Perfil.
6. Adicionar amigos.
7. Lista de amigos.
8. Chamadas reais.
9. Áudio e vídeo.
10. Compartilhamento de tela.
11. Escolha de qualidade do compartilhamento.
12. Chat entre amigos.

Crie a aplicação já com uma arquitetura preparada para futuras atualizações, mas mantenha a primeira versão simples, rápida e bem acabada.

Free to use. No credit card required.